/* Arbeitsmarktseiten (Branche, Funktion, Übersicht).
   Baut auf styles.css auf (Tokens, Kopfzeile, Fuß, Schriften, .v7): Newsreader
   trägt Überschriften und Zahlen, Schibsted Grotesk den Text. Die Agenda
   (Pillen unter 1240 px, Linienleiste ab 1240 px) ist dieselbe wie auf der
   Ergebnisseite. <main> trägt .mk und .v7, damit Schrift und Signalfarben der
   Ergebnisseite gelten. Hier nur, was die Arbeitsmarktseiten zusätzlich brauchen.
   Quelle: dev/arbeitsmarkt/src/markt.css; de/ und en/ bekommen dieselbe Datei. */

/* Diagramme: Reihenfarben aus den Tokens der Site (Blau gegen Grau: CVD ΔE 14,9) */
.mk{--c-akzent:var(--accent);--c-akzent-hell:var(--v7-ord-3);--c-grau:var(--slate-2);--c-grau-hell:#b9c3cc;--c-gut:var(--green-vivid);--c-schlecht:var(--red-vivid)}
/* ---------- Grundgerüst ---------- */
.mk h1,.mk h2,.mk h3{font-family:var(--v7-display);font-weight:var(--v7-display-wght);letter-spacing:var(--v7-display-track);color:var(--navy);line-height:1.15;text-wrap:balance}

/* Kopf: Pfad, Titel, Lage, Metazeile */
.mk-head{padding-block:40px 36px;background:var(--bg)}
.mk-pfad{display:flex;flex-wrap:wrap;gap:6px;font-size:13.5px;color:var(--slate-2);list-style:none;margin-bottom:22px}
.mk-pfad li+li::before{content:"/";margin-right:6px;color:var(--slate-3)}
.mk-pfad a{color:var(--slate);text-decoration:none}
.mk-pfad a:hover{color:var(--accent)}
.mk-art{font-size:14px;font-weight:600;color:var(--accent-deep);margin-bottom:10px}
.mk h1{font-size:clamp(2.1rem,1.5rem + 2.6vw,3.6rem);line-height:1.05;letter-spacing:-.024em;max-width:20ch}
.mk-lede{font-family:var(--v7-display);font-size:clamp(1.15rem,1rem + .55vw,1.45rem);line-height:1.45;color:var(--graphite);max-width:46ch;margin-top:18px;letter-spacing:-.006em}
.mk-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:24px;font-size:14px;color:var(--slate)}
.mk-ton{display:inline-flex;align-items:center;gap:7px;font-weight:600;border-radius:20px;padding:3px 12px 3px 10px;font-size:13.5px}
.mk-ton::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.mk-ton-gegen,.mk-ton-abschwung{color:var(--red);background:var(--red-soft)}
.mk-ton-gemischt,.mk-ton-stagnation{color:var(--amber-ink);background:var(--amber-soft)}
.mk-ton-mit,.mk-ton-aufschwung{color:var(--green);background:var(--green-soft)}

/* Pillen (unter 1240 px), wie .v7-snav */
.v7-snav{position:sticky;top:calc(70px + env(safe-area-inset-top,0px));z-index:35;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.v7-snav-scroll{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;margin-inline:-6px;padding-inline:6px}
.v7-snav-scroll::-webkit-scrollbar{display:none}
.v7-snav-rel{position:relative;width:max-content}
@media(max-width:640px){.v7-snav-scroll{-webkit-mask-image:linear-gradient(90deg,black 85%,transparent);mask-image:linear-gradient(90deg,black 85%,transparent);padding-right:40px}}
.v7-snav-list{list-style:none;display:flex;gap:4px;padding-block:8px}
.v7-snav-list li{flex:none;scroll-snap-align:start}
.v7-snav-list a{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:20px;font-size:14px;font-weight:500;color:var(--slate);text-decoration:none;transition:color .25s}
.v7-snav-list a[aria-current="true"]{color:var(--on-navy)}
.v7-snav-ind{position:absolute;z-index:0;top:8px;height:36px;border-radius:20px;background:var(--navy);width:0;left:0;transition:transform .42s cubic-bezier(.22,1,.36,1),width .42s cubic-bezier(.22,1,.36,1)}
@media(max-width:640px){.v7-snav-list a{min-height:44px}.v7-snav-ind{height:44px}}

/* Linienleiste (ab 1240 px), wie .v7-ls */
.v7-body{position:relative}
.v7-rail-host{display:none}
@media(min-width:1240px){
  .v7-snav{display:none}
  /* Der Host ist so hoch wie die Leiste plus Luft (--mk-ls-h, setzt markt.js), damit
     das Kleben am Ende von .v7-body endet und die Leiste nicht in den Footer ragt.
     Der Inhalt rückt um dieselbe Höhe nach oben, der Fluss bleibt unverändert.
     Ohne JS bleibt der Host 0 hoch. */
  .v7-rail-host{display:block;position:sticky;top:calc(70px + env(safe-area-inset-top,0px));height:var(--mk-ls-h,0px);z-index:30;pointer-events:none;--mk-ls-luft:32px}
  .v7-rail-host + .v7-wrap{margin-top:calc(-1 * var(--mk-ls-h,0px))}
  .v7-rail-host .v7-ls{pointer-events:auto}
  .v7-body .v7-wrap{padding-left:calc(36px + var(--v7-rail))}
  .v7-body .v7-rail-host .v7-wrap{padding-left:36px}
}
.v7-ls{position:absolute;top:44px;width:calc(var(--v7-rail) - 28px);--ls-len:26px;--ls-gap:16px;--ls-shift:10px}
.v7-ls-list{list-style:none;display:flex;flex-direction:column;gap:var(--ls-gap);padding-left:calc(var(--ls-len) + 12px)}
.v7-ls-item{position:relative}
.v7-ls-item a{position:relative;display:inline-flex;align-items:baseline;gap:9px;font-size:14.5px;line-height:1.25;text-decoration:none;
  color:color-mix(in srgb,var(--accent) calc(var(--e,0) * 100%),var(--slate));transform:translateX(calc(var(--e,0) * var(--ls-shift)))}
.v7-ls-item a::before{content:"";position:absolute;inset:-7px -24px -7px -52px}
.v7-ls-item.is-on a{font-weight:600}
.v7-ls-item.is-done a{color:color-mix(in srgb,var(--accent) calc(var(--e,0) * 100%),var(--graphite))}
.v7-ls-idx{font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;opacity:calc(.55 + var(--e,0) * .45)}
.v7-ls-mark{position:absolute;top:50%;left:calc(-1 * var(--ls-len) - 12px);height:1.5px;width:var(--ls-len);border-radius:1px;
  background:color-mix(in srgb,var(--accent) calc(var(--e,0) * 100%),var(--line-strong));transform-origin:left center;transform:translateY(-50%) scaleX(calc(.7 + var(--e,0) * .5))}
.v7-ls-item.is-done .v7-ls-mark{background:color-mix(in srgb,var(--accent) calc(45% + var(--e,0) * 55%),var(--line-strong))}
.v7-ls-item:not(:last-child)::after{content:"";position:absolute;top:calc(100% + var(--ls-gap) / 2);left:calc(-1 * var(--ls-len) - 12px);height:1px;width:calc(var(--ls-len) * .5);background:var(--line-strong);opacity:.7}
.v7-ls-status{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;margin-top:22px;padding-left:2px}
.v7-ls-bar{display:block;width:3px;height:30px;border-radius:2px;background:var(--line-2);overflow:hidden}
.v7-ls-bar span{display:block;width:100%;height:100%;background:var(--accent);transform-origin:center top;transform:scaleY(0);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.v7-ls-status p{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--slate);font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.v7-snav-ind,.v7-ls-bar span{transition:none}}

/* Sprungziele sind die Überschriften. Sie landen knapp unter der Kante, die
   die Agenda misst (Pillen: Unterkante + 12 px; ab 1240 px der Seitenkopf),
   damit der angesprungene Eintrag aktiv wird. */
.mk-sec>h2{scroll-margin-top:128px}
@media(max-width:640px){.mk-sec>h2{scroll-margin-top:136px}}
@media(min-width:1240px){.mk-sec>h2{scroll-margin-top:80px}}

/* ---------- Abschnitte ---------- */
.mk-sec{padding-block:56px;border-top:1px solid var(--line)}
.mk-sec:first-child{border-top:0;padding-top:36px}
.mk-sec>h2{font-size:clamp(1.6rem,1.3rem + 1vw,2.15rem);margin-bottom:22px;max-width:28ch}
.mk-sec h3{font-size:1.28rem;margin:34px 0 10px;max-width:40ch}
.mk-sec h3:first-child{margin-top:0}
.mk-text{max-width:68ch}
.mk-text p{font-size:17px;line-height:1.66;color:var(--ink);margin-bottom:14px;text-wrap:pretty}
.mk-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--accent);text-decoration:none;margin-top:2px}
.mk-link::after{content:"→";transition:transform .2s}
.mk-link:hover::after{transform:translateX(3px)}

/* Kennzahlen: eine Zeile mit Haarlinien, Zahl in Newsreader */
.mk-kz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--navy);border-bottom:1px solid var(--line);margin-bottom:34px}
.mk-kz>div{padding:18px 20px 18px 0;display:flex;flex-direction:column;gap:6px;min-width:0}
.mk-kz>div+div{padding-left:20px;border-left:1px solid var(--line)}
.mk-kz-w{font-family:var(--v7-display);font-weight:var(--v7-display-wght);font-size:clamp(1.7rem,1.35rem + 1vw,2.25rem);line-height:1.05;color:var(--navy);letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.mk-kz-w i{width:9px;height:9px;border-radius:50%;flex:none;font-style:normal}
.mk-kz-w i.s-minus{background:var(--red-vivid)}.mk-kz-w i.s-plus{background:var(--green-vivid)}.mk-kz-w i.s-null{background:var(--slate-3)}
.mk-kz-t{font-size:14px;line-height:1.4;color:var(--slate)}
.mk-kz-q{font-size:12.5px;color:var(--slate-2)}
.mk-kz-q a{color:inherit}
@media(max-width:900px){.mk-kz{grid-template-columns:repeat(2,minmax(0,1fr))}.mk-kz>div:nth-child(3){padding-left:0;border-left:0}.mk-kz>div:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:440px){.mk-kz>div{padding:14px 10px 14px 0}.mk-kz>div:nth-child(2n){padding-left:14px}.mk-kz-w{font-size:1.5rem;gap:6px}.mk-kz-t{font-size:13.5px}}

/* Zahlen im Abschnitt: drei nebeneinander */
.mk-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;margin:22px 0 26px;max-width:860px;border-top:1px solid var(--line-strong)}
.mk-zahlen>div{padding:14px 18px 14px 0;display:flex;flex-direction:column;gap:4px}
.mk-zahlen b{font-family:var(--v7-display);font-weight:var(--v7-display-wght);font-size:1.7rem;line-height:1.1;color:var(--navy);letter-spacing:-.015em}
.mk-zahlen span{font-size:14px;color:var(--slate);line-height:1.4}

/* Kopfgrafiken */
.mk-kopfgraf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.mk-kopfgraf.einzeln{grid-template-columns:minmax(0,1fr);max-width:760px}
@media(max-width:960px){.mk-kopfgraf{grid-template-columns:minmax(0,1fr)}}

/* ---------- Grafik ---------- */
.mk-fig{max-width:760px;margin:26px 0 30px;container-type:inline-size;min-width:0}
.mk-kopfgraf .mk-fig{margin:0}
.mk-fig-kopf{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.mk-fig-titel{font-family:var(--v7-display);font-weight:600;font-size:1.15rem;color:var(--navy);line-height:1.3;letter-spacing:-.01em}
.mk-fig-unter{font-size:14px;color:var(--slate)}
.mk-fig-achse{font-size:12.5px;color:var(--slate-2);margin-top:4px}
.mk-leg{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--slate);margin-bottom:10px}
.mk-leg li{display:inline-flex;align-items:center;gap:8px}
.mk-key{display:inline-block;flex:none}
.mk-key-linie{width:16px;height:2px;border-radius:1px;background:var(--k)}
.mk-key-feld{width:12px;height:12px;border-radius:3px;background:var(--k)}
.mk-key-punkt{width:10px;height:10px;border-radius:50%;background:var(--k)}
.mk-key-hohl{width:10px;height:10px;border-radius:50%;border:2px solid var(--k);background:var(--bg)}
.mk-key-spanne{width:22px;height:9px;border-radius:3px;background:color-mix(in srgb,var(--k) 28%,var(--bg));position:relative}
.mk-key-spanne::after{content:"";position:absolute;left:7px;top:-1px;width:9px;height:9px;border-radius:50%;background:var(--k);outline:2px solid var(--bg)}
.mk-plot{position:relative}
.mk-plot svg{display:block;width:100%;height:auto;overflow:visible}
.mk-plot-w,.mk-plot-m{display:none}
@container (min-width:440px){.mk-plot-n{display:none}.mk-plot-m{display:block}}
@container (min-width:600px){.mk-plot-m{display:none}.mk-plot-w{display:block}}
.mk-plot text{font-family:var(--v7-text);letter-spacing:0}
.mk-plot .tick{font-size:11.5px;fill:var(--slate-2)}
.mk-plot .wert{font-size:12.5px;fill:var(--graphite);font-weight:500}
.mk-plot .wert.stark{fill:var(--navy);font-weight:600}
.mk-plot .wert.gut{fill:var(--green);font-weight:600}
.mk-plot .wert.schlecht{fill:var(--red);font-weight:600}
.mk-plot .innen-hell{fill:var(--on-navy);font-weight:600}
.mk-plot .innen-dunkel{fill:var(--navy);font-weight:600}
.mk-plot .kat{font-size:13px;fill:var(--graphite)}
.mk-plot .kat.stark{fill:var(--navy);font-weight:600}
.mk-plot .kat.klein{font-size:12px;fill:var(--slate)}
.mk-plot .gitter{stroke:var(--line-2);stroke-width:1}
.mk-plot .achse{stroke:var(--line-strong);stroke-width:1}
.mk-plot .linie{stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.mk-plot .flaeche{opacity:.1}
.mk-plot .ring{stroke:var(--bg);stroke-width:2}
.mk-plot .steg{stroke-width:2.5;stroke-linecap:round}
.mk-plot .spanne{opacity:.28}
.mk-plot .xh{stroke:var(--slate-3);stroke-width:1;opacity:0;pointer-events:none}
.mk-plot .xh.an{opacity:1}
.mk-plot .hit{fill:transparent;cursor:crosshair}
.mk-tip{position:absolute;z-index:5;pointer-events:none;background:var(--navy);color:var(--on-navy);border-radius:6px;padding:8px 11px;font-size:13px;line-height:1.45;box-shadow:0 6px 20px rgba(13,27,46,.18);max-width:260px;opacity:0;transition:opacity .12s}
.mk-tip.an{opacity:1}
.mk-tip b{display:block;font-weight:600;margin-bottom:2px}
.mk-tip span{display:block;color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}
.mk-fig-fuss{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.mk-fig-notiz{font-size:14.5px;line-height:1.5;color:var(--graphite);max-width:68ch}
.mk-fig-quelle{font-size:12.5px;color:var(--slate-2)}
.mk-fig-quelle a{color:var(--slate)}

/* Tabelle im Text (Abbau je Unternehmen, Werke). Breit über die Inhaltsfläche;
   unter 760 px als Liste, jede Zelle mit ihrer Spaltenüberschrift. */
.mk-tabelle{overflow-x:auto;margin:16px 0 26px}
.mk-tabelle table{width:100%;border-collapse:collapse;font-size:14.5px}
.mk-tabelle th,.mk-tabelle td{padding:12px 18px 12px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.45}
.mk-tabelle thead th{font-size:12.5px;font-weight:600;color:var(--slate);border-bottom:1px solid var(--navy);white-space:nowrap}
.mk-tabelle tbody th{font-weight:600;color:var(--navy);min-width:9em}
.mk-tabelle td{color:var(--graphite);min-width:10em}
@media(max-width:760px){
  .mk-tabelle table,.mk-tabelle tbody,.mk-tabelle tr,.mk-tabelle th,.mk-tabelle td{display:block}
  .mk-tabelle thead{display:none}
  .mk-tabelle tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .mk-tabelle th,.mk-tabelle td{border:0;padding:3px 0;min-width:0}
  .mk-tabelle tbody th{font-size:16px;margin-bottom:4px}
  .mk-tabelle td::before{content:attr(data-k);display:block;font-size:12px;font-weight:600;color:var(--slate-2);margin-top:6px}
}

/* Kopf mit Meldungen rechts */
.mk-head-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media(min-width:1024px){.mk-head-grid{grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:56px;align-items:start}}
.mk-aktuell{border-top:1px solid var(--navy);padding-top:12px}
@media(min-width:1024px){.mk-aktuell{margin-top:30px}}
.mk-aktuell-k{font-size:13px;font-weight:600;color:var(--accent-deep);margin-bottom:4px}
.mk-aktuell ol{list-style:none;display:flex;flex-direction:column}
.mk-aktuell li{display:flex;flex-direction:column;gap:3px;padding:11px 0;border-bottom:1px solid var(--line)}
.mk-aktuell-m{font-size:12.5px;color:var(--slate-2)}
.mk-aktuell a{font-size:15px;line-height:1.4;color:var(--ink);text-decoration:none}
.mk-aktuell a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.mk-aktuell-s{font-size:13px;color:var(--slate-2);margin-top:8px}

/* Check-Kasten und Querverweise */
.mk-weiter{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;margin-top:34px;max-width:960px}
@media(max-width:820px){.mk-weiter{grid-template-columns:minmax(0,1fr)}}
.mk-check{background:var(--navy);color:var(--on-navy);border-radius:var(--r-card);padding:26px 28px}
.mk-check h3{color:var(--on-navy);margin:0 0 8px;font-size:1.35rem}
.mk-check p{color:rgba(255,255,255,.8);font-size:15.5px;line-height:1.55;margin-bottom:18px;max-width:46ch}
.mk-btn{display:inline-flex;align-items:center;gap:9px;background:var(--on-navy);color:var(--navy);font-weight:600;font-size:15px;padding:12px 22px;border-radius:var(--radius);text-decoration:none;min-height:44px}
.mk-btn::after{content:"→"}
.mk-quer h3{font-size:1.05rem;margin:0 0 10px}
.mk-quer ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.mk-quer a,.mk-quer span{display:inline-flex;align-items:center;min-height:36px;padding:6px 13px;border:1px solid var(--line);border-radius:20px;font-size:14px;color:var(--graphite);text-decoration:none}
.mk-quer a:hover{border-color:var(--accent);color:var(--accent)}
.mk-quer span{color:var(--slate-3);border-style:dashed}

/* Quellen am Ende eines Abschnitts: Herausgeber als kleine Marken */
.mk-sec-q{margin-top:20px;max-width:860px;font-size:13px;line-height:1.5;color:var(--slate-2)}
.mk-sec-q a{color:var(--slate);text-decoration-color:var(--line-strong);text-underline-offset:3px}
.mk-sec-q a:hover{color:var(--accent)}

/* Quellenregister: Profil, dann Gruppen nach Art */
.mk-qp{max-width:860px;border-top:1px solid var(--navy);padding-top:14px;margin-bottom:8px}
.mk-qp-s{font-size:15px;line-height:1.55;color:var(--graphite)}
.mk-qp-s b{font-weight:600;color:var(--navy)}
.mk-qp-s a{color:var(--graphite);text-decoration-color:var(--line-strong);text-underline-offset:3px}
.mk-qgs{display:grid;gap:4px}
.mk-qg{scroll-margin-top:140px;min-width:0;border-bottom:1px solid var(--line)}
.mk-qg summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto 20px;column-gap:12px;row-gap:2px;align-items:baseline;padding:12px 0;cursor:pointer}
.mk-qg summary::-webkit-details-marker{display:none}
.mk-qg summary::after{content:"";grid-column:3;grid-row:1;width:8px;height:8px;border-right:1.5px solid var(--slate-2);border-bottom:1.5px solid var(--slate-2);transform:rotate(45deg);justify-self:center;margin-top:-3px;transition:transform .2s}
.mk-qg[open] summary::after{transform:rotate(225deg);margin-top:3px}
.mk-qg-t{font-family:var(--v7-display);font-weight:var(--v7-display-wght);font-size:1.02rem;color:var(--navy)}
.mk-qg-n{grid-column:2;grid-row:1;font-size:13px;font-weight:600;color:var(--slate-2);font-variant-numeric:tabular-nums}
.mk-qg-h{grid-column:1 / -1;font-size:13px;line-height:1.45;color:var(--slate-2)}
.mk-qg[open] .mk-qg-h{display:none}
.mk-qg summary:hover .mk-qg-t{color:var(--accent)}
.mk-qg summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mk-qg ul{padding-bottom:12px}
.mk-qg ul{list-style:none;columns:2 360px;column-gap:40px}
.mk-qg li{break-inside:avoid;padding:4px 0;font-size:13.5px;line-height:1.5;color:var(--graphite)}
.mk-qg li b{font-weight:600;color:var(--navy);margin-right:2px}
.mk-qg li a{color:var(--graphite);text-decoration-color:var(--line-strong);text-underline-offset:3px;scroll-margin-top:140px}
.mk-qg li a:hover{color:var(--accent)}
.mk-qg li a:target{background:var(--accent-soft)}
.mk-q-t{color:var(--slate-3)}
.mk-methode{max-width:68ch;margin-top:26px;font-size:14.5px;color:var(--slate);line-height:1.6}

/* ---------- Übersicht ---------- */
.mk-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 32px;margin-top:8px}
.mk-liste a,.mk-liste div.folgt{display:flex;flex-direction:column;gap:6px;padding:18px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.mk-liste .n{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mk-liste .n b{font-family:var(--v7-display);font-weight:600;font-size:1.22rem;color:var(--navy);letter-spacing:-.01em}
.mk-liste a:hover .n b{color:var(--accent)}
.mk-liste .l{font-size:14.5px;line-height:1.5;color:var(--slate)}
.mk-liste .f{font-size:12.5px;color:var(--slate-2)}
.mk-liste a .f{color:var(--accent);font-weight:600}
.mk-liste .mk-ton{font-size:12.5px;padding:2px 10px 2px 8px;flex:none}

/* ---------- Sperre (Pro) ----------
   Gesperrter Abschnitt: Teaser, darunter ein verfremdeter Platzhalter unter
   Milchglas und eine Karte mit dem Weg zu Pro. Das Muster folgt der Pro-Karte
   der Ergebnisseite (.v7-vg-lock, .v7-chip-pro, --v7-glass). Der echte Inhalt
   steht nicht im HTML; markt.js lädt ihn nach der Prüfung des Kontos. */
.mk-ag-pro{display:inline-flex;align-items:center;gap:3px;margin-left:7px;padding:1px 7px 1px 6px;border-radius:20px;background:var(--navy);color:var(--on-navy);font-family:var(--v7-text);font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1.5;vertical-align:.15em;white-space:nowrap}
.mk h2 .mk-ag-pro{font-size:12.5px;margin-left:10px;vertical-align:.3em}
.v7-snav-list a[aria-current="true"] .mk-ag-pro{background:var(--on-navy);color:var(--navy)}
.mk-teaser{color:var(--graphite)}
.mk-sperre{position:relative;display:grid;max-width:760px;overflow:hidden;margin-top:6px;border-radius:var(--r-card)}
.mk-sperre>*{grid-area:1/1;min-width:0}
.mk-sperre-glas{max-height:620px;overflow:hidden;padding:4px 2px 0;filter:blur(5px);opacity:.85;user-select:none;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,black 50%,transparent 96%);mask-image:linear-gradient(180deg,black 50%,transparent 96%)}
.mk-sperre-glas p{font-size:17px;line-height:1.66;color:var(--ink);margin-bottom:14px}
.mk-sperre-glas h3{font-size:1.3rem;margin:20px 0 10px}
.mk-sperre-graf{border-top:1px solid var(--navy);padding-top:10px;margin:18px 0 22px}
.mk-sperre-graf p{font-weight:600;margin-bottom:12px}
.mk-sperre-graf div{display:flex;align-items:flex-end;gap:12px;height:150px;border-bottom:1px solid var(--line)}
.mk-sperre-graf i{flex:1;background:var(--accent);border-radius:2px 2px 0 0}
.mk-sperre-deck{position:relative;display:grid;justify-items:center;align-content:start;padding:52px 16px 24px;background:linear-gradient(180deg,rgba(255,255,255,.30),var(--v7-glass,rgba(255,255,255,.62)) 55%,rgba(255,255,255,.9));-webkit-backdrop-filter:saturate(1.3) blur(3px);backdrop-filter:saturate(1.3) blur(3px)}
.mk-sperre-karte{display:grid;justify-items:center;gap:12px;width:100%;max-width:470px;padding:26px 28px;text-align:center;background:color-mix(in srgb,var(--bg) 92%,transparent);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 36px rgba(13,27,46,.10)}
.mk-chip-pro{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 8px;border-radius:20px;background:var(--navy);color:var(--on-navy);font-size:12.5px;font-weight:700;line-height:1.4}
.mk-sperre-t{font-family:var(--v7-display);font-size:1.32rem;line-height:1.3;color:var(--navy);text-wrap:balance}
.mk-sperre-d{font-size:15px;line-height:1.55;color:var(--slate);text-wrap:pretty}
.mk-sperre-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 20px;margin-top:2px}
.mk-btn-a{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:var(--on-navy);font-weight:600;font-size:15px;padding:12px 22px;border-radius:var(--radius);text-decoration:none;min-height:44px}
.mk-btn-a::after{content:"→"}
.mk-btn-a:hover{background:var(--accent-deep)}
.mk-sperre-an{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:15px;color:var(--accent);text-decoration:none}
.mk-sperre-an:hover{text-decoration:underline}
.mk-sperre-n{font-size:13.5px;color:var(--slate-2)}
.mk-sperre-laden{font-size:15px;color:var(--slate)}
.mk-sperre[data-zustand="gast"] [data-nur]:not([data-nur~="gast"]),
.mk-sperre[data-zustand="konto"] [data-nur]:not([data-nur~="konto"]),
.mk-sperre[data-zustand="frei"] [data-nur]:not([data-nur~="frei"]){display:none}
.mk-frei{animation:mkFrei .5s ease-out}
@keyframes mkFrei{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mk-frei{animation:none}}
@media(max-width:560px){
  .mk-sperre-deck{padding:28px 0 16px}
  .mk-sperre-karte{padding:22px 18px}
  .mk-sperre-t{font-size:1.2rem}
}
/* Mehrere gesperrte Abschnitte: die Karte steht beim ersten, die folgenden zeigen nur Glas und Marke. */
.mk-sperre-klein .mk-sperre-glas{max-height:220px}
.mk-sperre-klein .mk-sperre-deck{align-content:center;padding:16px}
.mk-sperre-klein .mk-chip-pro{text-decoration:none;font-size:13px;padding:6px 12px 6px 10px;box-shadow:0 6px 18px rgba(13,27,46,.14)}
.mk-sperre-liste{list-style:none;display:grid;gap:4px;width:100%;margin:2px 0 2px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left}
.mk-sperre-liste li{counter-increment:sp;display:flex;gap:10px;align-items:baseline;font-size:15px}
.mk-sperre-liste li::before{content:counter(sp,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--slate-2)}
.mk-sperre-liste a{color:var(--navy);text-decoration:none;font-weight:600}
.mk-sperre-liste a:hover{color:var(--accent)}
.mk-sperre[data-zustand="frei"] .mk-sperre-liste{display:none}
.mk-ag-schloss{display:inline-flex;vertical-align:-.05em;margin-left:5px;color:var(--slate-2)}
.mk-ag-schloss svg{width:12px;height:12px}
.v7-snav-list a[aria-current="true"] .mk-ag-schloss{color:var(--on-navy)}

/* ---------- Pro in der Signaturfarbe der Live-Seite ----------
   --pro und --pro-deep aus styles.css (gedecktes Grün, nur als Akzent). Für
   weiße Schrift auf Grün gilt --pro-deep (Kontrast über 7 : 1). */
.mk-ag-pro,.mk-chip-pro{background:var(--pro-deep);color:var(--on-navy)}
.mk-ag-schloss{color:var(--pro)}
.v7-snav-list a[aria-current="true"] .mk-ag-schloss{color:var(--pro-bright)}
.mk-sperre-karte{border-top:3px solid var(--pro)}
.mk-sperre .mk-btn-a{background:var(--pro-deep)}
.mk-sperre .mk-btn-a:hover{background:color-mix(in srgb,var(--pro-deep) 82%,black)}
.mk-sperre-an{color:var(--pro-deep)}
.mk-sperre-liste li::before{color:var(--pro)}
.mk-sperre-liste a:hover{color:var(--pro-deep)}
.mk-sperre-n a{color:var(--pro-deep)}
/* KW in der Überschrift */
.mk-h1-kw{color:var(--accent);white-space:nowrap}

/* ---------- Mobil ----------
   Lange Tabellen werden unter 760 px kompakt: Name und erste Spalte, der Rest
   auf Antippen (markt.js). Ohne Skript bleiben alle Zeilen offen. */
.mk-zeile-auf{all:unset}
.mk-zeile-auf svg,.mk-tabelle-alle{display:none}
@media(max-width:760px){
  .mk-tabelle.is-kompakt{margin-top:6px}
  .mk-tabelle.is-kompakt tbody th{margin:0}
  .mk-tabelle.is-kompakt .mk-zeile-auf{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;min-height:32px;cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
  .mk-tabelle.is-kompakt .mk-zeile-auf:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .mk-tabelle.is-kompakt .mk-zeile-auf svg{display:block;flex:none;color:var(--slate-2);transition:transform .2s}
  .mk-tabelle.is-kompakt tr.offen .mk-zeile-auf svg{transform:rotate(180deg)}
  .mk-tabelle.is-kompakt tr:not(.offen) td:not(:first-of-type){display:none}
  .mk-tabelle-alle{display:flex;margin:14px 0 0 auto;font:inherit;font-size:13.5px;font-weight:600;color:var(--accent);background:none;border:1px solid var(--line);border-radius:20px;padding:6px 14px;cursor:pointer}
}
@media(prefers-reduced-motion:reduce){.mk-zeile-auf svg{transition:none}}
.mk-nw{white-space:nowrap}
/* Für Pro freigeschaltet: Marke bleibt, Schloss geht */
.pro-frei .mk-ag-pro svg{display:none}
.pro-frei .mk-ag-pro{padding-left:8px}
.pro-frei .mk-ag-schloss svg{display:none}
.pro-frei .mk-ag-schloss::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pro);vertical-align:.15em}

/* Lage: Konjunkturphase und die Kennzahl dahinter */
.mk-phase{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.mk-phase-z{font-weight:600;color:var(--navy)}