/* kata – Kanban-Tafeln (Job 197). Farben kommen aus app.css, Menü, Dialog und die Knöpfe
   „‹ Listen" / „⋯" aus checkliste.css – kein zweiter Farbsatz. Alles hier hängt an `.kb…`.
   ⚠️ Eingabefelder mit `font-size: 1rem`: darunter zoomt iOS beim Antippen in die Seite.
   ⚠️ `touch-action: none` NUR am Breite-Anfasser (`.kb-breite`) – an Karte oder Spaltenkopf
   liesse sich die Tafel am Handy nicht mehr rollen. */

.kb { display: flex; flex-direction: column; height: 100%; -webkit-tap-highlight-color: transparent; }

.kb-kopf {
  flex: 0 0 auto; display: flex; align-items: center; gap: .3rem;
  padding: .45rem .5rem; border-bottom: 1px solid var(--linie);
}
.kb-titel {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: .3rem .25rem;
  font-size: 1.15rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-eingabe {
  font: inherit; font-size: 1rem; color: var(--text); box-sizing: border-box;
  background: var(--grund); border: 1px solid var(--gitter); border-radius: .35rem; padding: .3rem .4rem;
}
input.kb-titel { font-size: 1.15rem; font-weight: 600; }

.kb-mehr {
  flex: 0 0 auto; width: 2rem; height: 2rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: .35rem; color: var(--leise);
}
.kb-mehr svg circle { fill: currentColor; stroke: none; }
.kb-klapp {
  flex: 0 0 auto; width: 2rem; height: 2rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: .35rem; color: var(--leise);
}

/* ---- Die Tafel rollt seitlich, jede Spalte in sich (Titel und Fuss bleiben stehen) ---- */
.kb-rollbahn {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: flex-start; gap: .6rem; padding: .6rem .75rem;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding: 0 .75rem;
}
.kb-rollbahn.zieht { scroll-snap-type: none; }

/* Die Breite steht inline (gerätelokal, kanban.js); `max-width` hält sie im Schirm, auch wenn das
   Fenster schmaler wird. */
.kb-spalte {
  position: relative; flex: 0 0 auto; box-sizing: border-box;
  max-width: calc(100% - .5rem); max-height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--karte); border: 1px solid var(--linie); border-radius: .5rem;
  scroll-snap-align: start;
}
.kb-spalte-kopf {
  position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: .25rem;
  min-height: 2.6rem; padding: .2rem 1.6rem .2rem .7rem; border-bottom: 1px solid var(--linie);
  cursor: grab; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.kb-spalte-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
input.kb-spalte-name { width: 100%; font-weight: 600; }
.kb-zahl { color: var(--leise); font-size: .8rem; font-variant-numeric: tabular-nums; }

/* Die feste Palette (wie in sta). Gelb braucht dunkle Schrift. */
.kb-spalte-kopf[data-farbe] { color: #fff; border-bottom-color: transparent; }
.kb-spalte-kopf[data-farbe] .kb-zahl, .kb-spalte-kopf[data-farbe] .kb-mehr { color: rgba(255, 255, 255, .85); }
.kb-spalte-kopf[data-farbe="rot"] { background: #a8423f; }
.kb-spalte-kopf[data-farbe="gruen"] { background: #3f7a4e; }
.kb-spalte-kopf[data-farbe="gelb"] { background: #d8b545; color: #1d1d1d; }
.kb-spalte-kopf[data-farbe="gelb"] .kb-zahl, .kb-spalte-kopf[data-farbe="gelb"] .kb-mehr { color: rgba(0, 0, 0, .7); }
.kb-spalte-kopf[data-farbe="blau"] { background: #3d66a8; }
.kb-spalte-kopf[data-farbe="orange"] { background: var(--akzent); }

.kb-karten {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain;
  display: flex; flex-direction: column; gap: .4rem; padding: .45rem;
}
.kb-spalte-fuss { position: relative; flex: 0 0 auto; height: 1.7rem; border-top: 1px solid var(--linie); color: var(--leise); }

/* Der Breite-Anfasser: oben im Kopf, unten im Fuss, je am rechten Rand. */
.kb-breite {
  position: absolute; top: 0; right: 0; bottom: 0; width: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: ew-resize;
}
.kb-breite::after {
  content: ""; width: 4px; height: .95rem; opacity: .5;
  border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
}

/* ---- Karte ---- */
.kb-karte {
  position: relative; flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 .2rem;
  padding: .35rem .15rem .35rem .6rem;
  background: var(--grund); border: 1px solid var(--linie); border-radius: .4rem;
  cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.kb-karte-text {
  flex: 1 1 0; min-width: 0; padding: .25rem 0;
  font-size: 1rem; line-height: 1.3; white-space: pre-wrap; overflow-wrap: anywhere;
}
.kb-karte.erledigt .kb-karte-text { color: var(--leise); text-decoration: line-through; }
/* Job 211: die Karte, deren „⋯"-Menü gerade offen ist (wie in den Listen). */
.kb-karte.menue-offen { background: rgba(180, 104, 47, .28); border-color: var(--akzent); }
.kb-karte-zeichen { flex: 0 0 100%; display: flex; gap: .4rem; padding-bottom: .1rem; color: var(--akzent-hell); }
.kb-zeichen-notiz { display: inline-flex; }
.kb-zeichen-notiz svg { width: 14px; height: 14px; fill: currentColor; }
.kb-karte.bearbeitet { padding: .25rem; cursor: auto; }
.kb-karte-eingabe { width: 100%; resize: none; overflow: hidden; line-height: 1.3; }
.kb-leer { margin: .2rem .3rem; font-size: .85rem; color: var(--leise); }

.kb-neue-spalte {
  flex: 0 0 auto; padding: .6rem .9rem; font-size: 1rem; color: var(--leise);
  background: none; border: 1px dashed var(--linie); border-radius: .5rem; scroll-snap-align: start;
}

/* Archiv: gestrichelt und blass – eine Anzeige, keine Spalte wie die anderen. */
.kb-archiv { background: transparent; border-style: dashed; }
.kb-archiv .kb-spalte-kopf { cursor: default; color: var(--leise); }
.kb-archiv .kb-karte { opacity: .8; }

/* ---- Ziehen ---- */
.kb-spalte.kb-ziel { border-color: var(--akzent-hell); }
.kb-karte.zieht, .kb-spalte.zieht { opacity: .35; }
.kb-strich {
  position: absolute; left: .45rem; right: .45rem; height: 3px; margin-top: -1.5px; z-index: 2;
  background: var(--akzent-hell); border-radius: 2px; pointer-events: none;
}
.kb-strich--spalte { left: auto; right: auto; top: .6rem; bottom: .6rem; width: 3px; height: auto; margin: 0 0 0 -1.5px; }
.kb-strich[hidden] { display: none; }
.kb-schwebe {
  position: fixed; z-index: 40; pointer-events: none; margin: 0; box-sizing: border-box;
  border: 1px solid var(--akzent); border-radius: .45rem; box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
  transform: rotate(1.5deg);
}
.kb-schwebe.kb-spalte-kopf:not([data-farbe]) { background: var(--karte); }
body.kb-zieht, body.kb-zieht * { -webkit-user-select: none; user-select: none; cursor: grabbing; }
body.kb-breitezieht, body.kb-breitezieht * { -webkit-user-select: none; user-select: none; cursor: ew-resize; }

/* ---- Kartendetails ---- */
.kb-register { display: flex; gap: .2rem; border-bottom: 1px solid var(--linie); }
.kb-reiter {
  padding: .4rem .8rem; font-size: .95rem; color: var(--leise);
  background: none; border: 0; border-bottom: 2px solid transparent;
}
.kb-reiter[aria-selected="true"] { color: var(--text); border-bottom-color: var(--akzent); }
.kb-feld { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--leise); }
.kb-details-titel {
  width: 100%; box-sizing: border-box; resize: none; overflow: hidden;
  font: inherit; font-size: 1rem; line-height: 1.3; color: var(--text);
  background: var(--grund); border: 1px solid var(--gitter); border-radius: .35rem; padding: .4rem .5rem;
}

/* ---- Zeichen auf der Karte (Etappe B) ---- */
.kb-karte-zeichen { align-items: center; gap: .7rem; color: var(--leise); font-size: .8rem; }
.kb-zeichen-notiz { color: var(--akzent-hell); }
.kb-zeichen-liste { display: inline-flex; align-items: center; gap: .2rem; font-variant-numeric: tabular-nums; }
.kb-zeichen-liste svg { width: 14px; height: 14px; }

/* ---- Kartendetails: Blöcke (Etappe B) ---- */
.kb-dlg { max-height: 94vh; overflow-y: auto; }
/* Handy (Jogi 14.9.): die Kartendetails nehmen gleich die ganze Schirmhöhe ein. Keine Knopfzeile
   unten – geschlossen wird über das ✕ (Schritt 13). */
@media (max-width: 600px) {
  .dlg.kb-dlg { height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .kb-dlg > form { box-sizing: border-box; min-height: 100%; }
}
.kb-bloecke { position: relative; display: flex; flex-direction: column; gap: .5rem; }
.kb-block {
  position: relative; box-sizing: border-box;
  background: var(--grund); border: 1px solid var(--linie); border-radius: .45rem;
  -webkit-touch-callout: none;
}
.kb-block--text { display: flex; align-items: flex-start; gap: .2rem; padding: .15rem .15rem .15rem 0; }
.kb-block--text.bearbeitet { display: block; padding: .35rem; }
.kb-md { flex: 1 1 auto; min-width: 0; padding: .35rem .6rem; min-height: 1.6rem; cursor: text; overflow-wrap: anywhere; }
.kb-md .kb-leer { margin: 0; }
.kb-block-feld {
  display: block; width: 100%; box-sizing: border-box; min-height: 5rem; resize: none; overflow: hidden;
  font: inherit; font-size: 1rem; line-height: 1.35; color: var(--text);
  background: var(--karte); border: 1px solid var(--gitter); border-radius: .35rem; padding: .4rem .5rem;
}
.kb-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-bottom: .35rem; }
.kb-leiste-knopf {
  min-width: 2.2rem; height: 2.2rem; padding: 0 .4rem; font-size: 1rem; color: var(--text);
  background: var(--karte); border: 1px solid var(--linie); border-radius: .35rem;
}
.kb-leiste-knopf.fett { font-weight: 700; }
.kb-leiste-knopf.kursiv { font-style: italic; }
.kb-leiste-knopf.durch { text-decoration: line-through; }
.kb-leiste-knopf.farbe { color: #fb8c00; font-weight: 700; }
.kb-leiste-knopf.marker { background: #fdd83566; font-weight: 700; }
.kb-leiste-fertig {
  margin-left: auto; height: 2.2rem; padding: 0 .8rem; font-size: .95rem; color: #fff;
  background: var(--akzent); border: 1px solid var(--akzent); border-radius: .35rem;
}

/* Listen-Block: der Kopf ist ein Balken wie in der Checkliste, zugeklappt kräftiger. */
.kb-block--liste { padding: .2rem; }
.kb-block-kopf {
  display: flex; align-items: center; gap: .35rem; min-height: 2.4rem; padding: 0 .1rem 0 .6rem;
  background: #33373d; border-radius: .35rem; cursor: pointer; -webkit-user-select: none; user-select: none;
}
.kb-block.zu .kb-block-kopf { background: #3d4249; }
.kb-block-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.kb-block-bearbeiten {
  flex: 0 0 auto; padding: .25rem .55rem; font-size: .88rem; color: var(--akzent-hell);
  background: none; border: 1px solid var(--linie); border-radius: .35rem;
}
.kb-block-liste { padding: .15rem 0 0; }

/* Zugeklappt (Jogi 14.9.): jeder Block nur noch sein Kopf – der Textblock zeigt die erste Zeile.
   ⚠️ Beim Ziehen (`.kb-bloecke.zug`) klappen ALLE Blöcke per Klasse zu, nie per Neuzeichnen; die
   Schwebe ist eine Kopie ausserhalb von `.kb-bloecke` und braucht darum ihre eigenen Selektoren. */
.kb-block--text > .kb-block-kopf { display: none; flex: 1 1 auto; }
.kb-block--text > .kb-block-kopf .kb-block-name { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-block--text.zu, .kb-bloecke.zug > .kb-block--text, .kb-schwebe--block.kb-block--text { align-items: center; padding: .2rem; }
.kb-block--text.zu > .kb-block-kopf, .kb-bloecke.zug > .kb-block--text > .kb-block-kopf,
.kb-schwebe--block > .kb-block-kopf { display: flex; }
.kb-block--text.zu > .kb-md, .kb-block--text.zu > .kb-klapp,
.kb-bloecke.zug > .kb-block > .kb-md, .kb-bloecke.zug > .kb-block > .kb-klapp, .kb-bloecke.zug > .kb-block > .kb-block-liste,
.kb-schwebe--block > .kb-md, .kb-schwebe--block > .kb-klapp, .kb-schwebe--block > .kb-block-liste { display: none; }
.kb-block-plus {
  align-self: flex-start; padding: .45rem .8rem; font-size: 1rem; color: var(--leise);
  background: none; border: 1px dashed var(--linie); border-radius: .45rem;
}
/* ⚠️ Doppelte Klasse nötig: `.kb-block { position: relative }` steht NACH `.kb-schwebe`, gleich stark,
   und nähme der Schwebe sonst das `fixed` – sie läge dann IM Dialog, der Dialog würde höher und
   verschöbe alles unter dem Finger (erste Fassung: Ablegen traf den falschen Block). */
.kb-block.kb-schwebe { position: fixed; margin: 0; max-height: 7rem; overflow: hidden; background: var(--grund); }
.kb-frage { margin: 0; line-height: 1.4; }

/* Die Liste gross: ganzer Schirm, darin die Checkliste wie gewohnt. */
.dlg.kb-gross {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  border-radius: 0; background: var(--grund); overflow-y: auto; box-shadow: none;
}
.kb-gross-inhalt { padding: 0 .3rem; }

/* ---- Markdown im Textblock (Klassen aus md.js; Farben wie in sta, „satt") ---- */
.kb-md p { margin: 0; }
.kb-md .md-blank { display: block; }
.kb-md h1, .kb-md h2, .kb-md h3, .kb-md h4, .kb-md h5, .kb-md h6 { margin: .3rem 0 .15rem; line-height: 1.25; }
.kb-md h1 { font-size: 1.3rem; } .kb-md h2 { font-size: 1.15rem; } .kb-md h3 { font-size: 1.05rem; }
.kb-md h4, .kb-md h5, .kb-md h6 { font-size: 1rem; }
/* app.css färbt den ersten Buchstaben JEDER h2 im Dialog orange (Dialog-Titel) – im Text nicht. */
.kb-md h2::first-letter { color: inherit; }
.kb-md ul, .kb-md ol { margin: .2rem 0; padding-left: 1.3rem; }
.kb-md li.task { list-style: none; margin-left: -1.2rem; }
.kb-md blockquote { margin: .3rem 0; padding: .1rem .7rem; border-left: 3px solid var(--leise); color: var(--leise); }
.kb-md hr { border: 0; border-top: 1px solid var(--linie); margin: .6rem 0; }
.kb-md code { font-family: ui-monospace, Menlo, monospace; font-size: .88em; background: var(--karte); border: 1px solid var(--linie); border-radius: 4px; padding: 0 .3rem; }
.kb-md pre { background: var(--karte); border: 1px solid var(--linie); border-radius: .4rem; padding: .5rem .6rem; overflow-x: auto; }
.kb-md pre code { border: 0; background: none; padding: 0; }
.kb-md table { border-collapse: collapse; margin: .3rem 0; display: block; overflow-x: auto; }
.kb-md th, .kb-md td { border: 1px solid var(--linie); padding: .2rem .5rem; }
.kb-md a { color: #9cc2ff; }
.kb-md img { max-width: 100%; }
.kb-md .md-fg-r, .kb-md .md-bg-r { --mdc: #e53935; --mdcb: #e5393566; }
.kb-md .md-fg-o, .kb-md .md-bg-o { --mdc: #fb8c00; --mdcb: #fb8c0066; }
.kb-md .md-fg-y, .kb-md .md-bg-y { --mdc: #fdd835; --mdcb: #fdd83566; }
.kb-md .md-fg-g, .kb-md .md-bg-g { --mdc: #00c853; --mdcb: #00c85366; }
.kb-md .md-fg-b, .kb-md .md-bg-b { --mdc: #1e88e5; --mdcb: #1e88e566; }
.kb-md .md-fg { color: var(--mdc); }
.kb-md .md-bg { background: var(--mdcb); color: #f3efe4; border-radius: 3px; padding: 0 .1em; }
.kb-md s.md-s { text-decoration: line-through; }
.kb-md u.md-u { text-decoration: underline; text-underline-offset: 2px; }
.kb-md u.md-uu { text-decoration: underline double; text-underline-offset: 3px; }

@media (hover: hover) {
  .kb-mehr:hover { background: #ffffff14; }
  .kb-block-plus:hover { color: var(--akzent-hell); border-color: var(--akzent-hell); }
  .kb-karte:hover { border-color: var(--gitter); }
  .kb-neue-spalte:hover { color: var(--akzent-hell); border-color: var(--akzent-hell); }
}