/* k6.css — Paket K6 der Denkwerkstatt (06.11.2026): Gängelwagen, Vernunftgebrauch, Friedenskongress, Hoffnungs-Waage.
   Feine Messing-Feinmechanik auf Papier: Linien statt Flächen, Gold = Kant, Blau = du, Grau = Gegenstimme,
   Siegelrot = Widerspruch/Krieg (Tokens aus werkstatt-kern.css). Bewegung 150–350 ms, bei reduzierter Bewegung kurz überblendet. */
.k6 { --k6-messing: var(--stimme-kant, #835f0e); --k6-du: var(--stimme-du, #1e3a5f); --k6-rot: var(--widerspruch, #a63429);
  --k6-grau: var(--stimme-gegen, #555c6b); --k6-ease: cubic-bezier(.22, .8, .28, 1); font-variant-numeric: tabular-nums; }
.k6__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .7rem; margin-bottom: .6rem; }
.k6__marke { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 650; color: var(--k6-messing); }
.k6__modell { font-size: .74rem; letter-spacing: .04em; font-weight: 650; color: var(--k6-rot); border: 1px solid currentColor; border-radius: 99px; padding: .08rem .55rem; }
.k6__titel { flex: 1 0 100%; margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.55rem); }
.k6__frage { font-weight: 620; margin: .2rem 0 .6rem; }
.k6__anl { color: var(--ink-2, #4c5568); margin: .9rem 0 .6rem; }
.k6__klein { font-size: .86rem; color: var(--ink-2, #4c5568); }
.k6__her { font-size: .8rem; color: var(--ink-2, #4c5568); margin: .35rem 0 0; }
.k6__notiz { font-size: .88rem; color: var(--k6-du); margin: .5rem 0 0; }
.k6__status { font-size: .88rem; color: var(--ink-2, #4c5568); margin: .6rem 0; }
.k6__ergebnis:empty { display: none; }
.k6__ergebnis { font-weight: 600; border-left: 3px solid var(--k6-messing); padding: .5rem .8rem; background: var(--stimme-kant-soft, transparent); border-radius: 8px; }
.k6__ohnejs { display: none; }
html:not(.js) .k6__ohnejs { display: block; font-size: .88rem; color: var(--ink-2, #4c5568); font-style: italic; }
html:not(.js) .k6-wahl, html:not(.js) .k6-band__wahl, html:not(.js) .k6-karte__wahl, html:not(.js) .k6-aufdecken,
html:not(.js) .k6-fr__knoepfe, html:not(.js) [data-k6-zaehler], html:not(.js) .k6-baustein__zustand { display: none; }

/* Knöpfe: ruhig, ≥ 44 px, sichtbarer Fokus */
.k6-wahl { display: flex; flex-wrap: wrap; gap: .5rem; }
.k6-wahl--spalte { flex-direction: column; align-items: stretch; }
.k6-knopf { font: inherit; font-size: .95rem; min-height: 44px; padding: .55rem 1rem; border-radius: 10px; cursor: pointer; text-align: left;
  color: var(--ink, #1d2432); background: var(--bg, #f7f4ec); border: 1px solid var(--line, #ddd5c2);
  transition: border-color .2s, background-color .2s, color .2s, transform .15s var(--k6-ease), box-shadow .2s; }
.k6-knopf:hover:not(:disabled) { border-color: var(--k6-messing); }
.k6-knopf:focus-visible { outline: 2px solid var(--accent, #a97d1e); outline-offset: 2px; }
.k6-knopf:active:not(:disabled) { transform: scale(.97); }
.k6-knopf:disabled { opacity: .55; cursor: default; }
.k6-knopf[aria-pressed="true"] { border-color: var(--k6-du); background: var(--stimme-du-soft, rgba(30,58,95,.10)); color: var(--k6-du); font-weight: 620; box-shadow: inset 0 0 0 1px var(--k6-du); }
.k6-knopf--gold { background: var(--stimme-kant-soft, rgba(169,125,30,.13)); border-color: var(--k6-messing); font-weight: 620; }
.k6-knopf--klein { font-size: .88rem; padding: .45rem .8rem; }
.k6-knopf.is-richtig { border-color: var(--k6-messing); background: var(--stimme-kant-soft, rgba(169,125,30,.13)); }
.k6-knopf.is-falsch { border-color: var(--k6-rot); background: var(--widerspruch-soft, rgba(166,52,41,.10)); }
.k6-aufdecken { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0 .4rem; }
.k6-aufdecken [hidden] { display: none; }

/* Auflösung: mit JS zuerst verborgen, klappt sanft auf (Höhe über grid-template-rows, kein Springen anderer Teile) */
html.js .k6-aufl { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows .35s var(--k6-ease), opacity .3s, visibility 0s .35s; }
html.js .k6-aufl > .k6-aufl__innen { min-height: 0; overflow: hidden; }
html.js .k6-aufl.is-offen { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .35s var(--k6-ease), opacity .3s; }
html.js .k6-aufl.is-offen > .k6-aufl__innen { overflow: visible; }
.k6-aufl { margin-top: .6rem; }
.k6-aufl .stimmen { margin-top: .4rem; }
.k6 .stimmen { grid-template-columns: 1fr; }
.k6-aufl .stimme p { margin: 0; }
.k6-aufl .stimme p + p { margin-top: .4rem; }

.k6-check { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--line, #ddd5c2); }
.k6-check__antwort:empty { display: none; }
.k6-check__antwort { margin: .7rem 0 0; padding: .5rem .8rem; border-radius: 8px; border-left: 3px solid; }
.k6-check__antwort.is-richtig { border-color: var(--k6-messing); background: var(--stimme-kant-soft, rgba(169,125,30,.13)); }
.k6-check__antwort.is-falsch { border-color: var(--k6-rot); background: var(--widerspruch-soft, rgba(166,52,41,.10)); }

/* ───────── Gängelwagen ───────── */
.k6-gw__buehne { margin: 1rem 0 .2rem; }
.k6-gw__svg { display: block; width: 100%; height: auto; max-height: 300px; overflow: visible; }
.k6-gw__svg text { font-family: var(--font-text); font-size: 14px; fill: var(--ink-2, #4c5568); }
.k6-gw__gruppe { font-size: 13px !important; font-weight: 600; }
.k6 svg text { text-rendering: geometricPrecision; letter-spacing: 0; }
.k6-gw__trenner { stroke: var(--line, #ddd5c2); stroke-dasharray: 3 4; }
.k6-gw__boden { fill: none; stroke: var(--line, #ddd5c2); stroke-width: 2; }
.k6-gw__vormund circle { fill: var(--box, #fffdf7); stroke-width: 1.6; }
.k6-gw__vormund--kant circle { stroke: var(--k6-messing); }
.k6-gw__vormund--heute circle { stroke: var(--ink-2, #4c5568); stroke-dasharray: 4 3; }
.k6-gw__ico { fill: none; stroke: var(--ink, #1d2432); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.k6-gw__band { fill: none; stroke: var(--ink-2, #4c5568); stroke-width: 1.4; transition: stroke .25s, opacity .3s, stroke-width .2s; }
.k6-gw__band.is-fest { stroke: var(--ink, #1d2432); stroke-width: 2; }
.k6-gw__band.is-los { opacity: .3; stroke-dasharray: 2 3; }
.k6-gw__wagen { fill: none; stroke: var(--k6-messing); stroke-width: 2; stroke-linecap: round; }
.k6-gw__wagen circle { fill: var(--box, #fffdf7); }
.k6-gw__figur { fill: none; stroke: var(--k6-du); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.k6-gw__figur circle { fill: var(--stimme-du-soft, rgba(30,58,95,.10)); }
.k6-gw__wackel { transform-box: fill-box; transform-origin: 50% 100%; }
.k6-gw__wackel.is-stolpert { animation: k6-stolpern .7s var(--k6-ease); }
.k6-gw__wackel.is-springt { animation: k6-springen .55s var(--k6-ease); }
.k6-gw__wackel.is-schreitet { animation: k6-schreiten .32s var(--k6-ease); }
@keyframes k6-stolpern { 0% { rotate: 0deg; } 25% { rotate: 14deg; } 45% { rotate: -9deg; } 65% { rotate: 5deg; } 100% { rotate: 0deg; } }
@keyframes k6-springen { 0%, 100% { translate: 0 0; } 45% { translate: 0 -22px; rotate: 6deg; } 70% { translate: 0 2px; rotate: -4deg; } }
@keyframes k6-schreiten { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.k6-gw__bild { min-height: 3em; margin: .3rem 0 0; font-size: .92rem; color: var(--ink-2, #4c5568); font-style: italic; }
.k6-gw__baender { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .5rem; }
@media (min-width: 900px) { .k6-gw__baender { grid-template-columns: 1fr 1fr; } }
.k6-band { border: 1px solid var(--line, #ddd5c2); border-radius: 12px; padding: .7rem .8rem; background: var(--bg, #f7f4ec); transition: border-color .25s, background-color .25s; }
.k6-band.is-los { border-color: var(--k6-du); }
.k6-band.is-fest { border-color: var(--ink-2, #4c5568); }
.k6-band__text { margin-bottom: .5rem; }
.k6-band__satz { color: var(--ink, #1d2432); }
.k6-band__her { display: block; font-size: .78rem; color: var(--ink-2, #4c5568); margin-top: .15rem; }
.k6-band:nth-child(-n+3) .k6-band__her { color: var(--k6-messing); }
.k6-band__wahl { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ───────── Vernunftgebrauch ───────── */
.k6-kantwort .stimme { margin-top: .2rem; }
.k6-vg__tisch { display: grid; gap: .8rem; margin-top: .6rem; }
.k6-vg__faecher { display: grid; gap: .8rem; }
@media (min-width: 760px) { .k6-vg__faecher { grid-template-columns: 1fr 1fr; } }
.k6-vg__kopf { font-family: var(--font-text); font-size: .9rem; font-weight: 650; margin: 0; }
.k6-vg__fach { border: 1px dashed var(--line, #ddd5c2); border-radius: 12px; padding: .7rem; min-height: 120px; }
.k6-vg__fach .k6__klein { margin: .1rem 0 .5rem; }
.k6-vg__fach--privat { border-color: color-mix(in srgb, var(--ink-2, #4c5568) 55%, transparent); }
.k6-vg__fach--oeffentlich { border-color: color-mix(in srgb, var(--k6-messing) 70%, transparent); }
.k6-vg__liste { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .5rem; }
html:not(.js) .k6-vg__faecher { display: none; }
.k6-karte { border: 1px solid var(--line, #ddd5c2); border-radius: 12px; padding: .7rem .8rem; background: var(--bg, #f7f4ec); position: relative; }
.k6-karte__text { margin: 0 0 .5rem; }
.k6-karte__wahl { display: flex; gap: .4rem; flex-wrap: wrap; }
.k6-karte__urteil { margin: .45rem 0 0; font-weight: 620; font-size: .9rem; }
.k6-karte__urteil:empty { display: none; }
.k6-karte__erkl { margin: .35rem 0 0; font-size: .9rem; color: var(--ink-2, #4c5568); }
html.js .k6-karte:not(.is-beantwortet) .k6-karte__erkl { display: none; }
html.js .k6-karte:not(.is-richtig) .k6-karte__loesung { display: none; }
.k6-karte__loesung { font-weight: 620; color: var(--ink, #1d2432); }
.k6-karte.is-richtig { border-color: var(--k6-messing); }
.k6-karte.is-richtig .k6-karte__wahl { display: none; }
.k6-karte.is-richtig .k6-karte__urteil { color: var(--k6-messing); }
.k6-karte.is-falsch { border-color: var(--k6-rot); }
.k6-karte.is-falsch .k6-karte__urteil { color: var(--k6-rot); }
.k6-karte.is-ruckt { animation: k6-ruck .3s var(--k6-ease); }
@keyframes k6-ruck { 0%, 100% { translate: 0 0; } 30% { translate: -5px 0; } 65% { translate: 4px 0; } }
html.js .k6-vg__stapel.is-leer { display: none; }

/* ───────── Friedenskongress ───────── */
.k6-fr__tisch { display: block; width: 100%; max-width: 440px; height: auto; margin: .4rem auto .2rem; }
.k6-fr__tisch text { font-family: var(--font-text); font-size: 18px; fill: var(--ink-2, #4c5568); }
.k6-fr__pergament { fill: var(--bg, #f7f4ec); stroke: var(--k6-messing); stroke-width: 1.4; }
.k6-fr__zeile { stroke: var(--k6-du); stroke-width: 2.2; stroke-linecap: round; opacity: 0; stroke-dasharray: 130; stroke-dashoffset: 130;
  transition: opacity .2s, stroke-dashoffset .35s var(--k6-ease); }
.k6-fr__zeile.is-sichtbar { opacity: .75; stroke-dashoffset: 0; }
.k6-fr__macht circle { fill: var(--box, #fffdf7); stroke: var(--k6-messing); stroke-width: 1.4; }
.k6-fr__macht path { fill: none; stroke: var(--ink-2, #4c5568); stroke-width: 1.5; stroke-linejoin: round; }
.k6-fr__stempel { opacity: 0; transform-box: fill-box; transform-origin: center; scale: 1.6; transition: opacity .25s, scale .3s var(--k6-ease); }
.k6-fr__stempel circle { fill: var(--stimme-kant-soft, rgba(169,125,30,.13)); stroke: var(--k6-messing); stroke-width: 2; }
.k6-fr__stempel path { fill: none; stroke: var(--k6-messing); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.k6-fr__stempel.is-gesetzt { opacity: 1; scale: 1; }
.k6-fr__bausteine { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .55rem; }
@media (min-width: 640px) { .k6-fr__bausteine { grid-template-columns: 1fr 1fr; } }
.k6-baustein { display: flex; flex-direction: column; border-radius: 12px; }
.k6-baustein__knopf { flex: 1; display: grid; grid-template-columns: auto 1fr; align-content: start; gap: .1rem .6rem; text-align: left; font: inherit; color: var(--ink, #1d2432);
  background: var(--bg, #f7f4ec); border: 1px solid var(--line, #ddd5c2); border-radius: 12px; padding: .7rem .8rem; cursor: pointer; min-height: 44px;
  transition: border-color .2s, background-color .2s, transform .15s var(--k6-ease); }
.k6-baustein__knopf:hover:not(:disabled) { border-color: var(--k6-messing); }
.k6-baustein__knopf:active:not(:disabled) { transform: scale(.97); }
.k6-baustein__knopf:focus-visible { outline: 2px solid var(--accent, #a97d1e); outline-offset: 2px; }
.k6-baustein__knopf:disabled { cursor: default; }
.k6-baustein__haken { grid-row: 1; width: 22px; height: 22px; margin-top: .1rem; border: 1.6px solid var(--ink-2, #4c5568); border-radius: 6px; position: relative; transition: background-color .2s, border-color .2s; }
.k6-baustein__haken::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--box, #fffdf7); border-width: 0 2.4px 2.4px 0; rotate: 45deg; scale: 0; transition: scale .2s var(--k6-ease); }
.k6-baustein__titel { font-weight: 650; }
.k6-baustein__text, .k6-baustein__zustand { grid-column: 2; }
.k6-baustein__text { font-size: .9rem; color: var(--ink-2, #4c5568); }
.k6-baustein__zustand { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2, #4c5568); margin-top: .2rem; }
.k6-baustein.is-drin .k6-baustein__knopf { border-color: var(--k6-du); background: var(--stimme-du-soft, rgba(30,58,95,.10)); }
.k6-baustein.is-drin .k6-baustein__haken { background: var(--k6-du); border-color: var(--k6-du); }
.k6-baustein.is-drin .k6-baustein__haken::after { scale: 1; }
.k6-baustein.is-drin .k6-baustein__zustand { color: var(--k6-du); font-weight: 650; }
.k6-baustein__pruefung { font-size: .88rem; padding: .5rem .8rem 0; }
html.js .k6-baustein:not(.is-geprueft) .k6-baustein__pruefung { display: none; }
.k6-baustein.is-geprueft .k6-baustein__pruefung { animation: k6-ein .3s var(--k6-ease); }
.k6-baustein__urteil { font-weight: 650; margin: 0; }
.k6-baustein.is-gut .k6-baustein__urteil { color: var(--k6-messing); }
.k6-baustein.is-schlecht .k6-baustein__urteil { color: var(--k6-rot); }
.k6-baustein.is-schlecht .k6-baustein__knopf { border-color: var(--k6-rot); }
.k6-baustein__zitat { margin: .3rem 0 0; font-family: var(--font-display); }
.k6-fr__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .3rem; align-items: center; }
.k6-fr__knoepfe [hidden] { display: none; }
.k6-fr__befund { border-radius: 12px; }
.k6-fr__befundtext { font-weight: 620; padding: .6rem .8rem; border-left: 3px solid var(--k6-rot); background: var(--widerspruch-soft, rgba(166,52,41,.10)); border-radius: 8px; margin: .4rem 0; }
.k6-fr__befund.is-ok .k6-fr__befundtext { border-color: var(--k6-messing); background: var(--stimme-kant-soft, rgba(169,125,30,.13)); }
.k6-fr__zeit { margin-top: 1rem; }
.k6-fr__charttitel { font-weight: 620; margin: 0 0 .3rem; }
.k6-fr__chart { display: block; width: 100%; height: auto; overflow: visible; }
.k6-fr__chart text { font-family: var(--font-text); }
.k6-fr__achse, .k6-fr__tick { fill: none; stroke: var(--ink-2, #4c5568); stroke-width: 1; }
.k6-fr__achsentext { font-size: 12px; fill: var(--ink-2, #4c5568); }
.k6-fr__kriegsband { fill: var(--widerspruch-soft, rgba(166,52,41,.10)); }
.k6-fr__kriegstext { font-size: 12px; fill: var(--k6-rot); font-weight: 650; }
.k6-fr__linie { fill: none; stroke: var(--k6-du); stroke-width: 2.4; stroke-linejoin: round; }
.k6-fr__marke circle { stroke-width: 1.6; fill: var(--box, #fffdf7); }
.k6-fr__marke text { font-size: 11px; font-weight: 700; fill: var(--ink, #1d2432); }
.k6-fr__marke--krieg circle { stroke: var(--k6-rot); }
.k6-fr__marke--unruhe circle { stroke: var(--k6-grau); }
.k6-fr__marke--gut circle { stroke: var(--k6-messing); }
.k6-fr__chart.is-laeuft .k6-fr__marke { animation: k6-ein .3s var(--k6-ease) both; animation-delay: var(--k6-verz, 0s); }
.k6-fr__summe { font-weight: 650; margin: .4rem 0; }
.k6-fr__ereignisse { padding-left: 0; list-style: none; display: grid; gap: .45rem; margin: .4rem 0 0; }
.k6-fr__ereignis { border-left: 3px solid var(--line, #ddd5c2); padding: .3rem .7rem; font-size: .92rem; }
.k6-fr__ereignis--krieg { border-color: var(--k6-rot); }
.k6-fr__ereignis--gut { border-color: var(--k6-messing); }
.k6-fr__ereignis--unruhe { border-color: var(--k6-grau); }
.k6-fr__ereignisse.is-laeuft .k6-fr__ereignis { animation: k6-ein .3s var(--k6-ease) both; animation-delay: var(--k6-verz, 0s); }
.k6-fr__kant { display: block; font-size: .84rem; color: var(--k6-messing); margin-top: .15rem; }
.k6__modellhinweis { font-style: italic; }
@keyframes k6-ein { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }

/* ───────── Hoffnungs-Waage ───────── */
.k6-ho__buehne { display: grid; gap: .4rem; justify-items: center; margin: .4rem 0 .8rem; }
.k6-ho__svg { display: block; width: 100%; max-width: 360px; height: auto; }
.k6-ho__svg text { font-family: var(--font-text); font-size: 14px; fill: var(--ink-2, #4c5568); }
.k6-ho__fuss, .k6-ho__stange, .k6-ho__schale path { fill: none; stroke: var(--k6-messing); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.k6-ho__teller { fill: var(--stimme-kant-soft, rgba(169,125,30,.13)) !important; }
.k6-ho__achse { fill: var(--box, #fffdf7); stroke: var(--k6-messing); stroke-width: 2; }
.k6-ho__balken { transform-box: view-box; transform-origin: 180px 60px; rotate: 9deg; transition: rotate .9s cubic-bezier(.3, 1.4, .5, 1); }
.k6-ho__schale { transform-box: fill-box; transform-origin: 50% 0; rotate: -9deg; transition: rotate .9s cubic-bezier(.3, 1.4, .5, 1); }
.k6-ho.is-im-gleichgewicht .k6-ho__balken, .k6-ho.is-im-gleichgewicht .k6-ho__schale { rotate: 0deg; }
.k6-ho__bild { font-size: .92rem; color: var(--ink-2, #4c5568); font-style: italic; text-align: center; max-width: 52ch; margin: 0; min-height: 3em; }

/* „Für Neugierige“ (Prosa, aufklappbar) */
.k6-neugierig { border: 1px solid var(--line, #ddd5c2); border-radius: 12px; background: var(--box, #fffdf7); margin: 1.2rem 0; }
.k6-neugierig summary { cursor: pointer; padding: .8rem 1rem; font-weight: 620; min-height: 44px; display: flex; align-items: center; }
.k6-neugierig summary:focus-visible { outline: 2px solid var(--accent, #a97d1e); outline-offset: 2px; }
.k6-neugierig > p { padding: 0 1rem 1rem; margin: 0; color: var(--ink-2, #4c5568); }

@media (prefers-reduced-motion: reduce) {
  .k6 *, .k6 *::before, .k6 *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .15s !important; transition-delay: 0s !important; }
  .k6-fr__linie { transition: none !important; }
}