/* =====================================================================
   TailorCampus – eigene Bausteine auf dem Baukasten der Tailor-Websites
   (Design „magazin-weiss“, Zeitungskopf). Schwarz-Weiß mit genau einem
   Akzent: Die Workshops im Lernrad tragen die Marker-Farbe.
   Kein Inline-Style (CSP): alle Maße und Farben kommen von hier.
   ===================================================================== */

.page-home .hero > .hero-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
/* Fünf Schritte: wie die Geld-Strecke, nur mit fünf Stationen */
[data-design="magazin"] .flow.flow-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { [data-design="magazin"] .flow.flow-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { [data-design="magazin"] .flow.flow-5 { grid-template-columns: minmax(0, 1fr); } }
.flow-5 .kt-mods { font: 700 0.68rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; margin: 10px 0 0; color: var(--ink); }
.flow-5 .kt-today { font: italic 400 0.92rem/1.45 var(--serif); color: var(--muted); margin-top: 8px; }
.flow-5 li { cursor: pointer; }
.flow-5 li:hover h3, .flow-5 li.on h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.flow-5 li.on { box-shadow: inset 0 4px 0 var(--marker); }

.kt-meta { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 6px 18px; font: 400 0.95rem/1.45 var(--sans); border-top: 1px solid var(--line); padding-top: 12px; margin: 0; }
.kt-meta dt { font: 700 0.68rem/1.6 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.kt-meta dd { margin: 0; color: var(--ink-2); }
.kt-list { list-style: none; padding: 0; margin: 14px 0 0; }
.kt-list li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
.kt-list li::before { content: "— "; }
.kt-four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 22px; }
@media (max-width: 640px) { .kt-four { grid-template-columns: minmax(0, 1fr); } }
.kt-four div { border-top: 2px solid var(--rule); padding: 12px 0 16px; }
.kt-four b { display: block; font: 700 0.68rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 4px; }
.kt-four p { margin: 0; font-size: 1rem; }
.kt-out { margin-top: 6px; border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); padding: 14px 0; font: italic 400 1.25rem/1.4 var(--serif); }
.kt-out mark { background: var(--marker-soft); color: inherit; padding: 0 0.1em; }

/* Ablauf eines Workshops */
.kt-bar { display: flex; height: 54px; border: 1.5px solid var(--ink); margin: 6px 0 0; }
.kt-bar button { appearance: none; border: 0; border-right: 1px solid var(--ink); padding: 6px; text-align: left; font: 700 0.68rem/1.2 var(--sans); letter-spacing: 0.04em; color: var(--ink); background: var(--bg); cursor: pointer; overflow: hidden; }
.kt-bar button:last-child { border-right: 0; }
.kt-bar button.act { background: var(--marker-soft); }
.kt-bar button.pause { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line) 6px 7px); }
.kt-bar button[aria-pressed="true"] { box-shadow: inset 0 -5px 0 var(--ink); }
.kt-bar-scale { display: flex; justify-content: space-between; font: 400 0.75rem/1 var(--sans); color: var(--muted); margin-top: 6px; }
.kt-rh { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(24px, 4vw, 56px); margin-top: 26px; align-items: start; }
@media (max-width: 860px) { .kt-rh { grid-template-columns: minmax(0, 1fr); } .kt-bar { height: auto; flex-wrap: wrap; } .kt-bar button { flex: 1 1 30% !important; min-height: 44px; border-bottom: 1px solid var(--ink); } }
.kt-rh-info { border-top: 2px solid var(--rule); padding-top: 12px; min-height: 8em; }
.kt-rh-info .k { font: 700 0.68rem/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.kt-rh-info h3 { margin: 6px 0; }
.kt-big { border-top: 2px solid var(--rule); padding-top: 12px; }
.kt-big b { display: block; font: 700 clamp(3.6rem, 7vw, 5.6rem)/0.95 var(--serif); letter-spacing: -0.03em; }
.kt-big b span { background: linear-gradient(104deg, transparent 0.08em, var(--marker) 0.12em, var(--marker) calc(100% - 0.08em), transparent); color: #111; padding: 0 0.08em; }
.kt-big p { font: italic 400 0.98rem/1.45 var(--serif); color: var(--muted); margin: 8px 0 0; }

/* Quiz: Testen Sie sich */
.kt-quiz .card p.q { font: 700 1.2rem/1.3 var(--serif); color: var(--ink); margin: 6px 0 12px; }
.kt-quiz .opts { display: flex; flex-wrap: wrap; gap: 8px; }
.kt-quiz .zf-chip.ok { background: var(--marker); color: #111; border-color: #111; }
.kt-quiz .zf-chip.no { text-decoration: line-through; color: var(--muted); border-color: var(--muted); }
.kt-quiz .expl { font: italic 400 0.98rem/1.45 var(--serif); color: var(--ink-2); margin-top: 12px; }
.kt-quiz .expl[hidden] { display: none; }
.kt-score { font: italic 400 1rem/1.4 var(--serif); color: var(--muted); }

/* Reifegrad-Check und Pfad */
.kt-path { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 980px) { .kt-path { grid-template-columns: minmax(0, 1fr); } }
.kt-q { border-top: 1px solid var(--rule); padding: 12px 0 14px; }
.kt-q p { margin: 0 0 8px; font: 700 1.05rem/1.35 var(--serif); }
.kt-q p span { font: 700 0.72rem/1 var(--sans); letter-spacing: 0.1em; margin-right: 8px; }
.kt-res { border-top: 3px double var(--rule); border-bottom: 1px solid var(--rule); padding: 16px 0; margin-top: 8px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.kt-res b.n { font: 700 3.4rem/1 var(--serif); letter-spacing: -0.03em; }
.kt-res .t { font: 700 1.25rem/1.25 var(--serif); }
.kt-res .d { font: italic 400 0.98rem/1.45 var(--serif); color: var(--muted); margin: 4px 0 0; }
.kt-ctl { margin-bottom: 16px; }
.kt-ctl .zf-lbl { display: block; margin-bottom: 8px; }
.kt-plan { border-top: 3px double var(--rule); margin-top: 6px; }
.kt-plan-h { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.kt-plan-h div { padding: 12px 12px 12px 0; }
.kt-plan-h b { display: block; font: 700 2rem/1 var(--serif); letter-spacing: -0.02em; }
.kt-plan-h span { font: 400 0.75rem/1.3 var(--sans); color: var(--muted); }
@media (max-width: 560px) { .kt-plan-h { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kt-plan table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.92rem; }
.kt-plan th { text-align: left; font: 700 0.66rem/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; padding: 10px 10px 8px 0; border-bottom: 2px solid var(--rule); }
.kt-plan td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.kt-plan td.w { font-weight: 700; white-space: nowrap; }
.kt-plan td .zf-sw { margin-right: 8px; vertical-align: -1px; }
.kt-plan td button { display: inline; appearance: none; background: none; border: 0; padding: 0; font: 700 0.95rem/1.35 var(--serif); color: var(--ink); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kt-plan td em { font: italic 400 0.85rem/1.3 var(--serif); color: var(--muted); display: block; }
.kt-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.kt-actions .small { color: var(--muted); }

.kt-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 200%); opacity: 0; background: #111; color: #f1eee6; padding: 10px 16px; font: 700 0.78rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; z-index: 50; }
.kt-toast.show { transform: translate(-50%, 0); opacity: 1; }
.big-num { font: 700 clamp(2.4rem, 4vw, 3.2rem)/1 var(--serif); letter-spacing: -0.02em; display: block; margin: 8px 0 4px; }

/* ---------- Lernrad: Kennung über dem Workshop-Namen ---------- */
.zf-seg tspan.zf-code { font-weight: 800; letter-spacing: 0.12em; }
.zf-item .zf-id { font: 800 0.72em/1 var(--sans); letter-spacing: 0.08em; margin-right: 6px; }
.zf-meta { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 4px 12px; font: 400 0.92rem/1.4 var(--sans); margin: 10px 0 4px; }
.zf-meta dt { font: 700 0.66rem/1.7 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.zf-meta dd { margin: 0; color: var(--ink-2); }
.zf-out { font: italic 400 1.02rem/1.45 var(--serif); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 10px 0; margin: 14px 0; }
.flow-5 .kt-mods a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.flow-5 li { cursor: default; }

/* ---------- Abstände ohne Inline-Style ---------- */
.kt-gap { margin-top: clamp(40px, 6vw, 64px); }
.kt-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .kt-split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Auf einen Blick (für Leser, Suchmaschinen und Sprachmodelle) ---------- */
.kt-blick { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(24px, 5vw, 64px); align-items: start; border-top: 3px double var(--rule); border-bottom: 1px solid var(--rule); padding: 22px 0 26px; }
@media (max-width: 900px) { .kt-blick { grid-template-columns: minmax(0, 1fr); } }
.kt-def { font: 400 clamp(1.12rem, 1.6vw, 1.3rem)/1.55 var(--serif); margin: 8px 0 0; color: var(--ink); }
.kt-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 0; }
.kt-facts div { border-top: 1px solid var(--line); padding: 8px 0; }
.kt-facts dt { font: 700 0.64rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.kt-facts dd { margin: 2px 0 0; font: 700 1.02rem/1.3 var(--serif); }

/* ---------- Lernpfade als Karten ---------- */
.kt-pfade { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 36px); counter-reset: none; }
@media (max-width: 1000px) { .kt-pfade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kt-pfade { grid-template-columns: minmax(0, 1fr); } }
.kt-pfad { border-top: 2px solid var(--rule); padding: 14px 0 28px; display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 90px; }
.kt-pfad h3 { margin: 2px 0 0; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.15; }
.kt-pfad p { margin: 0; }
.kt-pfad .btn { align-self: flex-start; margin-top: auto; }
.kt-pfad-ws { display: flex; flex-wrap: wrap; gap: 6px; }
.kt-pfad-ws a { font: 800 0.7rem/1 var(--sans); letter-spacing: 0.08em; border: 1.5px solid var(--ink); padding: 5px 7px; color: var(--ink); text-decoration: none; background: var(--marker-soft); }
.kt-pfad-ws a:hover { background: var(--marker); color: #111; }
.kt-pfad-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.kt-pfad-meta dt { font: 700 0.6rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.kt-pfad-meta dd { margin: 0; font: 400 0.86rem/1.35 var(--sans); }

/* ---------- Programm nach Stufen ---------- */
.kt-stufen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(18px, 2.4vw, 32px); }
@media (max-width: 1100px) { .kt-stufen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kt-stufen { grid-template-columns: minmax(0, 1fr); } }
.kt-stufe { border-top: 3px solid var(--rule); padding: 12px 0 24px; scroll-margin-top: 90px; }
.kt-stufe h3 { margin: 4px 0 4px; font-size: 1.5rem; }
.kt-stufe-d { font: italic 400 0.98rem/1.45 var(--serif); color: var(--muted); margin: 0 0 8px; }
.kt-stufe ul { list-style: none; padding: 0; margin: 0; }
.kt-stufe li a { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: 2px 8px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.kt-stufe li a .id { font: 800 0.72rem/1.6 var(--sans); letter-spacing: 0.08em; grid-row: span 2; }
.kt-stufe li a b { font: 700 1.02rem/1.3 var(--serif); }
.kt-stufe li a .d { font: 400 0.78rem/1.3 var(--sans); color: var(--muted); }
.kt-stufe li a:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--marker); }

/* ---------- Workshop-Seite ---------- */
.kt-ws { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 960px) { .kt-ws { grid-template-columns: minmax(0, 1fr); } }
.kt-ws h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
.kt-glance { border: 2px solid var(--ink); padding: 16px 18px 6px; background: var(--bg); box-shadow: 6px 6px 0 var(--marker); }
.kt-glance dl { margin: 6px 0 0; }
.kt-glance dl div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 10px; border-top: 1px solid var(--line); padding: 8px 0; }
.kt-glance dt { font: 700 0.64rem/1.7 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.kt-glance dd { margin: 0; font: 400 0.95rem/1.4 var(--sans); color: var(--ink-2); }
.kt-ws-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 960px) { .kt-ws-body { grid-template-columns: minmax(0, 1fr); } }
.kt-ws-body h2 { margin-top: 4px; }
.kt-ws-side .eyebrow { margin-top: 22px; }
.kt-ws-side .eyebrow:first-child { margin-top: 0; }
.kt-links { list-style: none; padding: 0; margin: 8px 0 0; }
.kt-links a { display: block; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.kt-links a b { display: block; font: 700 1.02rem/1.3 var(--serif); }
.kt-links a span { font: 400 0.8rem/1.3 var(--sans); color: var(--muted); }
.kt-links a:hover b { text-decoration: underline; }
.kt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.kt-tags span { font: 600 0.78rem/1 var(--sans); border: 1px solid var(--rule); padding: 6px 8px; }
.kt-list-s li { font-size: 0.95rem; padding: 5px 0; }
.kt-hl { background: var(--marker-soft); padding: 0 0.1em; }
.kt-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 3px double var(--rule); border-bottom: 1px solid var(--rule); padding: 14px 0; margin-bottom: 14px; }
.kt-prevnext a { color: var(--ink); text-decoration: none; }
.kt-prevnext a.nx { text-align: right; }
.kt-prevnext span { display: block; font: 800 0.7rem/1.4 var(--sans); letter-spacing: 0.12em; }
.kt-prevnext b { font: 700 1.1rem/1.3 var(--serif); }
.kt-prevnext a:hover b { text-decoration: underline; }

/* ---------- Reifegrad-Check: empfohlene Lernpfade ---------- */
.kt-reco { list-style: none; padding: 0; margin: 10px 0 0; }
.kt-reco a { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.kt-reco span { font: 800 0.66rem/1.8 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; grid-row: span 2; }
.kt-reco b { font: 700 1.1rem/1.3 var(--serif); }
.kt-reco small { font: 400 0.82rem/1.3 var(--sans); color: var(--muted); grid-column: 2; }
.kt-reco li:first-child a { background: var(--marker-soft); padding-left: 8px; }
.kt-plan td a { font: 700 0.95rem/1.35 var(--serif); color: var(--ink); }

/* ---------- Glossar ---------- */
.kt-glossar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); margin: 24px 0 0; }
@media (max-width: 800px) { .kt-glossar { grid-template-columns: minmax(0, 1fr); } }
.kt-glossar div { border-top: 2px solid var(--rule); padding: 12px 0 18px; scroll-margin-top: 90px; }
.kt-glossar dt { font: 700 1.25rem/1.25 var(--serif); margin-bottom: 4px; }
.kt-glossar dd { margin: 0; font: 400 1.02rem/1.55 var(--serif); color: var(--ink-2); }
.kt-glossar div:target { background: var(--marker-soft); }
[data-design="magazin"] .flow.flow-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { [data-design="magazin"] .flow.flow-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { [data-design="magazin"] .flow.flow-4 { grid-template-columns: minmax(0, 1fr); } }
.card-num { text-transform: uppercase; }
.kt-gap-s { margin-top: 28px; }
.header-tools .np-act, .nav .btn { white-space: nowrap; }

/* ---------- AI Act ---------- */
.zf-aiact { font: 400 0.95rem/1.45 var(--sans); }
.zf-aiact b { font: 800 0.72rem/1 var(--sans); letter-spacing: 0.06em; border: 1.5px solid var(--ink); padding: 3px 5px; margin-right: 2px; display: inline-block; }
.kt-aiact { border: 2px solid var(--ink); padding: 12px 14px 14px; margin: 0 0 22px; background: var(--marker-soft); }
.kt-aiact p { margin: 6px 0; font-size: 0.98rem; }
.kt-art { display: flex; flex-wrap: wrap; gap: 6px; }
.kt-art span { font: 800 0.72rem/1 var(--sans); letter-spacing: 0.06em; border: 1.5px solid var(--ink); padding: 5px 7px; background: var(--bg); }
.kt-aiact a { font: 700 0.85rem/1.3 var(--sans); color: var(--ink); }
.kt-zeit { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 2.4vw, 28px); }
@media (max-width: 1000px) { .kt-zeit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kt-zeit { grid-template-columns: minmax(0, 1fr); } }
.kt-zeit li { border-top: 3px solid var(--rule); padding: 10px 0 22px; position: relative; }
.kt-zeit li.now { border-top-color: var(--ink); }
.kt-zeit li.next { border-top-style: dashed; }
.kt-zeit li.now::before { content: "gilt"; position: absolute; top: -12px; right: 0; font: 800 0.6rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; background: var(--marker); color: #111; padding: 4px 6px; }
.kt-zeit li.next::before { content: "kommt"; position: absolute; top: -12px; right: 0; font: 800 0.6rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; background: var(--bg); border: 1px dashed var(--ink); padding: 3px 6px; }
.kt-zeit-d { display: block; font: 800 0.72rem/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.kt-zeit b { display: block; font: 700 1.2rem/1.25 var(--serif); margin: 4px 0; }
.kt-zeit p { margin: 0; font-size: 0.95rem; color: var(--ink-2); }
.kt-zeit mark.fs { font-size: 0.78rem; }
.kt-map { width: 100%; border-collapse: collapse; font-family: var(--sans); }
.kt-map th, .kt-map td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.kt-map thead th { font: 700 0.66rem/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 2px solid var(--rule); }
.kt-map tbody th { font: 800 0.95rem/1.3 var(--sans); white-space: nowrap; }
.kt-map td b { display: block; font: 700 1.05rem/1.3 var(--serif); }
.kt-map td span { font: 400 0.92rem/1.45 var(--sans); color: var(--ink-2); }
.kt-map td a { display: inline-block; font: 800 0.72rem/1 var(--sans); letter-spacing: 0.06em; border: 1.5px solid var(--ink); padding: 5px 7px; margin: 0 6px 6px 0; color: var(--ink); text-decoration: none; background: var(--marker-soft); }
.kt-map td a:hover { background: var(--marker); color: #111; }
.kt-risk .card { border-top-width: 6px; }
.kt-risk .r1 { border-top-color: #111; } .kt-risk .r2 { border-top-color: var(--ink-2); } .kt-risk .r3 { border-top-color: var(--marker); } .kt-risk .r4 { border-top-color: var(--line); }