/* Prozesswerkstatt — Gestaltung „Lochwand“
   Arbeitsfläche wie Danielas weiße Lochblechwand, Karten als Papier mit Klebestreifen.
   Mensch orange, Digital hellblau, KI nachtblau: die Farben ihrer Wandkarten. Bedienfarbe Petrol. */

@font-face { font-family: 'Atkinson Next'; src: url('schrift/atkinson-next-latin.woff2') format('woff2'); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson Next'; src: url('schrift/atkinson-next-latin-ext.woff2') format('woff2'); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --wand: #e8edef;
  --wand-loch: #c9d2d7;
  --wand-glas: rgba(232, 237, 239, .93);
  --flaeche: #f4f6f7;
  --papier: #ffffff;
  --ink: #1d2930;
  --ink-2: #44545d;
  --ink-3: #5f6e76;
  --linie: #d8e0e4;
  --linie-2: #b9c6cc;
  --grau-fl: #edf1f3;
  --akzent: #0c6475;
  --akzent-2: #094d5a;
  --akzent-hell: #e0eef1;
  --mensch: #e8743a;
  --mensch-hell: #fde8dc;
  --mensch-ink: #94400f;
  --digital: #8dc0e3;
  --digital-hell: #e3f0f9;
  --digital-ink: #1b5b88;
  --ki: #1c3456;
  --ki-hell: #e2e8f1;
  --ki-licht: #b2d4ee;
  --bruch: #c5680f;
  --bruch-ink: #8f4a07;
  --bruch-hell: #fcefdf;
  --grenze: #b13f2c;
  --moeglich: #2f7d45;
  --weg: #5a6a73;
  --weg-leise: #98a6ae;
  --zettel: #fff3b0;
  --t-orange: #f08a4b; --t-gruen: #94c35b; --t-gelb: #f2c14b; --t-pfirsich: #f4b48a; --t-blau: #86bbdc; --t-rosa: #e9a0b4; --t-oliv: #b8bb6c;
  --schatten-karte: 0 1px 0 rgba(29, 41, 48, .05), 0 2px 7px rgba(29, 41, 48, .09);
  --schatten-hoch: 0 10px 30px rgba(20, 31, 37, .2);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Atkinson Next', 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.4; color: var(--ink); background: var(--flaeche); -webkit-font-smoothing: antialiased; }
body[data-ansicht="werkstatt"] { overflow: hidden; height: 100dvh; overscroll-behavior: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a { color: var(--akzent); }
.ic { width: 22px; height: 22px; flex: none; display: block; }
:focus-visible { outline: 3px solid rgba(12, 100, 117, .45); outline-offset: 2px; }
em { font-style: normal; }
[hidden] { display: none !important; }

/* Klebestreifen-Farben */
.farbe-orange { --t: var(--t-orange); } .farbe-gruen { --t: var(--t-gruen); } .farbe-gelb { --t: var(--t-gelb); }
.farbe-pfirsich { --t: var(--t-pfirsich); } .farbe-blau { --t: var(--t-blau); } .farbe-rosa { --t: var(--t-rosa); } .farbe-oliv { --t: var(--t-oliv); }
.klebe { background: var(--t, var(--t-gelb)); opacity: .9; clip-path: polygon(0 12%, 5% 0, 30% 8%, 62% 0, 95% 7%, 100% 0, 100% 88%, 96% 100%, 64% 92%, 34% 100%, 5% 93%, 0 100%); }

/* ---------- Knöpfe, Felder ---------- */
.knopf { min-height: 48px; padding: 0 18px; border-radius: 10px; border: 0; background: var(--akzent); color: #fff; font-weight: 700; font-size: 15.5px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: background .15s, box-shadow .15s; }
.knopf:hover { background: var(--akzent-2); }
.knopf.zweit { background: var(--papier); color: var(--ink); border: 1.5px solid var(--linie-2); }
.knopf.zweit:hover { border-color: var(--akzent); background: var(--papier); }
.knopf.gefahr { background: var(--papier); color: var(--grenze); border: 1.5px solid #e6c5be; }
.knopf.gefahr:hover { border-color: var(--grenze); }
.knopf.gross { min-height: 56px; font-size: 17px; padding: 0 22px; }
.knopf.klein { min-height: 42px; font-size: 14.5px; padding: 0 13px; }
.knopf.breit { width: 100%; }
.knopf:disabled { opacity: .4; cursor: default; }
.ikon-knopf { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px; border: 0; background: transparent; color: var(--ink-2); flex: none; padding: 0; text-decoration: none; position: relative; }
.ikon-knopf:hover { background: var(--grau-fl); color: var(--ink); }
.ikon-knopf:disabled { opacity: .3; cursor: default; background: transparent; }
.ikon-knopf.leise { width: 42px; height: 42px; color: var(--ink-3); }
.puls { position: relative; }
.puls::after { content: ''; position: absolute; top: 7px; right: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--mensch); animation: pulsring 1.6s infinite; }
@keyframes pulsring { 0% { box-shadow: 0 0 0 0 rgba(232, 116, 58, .55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(232, 116, 58, 0); } }

input, textarea, select { font-size: 16px; background: #fbfcfc; border: 1.5px solid var(--linie-2); border-radius: 9px; padding: 10px 12px; width: 100%; resize: none; line-height: 1.4; }
input:focus, textarea:focus, select:focus { outline: 3px solid rgba(12, 100, 117, .25); border-color: var(--akzent); background: #fff; }
textarea { min-height: 46px; overflow: hidden; }
input::placeholder, textarea::placeholder { color: #8b989f; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset:disabled { opacity: .6; }

/* ---------- Startseite ---------- */
.start { max-width: 1180px; margin: 0 auto; padding: 0 24px 40px; }
.start-kopf { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 8px; gap: 12px; }
.marke { display: flex; gap: 11px; align-items: center; font-weight: 800; font-size: 19px; letter-spacing: -.005em; }
.marke-zeichen { width: 40px; height: 40px; border-radius: 9px; background: var(--akzent); color: #fff; display: grid; place-items: center; }
.start-nav { display: flex; gap: 6px; align-items: center; }
.start-nav a { color: var(--ink-2); font-weight: 700; text-decoration: none; padding: 12px 14px; border-radius: 10px; }
.start-nav a:hover { background: var(--grau-fl); }
.start-held { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; padding: 40px 0 36px; }
.start-held h1 { font-size: clamp(31px, 4.1vw, 48px); line-height: 1.07; margin: 0 0 18px; letter-spacing: -.012em; font-weight: 800; max-width: 17ch; }
.start-held p { font-size: 18.5px; line-height: 1.55; color: var(--ink-2); max-width: 56ch; margin: 0; }
.held-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.vierschritt { list-style: none; margin: 0; padding: 30px 22px 22px; border-radius: 16px; background-color: var(--wand); background-image: radial-gradient(circle, var(--wand-loch) 0 1.7px, transparent 2.1px); background-size: 22px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; counter-reset: s; }
.vierschritt li { position: relative; background: var(--papier); border-radius: 6px; padding: 18px 16px 16px; box-shadow: var(--schatten-karte); counter-increment: s; display: flex; flex-direction: column; gap: 6px; }
.vierschritt li::before { content: ''; position: absolute; top: -8px; left: 50%; width: 66px; height: 16px; translate: -50% 0; background: var(--t); opacity: .9; clip-path: polygon(0 12%, 5% 0, 30% 8%, 62% 0, 95% 7%, 100% 0, 100% 88%, 96% 100%, 64% 92%, 34% 100%, 5% 93%, 0 100%); }
.vierschritt li:nth-child(1) { --t: var(--t-orange); rotate: -.6deg; } .vierschritt li:nth-child(2) { --t: var(--t-gruen); rotate: .5deg; }
.vierschritt li:nth-child(3) { --t: var(--t-gelb); rotate: .4deg; } .vierschritt li:nth-child(4) { --t: var(--t-blau); rotate: -.4deg; }
.vierschritt b { font-size: 17.5px; display: flex; gap: 8px; align-items: center; }
.vierschritt b::before { content: counter(s); width: 24px; height: 24px; border-radius: 50%; background: var(--akzent); color: #fff; font-size: 13px; display: grid; place-items: center; }
.vierschritt span { font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }
.start-teil { padding: 18px 0; }
.start-teil h2 { font-size: 22px; margin: 0 0 14px; letter-spacing: -.005em; }
.teil-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.teil-kopf h2 { margin: 0; }
.datei-knopf { cursor: pointer; }
.kachelreihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.kachel { display: flex; gap: 16px; align-items: center; text-align: left; background: var(--papier); border: 1.5px solid var(--linie); border-radius: 12px; padding: 14px; box-shadow: var(--schatten-karte); transition: border-color .15s, transform .15s; }
.kachel:hover { border-color: var(--akzent); }
.kachel-bild { width: 132px; height: 80px; flex: none; background-color: var(--wand); background-image: radial-gradient(circle, var(--wand-loch) 0 1px, transparent 1.4px); background-size: 9px 9px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; }
.kachel-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kachel-text b { font-size: 17px; }
.kachel-text small { color: var(--ink-2); font-size: 14.5px; line-height: 1.38; }
.kachel-text .datum { color: var(--ink-3); font-size: 13px; }
.kachel.eigene { padding: 0 6px 0 0; }
.kachel-haupt { flex: 1; padding: 16px; background: none; border: 0; text-align: left; min-width: 0; }
.mini { width: 100%; height: 100%; }
.mw-karte { fill: #fff; stroke: rgba(29, 41, 48, .12); }
.mw-klebe { fill: var(--t); }
.mw-weg { stroke: var(--weg); stroke-width: 1.6; }
.leer-hinweis { color: var(--ink-2); font-size: 16px; max-width: 64ch; background: var(--papier); border: 1.5px dashed var(--linie-2); border-radius: 12px; padding: 18px; margin: 0; }
.start-fuss { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--linie); font-size: 14px; color: var(--ink-3); }
.start-fuss p { margin: 0 0 6px; }
.start-fuss a { color: var(--ink-2); }

/* ---------- Werkstatt ---------- */
.werkstatt { display: grid; grid-template-rows: auto 1fr; height: 100dvh; }
.leiste { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--papier); border-bottom: 1px solid var(--linie); min-height: 64px; position: relative; z-index: 30; }
.leiste-titel { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 340px; }
.titel-feld { border: 1.5px solid transparent; background: transparent; font-weight: 800; font-size: 18px; padding: 8px 10px; min-width: 0; text-overflow: ellipsis; }
.titel-feld:hover { border-color: var(--linie); }
.titel-feld:focus { border-color: var(--akzent); background: #fff; }
.fassung-chip { font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 7px; background: var(--grau-fl); color: var(--ink-2); white-space: nowrap; cursor: pointer; max-width: 230px; overflow: hidden; text-overflow: ellipsis; flex: none; }
.fassung-chip.szenario { background: #fff0d4; color: #774700; }
.schritte { display: flex; margin: 0 auto; background: var(--grau-fl); border-radius: 12px; padding: 4px; gap: 2px; }
.schritte button { min-height: 46px; padding: 0 15px; border: 0; background: transparent; border-radius: 9px; font-weight: 700; font-size: 15px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.schritte button i { font-style: normal; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; background: #d9e1e5; font-size: 12.5px; }
.schritte button:hover { color: var(--ink); }
.schritte button.an { background: var(--papier); color: var(--ink); box-shadow: 0 1px 3px rgba(29, 41, 48, .14); }
.schritte button.an i { background: var(--akzent); color: #fff; }
.leiste-rechts { display: flex; gap: 2px; }

.arbeitsflaeche { display: grid; grid-template-columns: minmax(0, 1fr) 404px; min-height: 0; }
.wand-rahmen { position: relative; overflow: hidden; min-width: 0; }
.wand-host { position: absolute; inset: 0; }
.feld-seite { border-left: 1px solid var(--linie); background: var(--papier); overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

/* ---------- Wand ---------- */
.wand { position: absolute; inset: 0; overflow: hidden; background: var(--wand); }
.wand-flaeche { position: absolute; inset: 0; touch-action: none; background-image: radial-gradient(circle, var(--wand-loch) 0 1.7px, transparent 2.1px); outline: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.wand-flaeche:active { cursor: grabbing; }
.wand-flaeche.verbindet { cursor: crosshair; }
.welt { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.welt-grund, .welt-inhalt, .welt-oben { position: absolute; inset: 0; }
.welt-oben { pointer-events: none; }
.welt-oben > * { pointer-events: auto; }
.wege-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.weg { fill: none; stroke: var(--weg); stroke-width: 2.2; transition: opacity .2s; }
.weg.bruch { stroke: var(--bruch); stroke-dasharray: 8 5; stroke-width: 2.4; }
.weg.art-automatisch { stroke: var(--digital-ink); }
.weg.art-ki { stroke: var(--ki); stroke-width: 2.8; }
.weg.art-warten { stroke: var(--weg-leise); stroke-dasharray: 1.5 6; stroke-linecap: round; stroke-width: 3; }
.weg.art-offen { stroke: var(--weg-leise); }
.weg.ausgewaehlt { stroke: var(--akzent); stroke-width: 3.6; stroke-dasharray: none; }
.weg.gedimmt { opacity: .18; }
.weg.hervor { stroke: var(--akzent); stroke-width: 4; animation: wegpuls 1s ease-in-out 3; }
@keyframes wegpuls { 50% { stroke-width: 7; } }
.weg-treffer { fill: none; stroke: transparent; stroke-width: 24; pointer-events: stroke; cursor: pointer; }
.verbinde-temp { fill: none; stroke: var(--akzent); stroke-width: 2.8; stroke-dasharray: 6 6; pointer-events: none; }
.bahn-streifen { position: absolute; background: rgba(255, 255, 255, .26); border-top: 1px solid rgba(29, 41, 48, .06); }
.bahn-streifen.ungerade { background: rgba(255, 255, 255, .06); }
.spalten-linie { position: absolute; width: 0; border-left: 1.5px dashed rgba(29, 41, 48, .13); }

.karte { position: absolute; background: var(--papier); border-radius: 6px; box-shadow: var(--schatten-karte); border: 1px solid rgba(29, 41, 48, .08); padding: 13px 12px 9px; display: flex; flex-direction: column; gap: 5px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: box-shadow .15s, opacity .2s, outline-color .15s; touch-action: none; }
.karte:hover { box-shadow: 0 2px 0 rgba(29, 41, 48, .05), 0 6px 16px rgba(29, 41, 48, .13); }
.karte > .klebe { position: absolute; top: -8px; left: 50%; width: 58px; height: 15px; pointer-events: none; }
.k-kopf { display: flex; align-items: center; gap: 6px; min-height: 32px; }
.k-akteur { width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; flex: none; }
.k-akteur .ic { width: 21px; height: 21px; }
.akteur-mensch .k-akteur, .k-akteur.akteur-mensch { background: var(--mensch); color: #fff; }
.akteur-digital .k-akteur, .k-akteur.akteur-digital { background: var(--digital); color: var(--ki); }
.akteur-ki .k-akteur, .k-akteur.akteur-ki { background: var(--ki); color: var(--ki-licht); }
.k-typ { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 750; color: var(--ki); }
.k-typ .ic { width: 16px; height: 16px; }
.k-formen { display: flex; gap: 1px; color: var(--ink-2); align-items: center; min-width: 0; }
.k-form { display: grid; place-items: center; width: 24px; height: 24px; }
.k-form .ic { width: 20px; height: 20px; }
.k-form-mehr { font-size: 12px; color: var(--ink-3); margin-left: 2px; }
.k-griff { margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink-3); cursor: grab; touch-action: none; opacity: 0; border-radius: 7px; flex: none; }
.k-griff:hover { background: var(--grau-fl); }
.karte:hover .k-griff, .karte.ausgewaehlt .k-griff { opacity: 1; }
.k-titel { font-weight: 700; font-size: 15.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.k-titel .leer { color: var(--ink-3); font-weight: 500; }
.k-grund { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-grund b { color: var(--ki); font-weight: 750; }
.k-grund.fehlt { color: var(--bruch-ink); font-weight: 750; display: flex; gap: 4px; align-items: center; }
.k-grund.fehlt .ic { width: 17px; height: 17px; }
.k-fuss { margin-top: auto; display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; overflow: hidden; font-size: 12.5px; color: var(--ink-2); min-height: 20px; }
.k-ind { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--mensch-ink); white-space: nowrap; }
.k-ind .ic { width: 17px; height: 17px; }
.k-ind.grenze { color: var(--grenze); }
.k-ind.moeglich { color: var(--moeglich); }
.k-ind.abweichung { background: var(--bruch-hell); color: var(--bruch-ink); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.k-anschluss { position: absolute; right: -18px; top: 50%; translate: 0 -50%; width: 34px; height: 34px; border-radius: 50%; background: var(--papier); border: 2px solid var(--akzent); color: var(--akzent); display: grid; place-items: center; padding: 0; cursor: crosshair; box-shadow: 0 1px 4px rgba(29, 41, 48, .18); touch-action: none; z-index: 2; opacity: 0; transition: opacity .15s, scale .15s; }
.k-anschluss::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
.k-anschluss .ic { width: 18px; height: 18px; }
.k-anschluss:hover { scale: 1.12; background: var(--akzent); color: #fff; }
.karte:hover .k-anschluss, .karte.ausgewaehlt .k-anschluss { opacity: 1; }
.karte.entscheidung { border: 1.5px solid #c3cfda; }
.karte.entscheidung::after { content: ''; position: absolute; left: -10px; top: 50%; width: 15px; height: 15px; translate: 0 -50%; rotate: 45deg; background: var(--papier); border: 2px solid var(--ki); border-radius: 2px; }
.karte.ausgewaehlt { outline: 3px solid var(--akzent); outline-offset: 2px; }
.karte.gedimmt { opacity: .3; }
.karte.gedimmt:hover { opacity: .65; }
.karte.hervor, .karte.spielt-hier { outline: 3px solid var(--akzent); outline-offset: 3px; box-shadow: 0 0 0 10px rgba(12, 100, 117, .14), var(--schatten-karte); }
.karte.hervor { animation: kartepuls 1.1s ease-in-out 3; }
@keyframes kartepuls { 50% { box-shadow: 0 0 0 18px rgba(12, 100, 117, .08), var(--schatten-karte); } }
.karte.ziel { outline: 3px dashed var(--akzent); outline-offset: 3px; }
.karte.angehoben { opacity: .3; }
.karte.geist { opacity: .94; box-shadow: var(--schatten-hoch); rotate: 1.4deg; pointer-events: none; z-index: 50; transition: none; }
.karte.getoent.akteur-mensch { background: var(--mensch-hell); }
.karte.getoent.akteur-digital { background: var(--digital-hell); }
.karte.getoent.akteur-ki { background: var(--ki); color: #fff; }
.karte.getoent.akteur-ki .k-titel, .karte.getoent.akteur-ki .k-formen, .karte.getoent.akteur-ki .k-fuss, .karte.getoent.akteur-ki .k-typ { color: #fff; }
.karte.getoent.akteur-ki .k-akteur { background: var(--ki-licht); color: var(--ki); }
.einfuege-marke { position: absolute; width: 6px; border-radius: 3px; background: var(--akzent); display: none; pointer-events: none; z-index: 49; }
.frei { position: absolute; border: 2px dashed rgba(29, 41, 48, .2); border-radius: 8px; background: rgba(255, 255, 255, .34); color: var(--ink-3); display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 15px; opacity: 0; transition: opacity .15s, border-color .15s, color .15s; padding: 0; }
.frei.erste { opacity: .8; }
.wand-flaeche:hover .frei { opacity: .7; }
.frei:hover, .frei:focus-visible { opacity: 1 !important; border-color: var(--akzent); color: var(--akzent); background: rgba(255, 255, 255, .7); }
.wand[data-linse="uebergaenge"] .frei, .wand[data-linse="menschen"] .frei, .wand[data-linse="entscheidungen"] .frei, .wand[data-linse="grenzen"] .frei { display: none; }

.plakette { position: absolute; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 5px; min-height: 34px; min-width: 34px; border-radius: 10px; background: var(--papier); border: 1.5px solid var(--linie-2); color: var(--ink-2); cursor: pointer; box-shadow: 0 1px 3px rgba(29, 41, 48, .12); z-index: 3; transition: opacity .2s; }
.plakette::before { content: ''; position: absolute; inset: -7px; }
.plakette:hover { border-color: var(--akzent); }
.pl-reihe { display: flex; align-items: center; gap: 2px; }
.pl-form { display: grid; place-items: center; width: 22px; height: 22px; color: var(--ink-2); font-weight: 800; }
.pl-form .ic { width: 19px; height: 19px; }
.pl-art { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--grau-fl); color: var(--weg); }
.pl-art .ic { width: 16px; height: 16px; }
.plakette.bruch { border-color: var(--bruch); }
.plakette.bruch .pl-art { background: var(--bruch-hell); color: var(--bruch-ink); }
.plakette.art-ki .pl-art { background: var(--ki); color: var(--ki-licht); }
.plakette.art-automatisch .pl-art { background: var(--digital-hell); color: var(--digital-ink); }
.plakette.art-warten .pl-art { background: #f0f2f3; color: var(--ink-3); }
.plakette.art-offen { border-style: dashed; }
.plakette.gedimmt { opacity: .22; }
.plakette.ausgewaehlt { border-color: var(--akzent); box-shadow: 0 0 0 4px rgba(12, 100, 117, .2); }
.plakette.hervor { border-color: var(--akzent); box-shadow: 0 0 0 6px rgba(12, 100, 117, .2); }
.pl-inds { position: absolute; top: -6px; right: -6px; display: flex; gap: 2px; }
.pl-ind { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--papier); }
.pl-ind.verlust { background: var(--grenze); }
.pl-ind.grenze { background: #6e2a1f; }
.pl-ind.moeglich { background: var(--moeglich); }
.pl-ind.notiz { background: var(--mensch); }
.plakette.breit { width: 176px; align-items: stretch; text-align: left; padding: 6px 8px; }
.plakette.breit .pl-reihe { justify-content: flex-start; }
.pl-text { display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.28; gap: 1px; color: var(--ink-2); }
.pl-text b { font-size: 13.5px; color: var(--ink); }
.pl-verlust { color: var(--grenze); font-weight: 700; }
.pl-dauer { display: flex; gap: 3px; align-items: center; color: var(--ink-3); }
.pl-dauer .ic { width: 14px; height: 14px; }
.weg-label { position: absolute; font-size: 12.5px; font-weight: 800; padding: 1px 7px; border-radius: 5px; background: var(--papier); border: 1.5px solid var(--linie-2); color: var(--ink-2); z-index: 3; pointer-events: none !important; }
.weg-label.lbl-ja { color: var(--moeglich); border-color: #a9cfb3; }
.weg-label.lbl-nein { color: var(--grenze); border-color: #e3b6ad; }

.unterzettel { position: absolute; padding: 8px 10px; font-size: 13.5px; line-height: 1.3; border-radius: 3px; box-shadow: 0 2px 6px rgba(29, 41, 48, .12); display: flex; flex-direction: column; gap: 5px; z-index: 1; pointer-events: none; }
.zettel-mensch { background: var(--zettel); rotate: -.7deg; }
.zettel-entscheidung { background: var(--papier); border-left: 4px solid var(--ki); }
.zettel-grenze { background: var(--papier); }
.uz-zeile { display: flex; gap: 6px; align-items: flex-start; }
.uz-zeile .ic { width: 16px; height: 16px; margin-top: 1px; }
.uz-zeile b { color: var(--ki); flex: none; }
.uz-zeile i { color: var(--bruch-ink); font-style: normal; font-weight: 700; }
.uz-zeile.grenze .ic { color: var(--grenze); }
.uz-zeile.moeglich .ic { color: var(--moeglich); }
.uz-mehr { font-size: 12px; color: var(--ink-3); }

/* Köpfe, die oben und links kleben */
.kopf-themen, .kopf-bahnen { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 10; }
.kt-inhalt { position: absolute; left: 0; top: 0; height: 76px; transform-origin: 0 0; background: var(--wand-glas); border-bottom: 1px solid rgba(29, 41, 48, .08); }
.kb-inhalt { position: absolute; left: 0; top: 0; width: 184px; transform-origin: 0 0; background: var(--wand-glas); border-right: 1px solid rgba(29, 41, 48, .08); }
.thema-kopf { pointer-events: auto; position: absolute; top: 13px; height: 50px; background: var(--papier); border: 1px solid rgba(29, 41, 48, .1); border-radius: 6px; box-shadow: var(--schatten-karte); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; color: var(--ink); padding: 0 16px; }
.thema-kopf .klebe { position: absolute; top: -8px; left: 18px; width: 64px; height: 16px; }
.tk-titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thema-kopf.ausgewaehlt, .bahn-kopf.ausgewaehlt { outline: 3px solid var(--akzent); outline-offset: 2px; }
.thema-neu { pointer-events: auto; position: absolute; top: 15px; width: 46px; height: 46px; border-radius: 10px; border: 2px dashed var(--linie-2); background: rgba(255, 255, 255, .5); color: var(--ink-3); display: grid; place-items: center; }
.thema-neu:hover, .bahn-neu:hover { border-color: var(--akzent); color: var(--akzent); }
.bahn-kopf { pointer-events: auto; position: absolute; left: 12px; width: 162px; background: var(--papier); border-radius: 6px; padding: 10px 12px; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 3px; border: 1px solid rgba(29, 41, 48, .1); border-left: 5px solid var(--linie-2); box-shadow: var(--schatten-karte); overflow: hidden; }
.bahn-kopf.meine { border-left-color: var(--akzent); }
.bk-name { font-weight: 800; font-size: 16.5px; line-height: 1.2; }
.bk-rolle { font-size: 13px; color: var(--ink-2); line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bk-zahl { font-size: 12px; color: var(--ink-3); }
.bahn-neu { pointer-events: auto; position: absolute; left: 12px; width: 162px; height: 50px; border-radius: 8px; border: 2px dashed var(--linie-2); background: rgba(255, 255, 255, .5); color: var(--ink-3); display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 750; }
.kopf-ecke { position: absolute; left: 0; top: 0; background: var(--wand); z-index: 11; display: flex; align-items: flex-end; padding: 0 0 6px 12px; font-size: 12px; font-weight: 700; color: var(--ink-3); overflow: hidden; border-right: 1px solid rgba(29, 41, 48, .08); border-bottom: 1px solid rgba(29, 41, 48, .08); }
.wand.klein .kopf-ecke span { display: none; }

/* Linsen, Zoom, Bänder */
.linsen { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; display: flex; gap: 3px; padding: 5px; background: var(--papier); border-radius: 14px; box-shadow: var(--schatten-hoch); z-index: 20; max-width: calc(100% - 290px); overflow-x: auto; scrollbar-width: none; }
.linsen button { min-height: 46px; padding: 0 13px; border-radius: 10px; display: flex; gap: 7px; align-items: center; font-size: 14.5px; font-weight: 700; background: none; border: 0; color: var(--ink-2); white-space: nowrap; flex: none; }
.linsen button:hover { background: var(--grau-fl); color: var(--ink); }
.linsen button.an { background: var(--akzent); color: #fff; }
.linsen .ic { width: 20px; height: 20px; }
.zoom { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 2px; padding: 5px; background: var(--papier); border-radius: 14px; box-shadow: var(--schatten-hoch); z-index: 20; }
.zoom [data-aktion="abspielen"] { color: var(--akzent); }
.hinweisband { position: absolute; left: 50%; top: 88px; translate: -50% 0; z-index: 25; display: flex; gap: 10px; align-items: center; background: var(--papier); border-radius: 12px; box-shadow: var(--schatten-hoch); padding: 8px 8px 8px 14px; font-size: 14.5px; max-width: min(720px, calc(100% - 24px)); border-left: 5px solid var(--akzent); }
.hinweisband .ic { color: var(--akzent); }
.spielband { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; z-index: 26; width: min(820px, calc(100% - 28px)); display: flex; gap: 14px; align-items: center; background: var(--papier); border-radius: 16px; box-shadow: var(--schatten-hoch); padding: 12px 12px 12px 14px; min-height: 76px; }
.spielt .linsen { opacity: 0; pointer-events: none; }
.sb-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 14.5px; color: var(--ink-2); }
.sb-text small { font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
.sb-text b { font-size: 16.5px; color: var(--ink); }
.sb-verlust { color: var(--grenze); font-weight: 750; }
.sb-dauer, .sb-notiz { display: flex; gap: 5px; align-items: center; }
.sb-dauer .ic, .sb-notiz .ic { width: 16px; height: 16px; }
.sb-notiz { color: var(--mensch-ink); }
.sb-frage { color: var(--bruch-ink); font-weight: 750; display: flex; gap: 5px; align-items: center; }
.sb-frage .ic { width: 18px; height: 18px; }
.sb-akteur { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.sb-akteur .ic { width: 26px; height: 26px; }
.sb-akteur.akteur-mensch { background: var(--mensch); color: #fff; }
.sb-akteur.akteur-digital { background: var(--digital); color: var(--ki); }
.sb-akteur.akteur-ki { background: var(--ki); color: var(--ki-licht); }
.sb-akteur.entscheidung { background: var(--ki-hell); color: var(--ki); }
.sb-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--akzent-hell); color: var(--akzent); display: grid; place-items: center; flex: none; }
.sb-weg { display: flex; align-items: center; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--grau-fl); color: var(--ink-2); flex: none; }
.sb-weg.art-abtippen, .sb-weg.art-muendlich { background: var(--bruch-hell); color: var(--bruch-ink); }
.sb-weg.art-ki { background: var(--ki); color: var(--ki-licht); }
.sb-weg .ic { width: 22px; height: 22px; }
.sb-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; max-width: 52%; }
.token { position: absolute; width: 46px; height: 46px; translate: -50% -50%; scale: var(--g, 1); border-radius: 50%; background: var(--akzent); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 7px rgba(12, 100, 117, .18), 0 6px 14px rgba(0, 0, 0, .2); z-index: 40; pointer-events: none !important; transition: scale .35s; }
.token .ic { width: 25px; height: 25px; }
.token.wechsel { animation: wechsel .5s ease; }
@keyframes wechsel { 0% { transform: scale(1); } 40% { transform: scale(1.38) rotate(-10deg); } 100% { transform: scale(1); } }
.splitter { position: absolute; width: 8px; height: 8px; translate: -50% -50%; background: var(--akzent); clip-path: polygon(50% 0, 100% 60%, 30% 100%, 0 38%); animation: splitter 1s cubic-bezier(.2, .8, .3, 1) forwards; z-index: 39; pointer-events: none !important; }
@keyframes splitter { to { transform: translate(var(--dx), var(--dy)) rotate(var(--dreh)); opacity: .42; } }

/* ---------- Seitenfeld ---------- */
.panel { padding-bottom: 28px; }
.p-kopf { position: sticky; top: 0; background: var(--papier); z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--linie); min-height: 62px; }
.p-art { display: flex; gap: 8px; align-items: center; font-weight: 800; font-size: 15px; color: var(--ink-2); }
.schritt-kopf .p-art { font-size: 18px; color: var(--ink); }
.p-inhalt { padding: 16px 18px; display: flex; flex-direction: column; gap: 18px; }
.schritt-satz { font-size: 16.5px; line-height: 1.45; margin: 0; color: var(--ink); }
.feld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.feld > span { font-size: 14px; font-weight: 750; color: var(--ink-2); display: flex; gap: 6px; align-items: center; }
.feld > span .ic { width: 18px; height: 18px; }
.feld.gross > span { font-size: 15px; }
.feld.gross textarea, .feld.gross input { font-size: 18px; font-weight: 700; }
.segment { display: flex; background: var(--grau-fl); border-radius: 11px; padding: 4px; gap: 4px; }
.segment button { flex: 1; min-height: 46px; border: 0; background: transparent; border-radius: 8px; font-weight: 700; color: var(--ink-2); display: flex; gap: 7px; align-items: center; justify-content: center; padding: 0 6px; }
.segment button.an { background: var(--papier); color: var(--ink); box-shadow: 0 1px 3px rgba(29, 41, 48, .16); }
.segment .k-akteur { width: 28px; height: 28px; }
.segment .k-akteur .ic { width: 18px; height: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips.formen { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.chip { min-height: 46px; display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 9px; border: 1.5px solid var(--linie); background: var(--papier); font-size: 14px; color: var(--ink-2); text-align: left; }
.chip:hover { border-color: var(--linie-2); color: var(--ink); }
.chip .ic { width: 20px; height: 20px; }
.chip.an { border-color: var(--akzent); background: var(--akzent-hell); color: var(--ink); font-weight: 700; }
.chip.klein { min-height: 44px; font-size: 13.5px; padding: 4px 9px; }
.chip.klein .ic { width: 18px; height: 18px; color: var(--mensch-ink); }
.chips.arten { display: grid; grid-template-columns: 1fr 1fr; }
.chip.art { align-items: flex-start; padding: 8px 10px; }
.chip.art .ic { margin-top: 1px; }
.chip.art span { display: flex; flex-direction: column; gap: 1px; }
.chip.art small { font-size: 12px; color: var(--ink-3); font-weight: 400; line-height: 1.25; }
.chip.art.an.art-abtippen, .chip.art.an.art-muendlich { border-color: var(--bruch); background: var(--bruch-hell); }
.chip.art.an.art-ki { border-color: var(--ki); background: var(--ki-hell); }
.block { display: flex; flex-direction: column; gap: 10px; }
.p-inhalt > .block + .block, .p-inhalt > .feld + .block, .p-inhalt > details.block { border-top: 1px solid var(--linie); padding-top: 16px; }
.block-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.block h3 { margin: 0; font-size: 15.5px; font-weight: 800; }
.zahl { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.hilfe { margin: 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.42; }
details.block summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
details.block summary::-webkit-details-marker { display: none; }
details.block summary::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); rotate: 45deg; margin-right: 6px; transition: rotate .15s; }
details.block[open] summary::after { rotate: 225deg; }
.notizen { display: flex; flex-direction: column; gap: 6px; }
.notiz { display: grid; grid-template-columns: 30px 1fr 42px; gap: 6px; align-items: start; background: var(--zettel); padding: 8px 4px 6px 8px; border-radius: 3px; box-shadow: 0 1px 2px rgba(29, 41, 48, .1); }
.n-icon { color: #6d5200; padding-top: 2px; }
.n-feld { display: flex; flex-direction: column; gap: 1px; }
.n-art { font-size: 12px; font-weight: 800; color: #6d5200; }
.notiz textarea { background: transparent; border: 0; padding: 2px 0; font-size: 15.5px; min-height: 26px; border-radius: 0; }
.notiz textarea:focus { outline: none; background: rgba(255, 255, 255, .5); }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grenze-feld > span { color: var(--grenze); }
.moeglich-feld > span { color: var(--moeglich); }
.entscheid-block { background: var(--ki-hell); border-radius: 12px; padding: 12px; }
.entscheid-block .feld > span { color: var(--ki); }
.wegliste { display: flex; flex-direction: column; gap: 6px; }
.wegzeile { min-height: 46px; display: flex; gap: 8px; align-items: center; text-align: left; border: 1px solid var(--linie); background: var(--papier); border-radius: 9px; padding: 6px 10px; font-size: 14px; }
.wegzeile:hover { border-color: var(--akzent); }
.wegzeile .ic { width: 18px; height: 18px; color: var(--ink-3); }
.wegzeile span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wegzeile em { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.wegzeile em.offen { color: var(--bruch-ink); font-weight: 700; }
.zeile-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.zeile-knoepfe.ende { justify-content: flex-end; border-top: 1px solid var(--linie); padding-top: 16px; }
.weg-ende { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.weg-ende .pfeil { color: var(--ink-3); }
.wegpunkt { text-align: left; padding: 10px; border-radius: 9px; border: 1px solid var(--linie); background: #fbfcfc; font-weight: 700; font-size: 14px; display: flex; flex-direction: column; gap: 2px; min-height: 58px; line-height: 1.25; }
.wegpunkt:hover { border-color: var(--akzent); }
.wegpunkt small { font-weight: 600; color: var(--ink-3); font-size: 12px; }
.farbwahl { display: flex; gap: 8px; flex-wrap: wrap; }
.farbwahl .farbe { width: 48px; height: 30px; border-radius: 3px; border: 0; background: var(--t); clip-path: polygon(0 12%, 5% 0, 30% 8%, 62% 0, 95% 7%, 100% 0, 100% 88%, 96% 100%, 64% 92%, 34% 100%, 5% 93%, 0 100%); }
.farbwahl .farbe.an { clip-path: none; outline: 3px solid var(--akzent); outline-offset: 3px; }
.hinweis { background: var(--akzent-hell); border-radius: 12px; padding: 12px; }
.hinweis p { margin: 0; font-size: 14.5px; line-height: 1.42; }
.dreh90 { rotate: 90deg; }

.bahnwahl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bahnknopf { min-height: 48px; display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; border: 1.5px solid var(--linie); background: var(--papier); text-align: left; font-weight: 700; font-size: 14.5px; }
.bahnknopf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bahnknopf.an { border-color: var(--akzent); background: var(--akzent-hell); }
.bahnknopf.neu { border-style: dashed; color: var(--ink-3); }
.anleitung .schrittchen { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.anleitung .schrittchen .ic { color: var(--akzent); margin-top: 1px; }
.anleitung p { margin: 0; font-size: 14.5px; line-height: 1.42; color: var(--ink-2); }
.zahlenreihe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.zahlenreihe div { background: var(--grau-fl); border-radius: 9px; padding: 9px 8px; display: flex; flex-direction: column; gap: 2px; }
.zahlenreihe b { font-size: 22px; line-height: 1; }
.zahlenreihe span { font-size: 11.5px; color: var(--ink-3); line-height: 1.2; font-weight: 600; }
table.gesamt, table.vergleich { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.gesamt th, table.gesamt td, table.vergleich th, table.vergleich td { padding: 7px 4px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: middle; }
table.gesamt thead th, table.vergleich thead th { font-size: 12px; color: var(--ink-3); font-weight: 750; }
table.gesamt td { text-align: center; font-weight: 700; color: var(--bruch-ink); }
table.gesamt td.punkte { text-align: left; }
table.gesamt tbody th { font-weight: 700; }
table.vergleich td { text-align: right; font-weight: 700; white-space: nowrap; }
table.vergleich tbody th { font-weight: 600; color: var(--ink-2); }
table.vergleich tr.gut td:last-child { color: var(--moeglich); }
table.vergleich tr.schlecht td:last-child { color: var(--grenze); }
table.vergleich small { font-weight: 700; }
.punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 2px; vertical-align: middle; }
.punkt.akteur-mensch { background: var(--mensch); } .punkt.akteur-digital { background: var(--digital); } .punkt.akteur-ki { background: var(--ki); }
.legende { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.legende .punkt { margin-left: 6px; }
.klebe-mini { display: inline-block; width: 18px; height: 8px; margin-right: 6px; background: var(--t); vertical-align: middle; }
.linsenliste, .beobachtungen, .fassungen { display: flex; flex-direction: column; gap: 6px; }
.linsenzeile, .beob, .fa-wahl { display: flex; gap: 10px; align-items: center; text-align: left; min-height: 52px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linie); background: var(--papier); width: 100%; }
.linsenzeile:hover, .beob:hover, .fa-wahl:hover { border-color: var(--akzent); }
.linsenzeile span, .fa-wahl span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.linsenzeile small, .fa-wahl small { color: var(--ink-3); font-size: 13px; }
.linsenzeile.an { border-color: var(--akzent); background: var(--akzent-hell); }
.linsenzeile .ic { color: var(--akzent); }
.beob { font-size: 14px; line-height: 1.35; align-items: flex-start; }
.beob .ic { width: 20px; height: 20px; margin-top: 1px; }
.beob.art-bruch .ic { color: var(--bruch); } .beob.art-verlust .ic { color: var(--grenze); } .beob.art-grundlage .ic { color: var(--ki); }
.beob.art-kopf .ic { color: var(--mensch); } .beob.art-abweichung .ic { color: var(--bruch-ink); } .beob.art-warten .ic { color: var(--ink-3); }
.fassung { display: flex; gap: 4px; align-items: center; }
.fassung.an .fa-wahl { border-color: var(--akzent); background: var(--akzent-hell); }
.pk-gruppe h4 { margin: 12px 0 8px; font-size: 15px; display: flex; gap: 8px; align-items: baseline; }
.pk-gruppe h4 small { color: var(--ink-3); font-weight: 600; font-size: 12.5px; }
.pk-frage { display: grid; gap: 7px; padding: 11px; background: var(--flaeche); border-radius: 10px; margin-bottom: 8px; border: 1px solid var(--linie); }
.pk-kat { display: flex; gap: 8px; align-items: baseline; }
.pk-kat small { color: var(--ink-3); font-size: 12.5px; }
.pk-frage .feld > span { font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.pk-frage .soll > span { color: var(--akzent); }
.pk-frage textarea { font-size: 15px; padding: 8px 10px; min-height: 40px; background: #fff; }
.nur-blatt { display: none !important; }

/* ---------- Popup, Dialog, Meldung ---------- */
.popup { position: fixed; z-index: 80; background: var(--papier); border-radius: 13px; box-shadow: var(--schatten-hoch); padding: 6px; min-width: 270px; max-width: min(370px, 94vw); display: flex; flex-direction: column; border: 1px solid var(--linie); }
.popup button, .popup label, .popup a { display: flex; gap: 11px; align-items: center; min-height: 50px; padding: 6px 12px; border: 0; background: none; border-radius: 9px; font-size: 15px; text-align: left; color: var(--ink); cursor: pointer; text-decoration: none; }
.popup button:hover, .popup label:hover, .popup a:hover { background: var(--grau-fl); }
.popup .ic { color: var(--akzent); }
.popup span small { display: block; font-size: 12.5px; color: var(--ink-3); }
.pop-titel { margin: 8px 12px 4px; font-size: 12.5px; font-weight: 800; color: var(--ink-3); }
dialog.dialog { border: 0; border-radius: 16px; padding: 24px; width: min(540px, 94vw); box-shadow: var(--schatten-hoch); color: var(--ink); }
dialog.dialog::backdrop { background: rgba(18, 28, 34, .42); }
dialog form { display: flex; flex-direction: column; gap: 16px; }
dialog h2 { margin: 0; font-size: 22px; }
dialog p { margin: 0; color: var(--ink-2); line-height: 1.45; }
.vorlagen { display: flex; flex-direction: column; gap: 8px; }
.vorlage { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--linie); border-radius: 11px; cursor: pointer; }
.vorlage input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--akzent); flex: none; }
.vorlage span { display: flex; flex-direction: column; gap: 2px; }
.vorlage small { color: var(--ink-3); font-size: 13.5px; }
.vorlage:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); }
.dialog-knoepfe { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
#meldungen { position: fixed; left: 50%; top: 76px; translate: -50% 0; z-index: 90; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: max-content; max-width: 92vw; }
.meldung { background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 11px; font-size: 14.5px; box-shadow: var(--schatten-hoch); transition: opacity .4s, translate .4s; }
.meldung.weg { opacity: 0; translate: 0 -6px; }
.meldung.fehler { background: var(--grenze); }

/* ---------- Rundgang ---------- */
.rundgang { position: fixed; inset: 0; z-index: 100; }
.rg-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(16, 26, 32, .55); transition: top .35s ease, left .35s ease, width .35s ease, height .35s ease, opacity .2s; pointer-events: none; outline: 2px solid rgba(255, 255, 255, .7); }
.rg-karte { position: fixed; width: min(390px, calc(100vw - 24px)); background: var(--papier); border-radius: 15px; padding: 18px 18px 14px; box-shadow: 0 18px 46px rgba(0, 0, 0, .3); transition: opacity .2s; }
.rg-karte.wechselt { opacity: .55; }
.rg-karte.unten { left: 12px !important; right: 12px; bottom: 12px; top: auto !important; width: auto; }
.rg-kick { margin: 0 0 4px; font-size: 12.5px; font-weight: 800; color: var(--akzent); }
.rg-titel { margin: 0 34px 6px 0; font-size: 19.5px; line-height: 1.2; }
.rg-text { margin: 0 0 14px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.rg-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rg-punkte { display: flex; gap: 4px; align-items: center; }
.rg-punkte i { width: 7px; height: 7px; border-radius: 4px; background: var(--linie-2); transition: width .2s; }
.rg-punkte i.an { background: var(--akzent); width: 18px; }
.rg-punkte i.war { background: #9cc4cc; }
.rg-knoepfe { display: flex; gap: 8px; }
.rg-x { position: absolute; top: 8px; right: 8px; }

/* ---------- Methode, Rechtliches ---------- */
.methode, .recht { max-width: 860px; margin: 0 auto; padding: 0 24px 64px; }
.methode h1, .recht h1 { font-size: clamp(30px, 4vw, 42px); line-height: 1.1; margin: 22px 0 14px; letter-spacing: -.01em; }
.methode h2, .recht h2 { font-size: 23px; margin: 40px 0 10px; }
.methode h3 { font-size: 18px; margin: 24px 0 6px; }
.methode p, .methode li, .recht p, .recht li { font-size: 17px; line-height: 1.62; color: var(--ink-2); }
.methode .einleitung { font-size: 19.5px; color: var(--ink); }
.methode blockquote { margin: 18px 0; padding: 14px 18px; border-left: 4px solid var(--akzent); background: var(--papier); border-radius: 0 10px 10px 0; font-size: 17.5px; color: var(--ink); }
.methode blockquote cite { display: block; font-style: normal; font-size: 14px; color: var(--ink-3); margin-top: 6px; }
.methode table { width: 100%; border-collapse: collapse; margin: 14px 0; background: var(--papier); border-radius: 10px; overflow: hidden; font-size: 15px; }
.methode th, .methode td { padding: 10px 12px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; line-height: 1.4; }
.methode thead th { background: var(--grau-fl); font-size: 13.5px; }
.methode .quellen li { font-size: 15px; line-height: 1.5; margin-bottom: 6px; }
.methode .quellen a { overflow-wrap: anywhere; }
.methode .kasten { background: var(--papier); border: 1px solid var(--linie); border-radius: 12px; padding: 16px 18px; margin: 16px 0; }
.methode .kasten p { margin: 0; }
.methode small.beleg { display: block; font-size: 13.5px; color: var(--ink-3); }

/* ---------- Druck ---------- */
.druck { display: none; }
@media print {
  @page { size: A3 landscape; margin: 10mm; }
  body.druckt > *:not(.druck) { display: none !important; }
  body.druckt { overflow: visible; height: auto; background: #fff; }
  body.druckt .druck { display: block; }
  .druck, .druck * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .druck-seite { break-after: page; page-break-after: always; }
  .druck-seite:last-child { break-after: auto; page-break-after: auto; }
  .druck-kopf { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 4mm; }
  .druck-kopf h1 { margin: 0; font-size: 22pt; }
  .druck-kopf p { margin: 1mm 0 0; font-size: 10.5pt; color: var(--ink-2); }
  .druck-buehne { position: relative; overflow: hidden; }
  .druck-massstab { position: absolute; left: 0; top: 0; transform-origin: 0 0; background-color: var(--wand); background-image: radial-gradient(circle, var(--wand-loch) 0 1.7px, transparent 2.1px); background-size: 22px 22px; }
  .druck-massstab .welt { transform: none !important; }
  .druck-massstab .kt-inhalt, .druck-massstab .kb-inhalt { background: transparent; border: 0; }
  .druck-massstab .frei, .druck-massstab .k-anschluss, .druck-massstab .k-griff, .druck-massstab .thema-neu, .druck-massstab .bahn-neu, .druck-massstab .weg-treffer { display: none !important; }
  .druck-massstab .karte, .druck-massstab .thema-kopf, .druck-massstab .bahn-kopf { box-shadow: none; }
  .druck-legende { display: flex; gap: 5mm; flex-wrap: wrap; margin-top: 4mm; font-size: 9.5pt; align-items: center; }
  .druck-legende .lg { display: inline-flex; gap: 2mm; align-items: center; }
  .druck-legende .k-akteur { width: 20px; height: 20px; border-radius: 4px; }
  .druck-legende .k-akteur .ic { width: 14px; height: 14px; }
  .druck-text h2 { font-size: 15pt; margin: 0 0 3mm; }
  .druck-text ul { columns: 2; font-size: 10.5pt; margin: 0 0 8mm; }
  .druck-zahlen { font-size: 10.5pt; }
  .druck-pk { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .druck-pk th, .druck-pk td { border: 1px solid #c5d0d5; padding: 2mm; text-align: left; vertical-align: top; }
  .druck-pk th small { display: block; font-weight: 400; color: var(--ink-3); }
  .druck-pk td { width: 37%; }
  .druck-pk .pk-g th { background: #eef2f4; }
  .druck-quelle { font-size: 9pt; color: var(--ink-3); margin-top: 6mm; }
}

/* ---------- Kleinere Bildschirme ---------- */
@media (max-width: 1240px) {
  .schritte button { padding: 0 11px; font-size: 14.5px; }
  .arbeitsflaeche { grid-template-columns: minmax(0, 1fr) 372px; }
  .linsen button span { display: none; }
  .linsen button.an span { display: inline; }
  .linsen { max-width: calc(100% - 270px); }
}
@media (max-width: 979px) {
  .leiste { flex-wrap: wrap; row-gap: 4px; padding: 6px 8px; }
  .leiste-titel { flex: 1 1 auto; order: 1; }
  .leiste-rechts { order: 2; }
  .leiste > .ikon-knopf { order: 0; }
  .schritte { order: 3; width: 100%; margin: 0; }
  .schritte button { flex: 1; justify-content: center; padding: 0 6px; }
  .arbeitsflaeche { grid-template-columns: minmax(0, 1fr); }
  .feld-seite { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: min(68dvh, calc(var(--vvh, 100dvh) - 64px)); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 34px rgba(18, 28, 34, .2); border-left: 0; }
  .feld-seite.zu { max-height: 64px; overflow: hidden; }
  .feld-seite.zu .p-kopf { cursor: pointer; }
  .feld-seite.zu .nur-blatt .ic { rotate: 180deg; }
  .nur-blatt { display: grid !important; }
  .feld-seite::before { content: ''; position: sticky; top: 0; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--linie-2); margin: 7px auto -12px; z-index: 3; }
  .linsen, .zoom { bottom: 78px; }
  .spielband { bottom: 78px; }
  .linsen { left: 12px; translate: none; max-width: calc(100% - 230px); }
  .hinweisband { top: 82px; }
  .zahlenreihe { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .start { padding: 0 16px 32px; }
  .start-held { grid-template-columns: 1fr; gap: 28px; padding: 22px 0; }
  .start-held p { font-size: 17px; }
  .vierschritt { grid-template-columns: 1fr; }
  .kachelreihe { grid-template-columns: 1fr; }
  .kachel-bild { width: 96px; height: 64px; }
  .start-nav a { display: none; }
  .titel-feld { font-size: 16px; }
  .schritte button i { display: none; }
  .schritte button { font-size: 13.5px; min-height: 44px; }
  .leiste-rechts .ikon-knopf { width: 44px; height: 44px; }
  .zoom [data-zoom] { display: none; }
  .linsen { max-width: calc(100% - 92px); }
  .chips.arten { grid-template-columns: 1fr; }
  .zwei { grid-template-columns: 1fr; }
  .spielband { flex-wrap: wrap; }
  .sb-knoepfe { max-width: none; width: 100%; }
}
@media (pointer: coarse) {
  .k-griff { opacity: .75; width: 44px; height: 44px; margin: -6px -6px -6px auto; }
  .k-anschluss { opacity: .92; width: 38px; height: 38px; right: -20px; }
  .frei { opacity: .6; }
  .karte:hover { box-shadow: var(--schatten-karte); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Grenzfragen, Raster, Verantwortung ---------- */
.p-art small { font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-left: 4px; }
.sichtwahl { display: flex; flex-wrap: wrap; gap: 6px; }
.sichtwahl .chip { min-height: 44px; }
.pk-gruppe.neu h4 { color: var(--akzent); }
.pk-neu { margin-left: auto; font-size: 11.5px; font-weight: 750; color: var(--akzent); background: var(--akzent-hell); padding: 1px 7px; border-radius: 5px; }
.pk-frage.mit-diff { border-color: #b7d5dc; }
.warum-feld > span { color: var(--akzent); }
.begruendungen { display: flex; flex-direction: column; gap: 8px; }
.feld.begr > span { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.feld.begr > span .ic { width: 18px; height: 18px; color: var(--ink-3); }
.abwaegungen { display: flex; flex-direction: column; gap: 10px; }
.abwaegung { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px; border-radius: 10px; background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--grenze); }
.abwaegung .abw-weg { position: absolute; top: 4px; right: 4px; }
.abwaegung .feld:first-child { padding-right: 40px; }
.verpflichtung { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.verpflichtung b { display: flex; gap: 6px; align-items: center; font-size: 15px; }
.verpflichtung b .ic { width: 18px; height: 18px; color: var(--ink-3); }
dialog.raster-dialog { border: 0; padding: 0; width: min(1500px, 98vw); height: min(900px, 94dvh); max-width: none; max-height: none; border-radius: 16px; box-shadow: var(--schatten-hoch); color: var(--ink); display: flex; flex-direction: column; overflow: hidden; }
dialog.raster-dialog:not([open]) { display: none; }
dialog.raster-dialog::backdrop { background: rgba(18, 28, 34, .45); }
.raster-kopf { display: flex; gap: 16px; align-items: center; padding: 14px 14px 12px 22px; border-bottom: 1px solid var(--linie); }
.raster-kopf > div:first-child { flex: 1; min-width: 0; }
.raster-kopf h2 { margin: 0; font-size: 20px; }
.raster-kopf p { margin: 2px 0 0; color: var(--ink-3); font-size: 14px; }
.raster-modus { width: 260px; flex: none; }
.raster-scroll { flex: 1; overflow: auto; background-color: var(--wand); background-image: radial-gradient(circle, var(--wand-loch) 0 1.5px, transparent 1.9px); background-size: 20px 20px; }
table.raster { border-collapse: separate; border-spacing: 6px; min-width: 100%; }
.raster th, .raster td { vertical-align: top; }
.raster thead th { position: sticky; z-index: 2; background: var(--wand-glas); }
.raster thead tr:first-child th { top: 0; }
.raster thead tr:nth-child(2) th { top: 52px; }
.r-ecke { left: 0; z-index: 3 !important; min-width: 150px; text-align: left; font-size: 13px; color: var(--ink-3); padding: 8px; }
.r-gruppe { height: 46px; font-size: 13.5px; text-align: left; padding: 6px 10px; border-radius: 6px; background: var(--papier) !important; box-shadow: var(--schatten-karte); }
.r-gruppe small, .r-kat small { display: block; font-weight: 500; color: var(--ink-3); font-size: 11.5px; }
.r-gruppe.neu { color: var(--akzent); }
.r-kat { min-width: 168px; text-align: left; padding: 6px 8px; font-size: 14px; }
.r-sicht { position: sticky; left: 0; z-index: 1; background: var(--papier); border-radius: 6px; padding: 10px; text-align: left; font-size: 15px; box-shadow: var(--schatten-karte); white-space: nowrap; }
.r-sicht .ic { display: inline-block; vertical-align: -4px; width: 18px; height: 18px; margin-right: 6px; color: var(--ink-3); }
.rz { position: relative; width: 100%; min-height: 88px; display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 9px 10px; border-radius: 6px; background: var(--papier); border: 1px solid rgba(29, 41, 48, .08); box-shadow: var(--schatten-karte); font-size: 13.5px; line-height: 1.32; }
.rz:hover { border-color: var(--akzent); }
.rz.leer { background: rgba(255, 255, 255, .45); border: 2px dashed rgba(29, 41, 48, .16); box-shadow: none; align-items: center; justify-content: center; color: var(--ink-3); }
.rz.diff::after { content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
.rz-soll { color: var(--akzent); font-weight: 650; }
.rz-ist { color: var(--ink); }
.raster-fuss { margin: 0; padding: 10px 22px; font-size: 13.5px; color: var(--ink-3); border-top: 1px solid var(--linie); }
.raster-edit { position: absolute; inset: 0; background: rgba(18, 28, 34, .35); display: grid; place-items: center; padding: 16px; }
.re-karte { background: var(--papier); border-radius: 14px; padding: 20px; width: min(520px, 100%); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--schatten-hoch); }
.re-karte h3 { margin: 0; font-size: 20px; }
.re-karte h3 small { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.re-kick { margin: 0; font-size: 12.5px; font-weight: 800; color: var(--akzent); }
.feld.soll > span { color: var(--akzent); }
@media (max-width: 640px) { .raster-kopf { flex-wrap: wrap; } .raster-modus { width: 100%; order: 3; } dialog.raster-dialog { width: 100vw; height: 100dvh; border-radius: 0; } }

/* ---------- Nachträge 19.10. ---------- */
.leiste-titel { flex: 1 1 0; }
.schritte { flex: none; }
.linsen { left: 14px; translate: none; max-width: calc(100% - 290px); }
.chip span { overflow-wrap: anywhere; hyphens: auto; }
.segment.klein button { min-height: 44px; font-size: 14.5px; }
.chips.ankunft { display: grid; grid-template-columns: 1fr 1fr; }
.chip.ank-nachfragen.an, .chip.ank-ergaenzen.an, .chip.ank-korrigieren.an { border-color: var(--bruch); background: var(--bruch-hell); }
.k-ind.sichtbar { color: var(--digital-ink); }
.pl-ind.rueckfrage { background: var(--bruch); }
.pl-richtung { color: var(--ink-3); }
.pl-rueck { color: var(--bruch-ink); font-weight: 700; }
.beob.art-rueckfrage .ic { color: var(--bruch); }
/* Grobe Ansicht: beim Herauszoomen zählt nur, was auf der Karte steht und wer es macht */
.wand.klein .karte .k-formen, .wand.klein .karte .k-fuss, .wand.klein .karte .k-grund, .wand.klein .karte .k-typ { display: none; }
.wand.klein .karte .k-titel { font-size: 21px; -webkit-line-clamp: 3; }
.wand.klein .karte .k-akteur { width: 40px; height: 40px; }
.wand.klein .karte .k-akteur .ic { width: 26px; height: 26px; }
.wand.klein .plakette .pl-form { display: none; }
.wand.klein .thema-kopf { font-size: 22px; }
.wand.klein .bahn-kopf .bk-name { font-size: 21px; }
.wand.klein .bahn-kopf .bk-rolle, .wand.klein .bahn-kopf .bk-zahl { display: none; }
@media (max-width: 1240px) { .linsen { max-width: calc(100% - 250px); } }
@media (max-width: 979px) { .linsen { left: 12px; max-width: calc(100% - 230px); } }
@media (max-width: 640px) { .linsen { max-width: calc(100% - 84px); } }
@media (max-width: 979px) {
  .linsen, .zoom, .spielband { bottom: calc(var(--blatt-h, 64px) + 12px); transition: bottom .2s; }
  .feld-seite { max-height: min(56dvh, calc(var(--vvh, 100dvh) - 64px)); }
  .feld-seite[data-art="station"], .feld-seite[data-art="weg"] { max-height: min(66dvh, calc(var(--vvh, 100dvh) - 64px)); }
}
@media (max-width: 640px) {
  .arbeitsflaeche:has(.feld-seite[data-art="station"]) .linsen, .arbeitsflaeche:has(.feld-seite[data-art="station"]) .zoom,
  .arbeitsflaeche:has(.feld-seite[data-art="weg"]) .linsen, .arbeitsflaeche:has(.feld-seite[data-art="weg"]) .zoom { display: none; }
}

/* ---------- Mitmachen (aufgestelltes Tablet) ---------- */
body.mitmachen-an { overflow: hidden; }
.mitmachen { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto 1fr; background-color: var(--wand); background-image: radial-gradient(circle, var(--wand-loch) 0 1.7px, transparent 2.1px); background-size: 22px 22px; }
.mm-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 18px; background: var(--papier); border-bottom: 1px solid var(--linie); }
.mm-marke { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 16px; }
.mm-marke > .ic { color: var(--akzent); }
.mm-marke b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-wer { display: inline-flex; gap: 6px; align-items: center; background: var(--akzent-hell); color: var(--akzent-2); font-weight: 750; padding: 5px 10px; border-radius: 8px; }
.mm-wer .ic { width: 18px; height: 18px; }
.mm-haupt { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 20px; padding: 20px; min-height: 0; }
.mm-frage { background: var(--papier); border-radius: 18px; box-shadow: var(--schatten-karte); padding: 30px 32px 24px; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.mm-frage h2 { margin: 0; font-size: clamp(27px, 3.2vw, 36px); line-height: 1.12; letter-spacing: -.01em; }
.mm-hilfe { margin: 8px 0 0; font-size: 18px; color: var(--ink-2); }
.mm-inhalt { margin-top: 22px; display: flex; flex-direction: column; gap: 18px; }
.mm-gross { font-size: 25px; font-weight: 700; padding: 16px 18px; min-height: 104px; border-radius: 14px; border-width: 2px; }
.mm-gross.klein { font-size: 20px; min-height: 84px; }
.mm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-chip { min-height: 48px; padding: 0 16px; border-radius: 11px; border: 1.5px solid var(--linie-2); background: var(--papier); font-size: 16.5px; font-weight: 650; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.mm-chip.an { border-color: var(--akzent); background: var(--akzent-hell); color: var(--ink); }
.mm-chip .klebe-mini { margin: 0; }
.mm-thema { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mm-thema > span, .mm-zusatz > span, .mm-feld > span { font-size: 15.5px; font-weight: 750; color: var(--ink-3); margin-right: 4px; }
.mm-zusatz { display: flex; flex-direction: column; gap: 10px; transition: opacity .2s; }
.mm-zusatz.leise { opacity: .45; pointer-events: none; }
.mm-feld { display: flex; flex-direction: column; gap: 8px; }
.mm-feld input { font-size: 20px; padding: 14px 16px; border-radius: 12px; }
.mm-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.mm-wahl.gross { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.mm-wahl.drei { grid-template-columns: repeat(3, 1fr); }
.mm-wahl.zwei { grid-template-columns: repeat(2, 1fr); }
.mm-wahl.arten { grid-template-columns: repeat(3, 1fr); }
.mm-wahl.notizen { grid-template-columns: repeat(2, 1fr); }
.mm-karte { min-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px 12px; text-align: center; border-radius: 15px; border: 2px solid var(--linie); background: var(--papier); font-size: 18.5px; font-weight: 750; color: var(--ink); transition: border-color .15s, background .15s, transform .1s; }
.mm-karte:active { transform: scale(.98); }
.mm-karte > .ic { width: 34px; height: 34px; color: var(--akzent); }
.mm-karte small { display: block; font-size: 14px; font-weight: 600; color: var(--ink-3); margin-top: 2px; }
.mm-karte .k-akteur { width: 54px; height: 54px; border-radius: 12px; }
.mm-karte .k-akteur .ic { width: 32px; height: 32px; }
.mm-karte.an { border-color: var(--akzent); background: var(--akzent-hell); box-shadow: 0 0 0 3px rgba(12, 100, 117, .18); }
.mm-karte.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.mm-karte.haupt > .ic, .mm-karte.haupt small { color: #fff; }
.mm-karte.art.art-abtippen > .ic, .mm-karte.art.art-muendlich > .ic { color: var(--bruch); }
.mm-karte.art.art-ki > .ic { color: var(--ki); }
.mm-karte.notiz > .ic { color: var(--mensch-ink); }
.mm-formen { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.mm-form { min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; border: 2px solid var(--linie); background: var(--papier); font-size: 15.5px; font-weight: 700; color: var(--ink-2); }
.mm-form .ic { width: 32px; height: 32px; }
.mm-form.an { border-color: var(--akzent); background: var(--akzent-hell); color: var(--ink); }
.mm-form.mehr { border-style: dashed; color: var(--ink-3); }
.mm-fuss { margin-top: auto; padding-top: 24px; display: flex; justify-content: space-between; gap: 12px; }
.mm-fuss .knopf.gross { min-height: 62px; font-size: 19px; padding: 0 26px; border-radius: 13px; }
.mm-weg { background: var(--papier); border-radius: 18px; box-shadow: var(--schatten-karte); padding: 22px; overflow-y: auto; min-height: 0; }
.mm-weg h3 { margin: 0 0 14px; font-size: 18px; display: flex; gap: 8px; align-items: center; }
.mm-weg-leer { height: 100%; min-height: 180px; border: 2px dashed var(--linie-2); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink-3); text-align: center; padding: 20px; }
.mm-weg-leer .ic { width: 40px; height: 40px; }
.mm-weg-leer p { margin: 0; font-size: 17px; }
.mm-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mm-schritt { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 10px; border: 1.5px solid var(--linie); background: var(--papier); box-shadow: var(--schatten-karte); }
.mm-schritt.jetzt { border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(12, 100, 117, .16); }
.mm-schritt.entscheidung { border-style: dashed; border-color: var(--ki); }
.mm-schritt .k-akteur { width: 38px; height: 38px; }
.mm-s-text { display: flex; flex-direction: column; min-width: 0; }
.mm-s-text b { font-size: 16.5px; line-height: 1.25; }
.mm-s-text small { font-size: 13.5px; color: var(--ink-3); }
.mm-uebergang { display: flex; gap: 8px; align-items: center; margin-left: 30px; padding: 8px 0 8px 18px; border-left: 2.5px solid var(--weg-leise); font-size: 14.5px; font-weight: 650; color: var(--ink-2); }
.mm-uebergang .ic { width: 18px; height: 18px; }
.mm-uebergang.art-abtippen, .mm-uebergang.art-muendlich { border-left: 2.5px dashed var(--bruch); color: var(--bruch-ink); }
.mm-uebergang.art-ki { border-left-color: var(--ki); }
.mm-uebergang em { color: var(--grenze); font-weight: 700; }
@media (max-width: 900px) {
  .mm-haupt { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow-y: auto; padding: 14px; gap: 14px; }
  .mm-frage { padding: 22px 20px 18px; overflow: visible; }
  .mm-wahl.arten, .mm-wahl.drei { grid-template-columns: repeat(2, 1fr); }
  .mm-weg { overflow: visible; }
}
@media (max-width: 520px) { .mm-wahl.arten, .mm-wahl.drei, .mm-wahl.zwei, .mm-wahl.notizen { grid-template-columns: 1fr; } .mm-gross { font-size: 21px; } }