/* Turingmaschinen-Simulator (Thema Berechenbarkeit). */
.tm-sim { --tm-accent: #2f6db5; --tm-border: #cbd5dd; --tm-soft: #eef3f8; --tm-head: #f6b73c;
  --tm-next: #e6f0fb; --tm-last: #fff4d6; --tm-error: #a12b2b; min-width: 0; }
.tm-sim [hidden] { display: none !important; }
.tm-muted { color: #667078; font-size: .9rem; }
.tm-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.tm-bar h4 { margin: 0 .5rem 0 0; }
.tm-bar label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .9rem; }
.tm-examples { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tm-center { margin-left: auto; }

.tm-machine { background: var(--tm-soft); border: 1px solid var(--tm-border); border-radius: 8px;
  padding: .6rem .8rem .8rem; }
.tm-tape-input { width: 12rem; max-width: 50vw; padding: .35rem .5rem; border: 1.5px solid var(--tm-border);
  border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .1em; }

/* Band: Felder 40px breit, wie CELL in tm-sim.js */
.tm-tape { display: flex; align-items: stretch; gap: .3rem; margin: .4rem 0; }
.tm-cells { flex: 1; min-width: 0; display: flex; overflow: hidden; touch-action: pan-y; user-select: none;
  border-top: 2px solid #8796a3; border-bottom: 2px solid #8796a3; background: #fff; }
.tm-scroll { flex: none; width: 2rem; border: 1px solid var(--tm-border); border-radius: 6px; background: #fff;
  font-size: 1.3rem; cursor: pointer; color: #34474f; }
.tm-scroll:hover { background: #f4f7f8; }
.tm-cell { flex: none; width: 40px; padding: 0; border: 0; border-right: 1px solid #d5dde3; background: none;
  display: flex; flex-direction: column; align-items: center; cursor: default; font: inherit; color: inherit; }
.tm-cell.tm-editable { cursor: pointer; }
.tm-cell.tm-editable:hover .tm-sym { background: #f1f6fb; }
.tm-cell:focus-visible { outline: 2px solid var(--tm-accent); outline-offset: -2px; }
.tm-sym { width: 100%; height: 40px; display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.25rem; font-weight: 700; }
.tm-blank .tm-sym { color: #b8c2ca; }
.tm-head .tm-sym { background: #fff3d1; box-shadow: inset 0 0 0 2px var(--tm-head); }
.tm-marker { height: 2.6rem; display: flex; flex-direction: column; align-items: center; background: var(--tm-soft); width: 100%; }
.tm-arrow { color: var(--tm-head); font-size: 1.1rem; line-height: 1.1; }
.tm-state { font-size: .8rem; font-weight: 700; background: #34474f; color: #fff; border-radius: 4px; padding: 0 .3rem;
  max-width: 38px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tm-controls { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .3rem; }
.tm-controls .btn:disabled { opacity: .45; cursor: not-allowed; }
.tm-speed { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: #54636c; margin-left: .4rem; }
.tm-speed input { width: 7rem; }
.tm-status { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: .5rem; font-size: .95rem; }
.tm-message { min-height: 1.4rem; margin-top: .3rem; font-size: .92rem; }
.tm-message-error { color: var(--tm-error); font-weight: 600; }
.tm-message-warn { color: #8a5a00; font-weight: 600; }
.tm-message-done { color: #1d6b3a; font-weight: 600; }
.tm-message-info { color: #34474f; }
.tm-quick { margin-left: .6rem; }

/* Transitionstabelle */
.tm-program { margin-top: 1rem; }
.tm-table-wrap { overflow-x: auto; }
.tm-rules, .tm-log { border-collapse: collapse; font-size: .92rem; }
.tm-rules th, .tm-rules td, .tm-log th, .tm-log td { border: 1px solid var(--tm-border); padding: .2rem .35rem; text-align: center; }
.tm-rules th, .tm-log th { background: #f4f7f8; font-weight: 600; }
.tm-rules select, .tm-rules input { font: inherit; padding: .15rem .2rem; border: 1px solid #b9c4cc; border-radius: 4px; background: #fff; }
.tm-rules select:disabled, .tm-rules input:disabled, .tm-state-input:disabled { background: transparent; border-color: transparent;
  color: inherit; opacity: 1; -webkit-appearance: none; appearance: none; text-align: center; }
.tm-state-input { width: 3.6rem; text-align: center; font: inherit; padding: .15rem .2rem; border: 1px solid #b9c4cc; border-radius: 4px; }
.tm-nr { color: #667078; font-variant-numeric: tabular-nums; }
/* iPad: Eingaben ab 16 px, sonst zoomt Safari beim Antippen */
.tm-sim input:not([type=range]), .tm-sim select, .tm-sim textarea, .tma-block .tma-eingabe { font-size: 16px; }
.tm-rule-next td { background: var(--tm-next); }
.tm-rule-last td { background: var(--tm-last); }
.tm-rule-last .tm-nr::before { content: "▶ "; color: var(--tm-head); }
.tm-rule-error td { background: #fbeaea; }
.tm-delete { border: 0; background: none; color: #8a9aa5; cursor: pointer; font-size: 1rem; }
.tm-delete:hover { color: var(--tm-error); }
.tm-problems { margin: .4rem 0; padding-left: 1.2rem; font-size: .9rem; }
.tm-problem-error { color: var(--tm-error); }
.tm-problem-warn { color: #8a5a00; }
.tm-text { width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border: 1.5px solid var(--tm-border); border-radius: 6px; padding: .5rem; margin: .4rem 0; }

/* Ausklappbare Bereiche */
.tm-details { margin-top: .8rem; border: 1px solid var(--tm-border); border-radius: 6px; padding: .4rem .7rem; background: #fff; }
.tm-details summary { cursor: pointer; font-weight: 600; }
.tm-log td.tm-log-tape { text-align: left; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .15em; }
.tm-log-head { text-decoration: underline; text-decoration-thickness: 2px; background: #fff3d1; font-weight: 700; }

/* Zustandsdiagramm */
.tm-diagram, .tm-figure { overflow-x: auto; }
.tm-figure { margin: 1rem 0; text-align: center; }
.tm-figure figcaption { font-size: .85rem; color: #667078; }
.tm-diagram-svg { max-width: 100%; height: auto; max-height: 460px; }
.tm-d-edge { fill: none; stroke: #54636c; stroke-width: 1.5; }
.tm-d-head { fill: #54636c; }
.tm-d-state { fill: #fdf3b5; stroke: #8a7a2a; stroke-width: 1.5; }
.tm-d-current { fill: #f6b73c; }
.tm-d-final { fill: none; stroke: #8a7a2a; stroke-width: 1.3; }
.tm-d-start { fill: #fff; stroke: #54636c; stroke-width: 1.3; }
.tm-d-name { font-size: 14px; font-weight: 700; fill: #26333a; }
.tm-d-label { font-size: 12px; fill: #26333a; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.tm-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; margin-top: .8rem; }
.tm-library { margin-top: 0; flex: 1; min-width: 16rem; }
.tm-lib-name { padding: .3rem .5rem; border: 1.5px solid var(--tm-border); border-radius: 6px; }
.tm-result { margin-top: .5rem; }
.tm-tests { list-style: none; padding: 0; margin: .4rem 0; display: grid; gap: .3rem; font-size: .92rem; }
.tm-test-ok { color: #1d6b3a; }
.tm-test-bad { color: var(--tm-error); }

@media (max-width: 600px) {
  .tm-center { margin-left: 0; }
  .tm-speed input { width: 5rem; }
}

/* Kapiteltexte des Themas */
.tm-portraits figure { flex: 0 1 150px; text-align: center; }
.tm-portraits img { max-height: 190px; margin: 0 auto; border-radius: 4px; }
.tm-portraits figcaption { font-size: .85rem; color: #54636c; }
.info-content .material-table { border-collapse: collapse; margin: .8rem 0; font-size: .92rem; }
.info-content .material-table th, .info-content .material-table td { border: 1px solid #cbd5dd; padding: .25rem .6rem; text-align: center; }
.info-content .material-table th { background: #f4f7f8; }
.info-content .material-table caption { caption-side: bottom; font-size: .85rem; color: #667078; padding-top: .3rem; }
.material-details { margin: 1rem 0; border: 1px solid #cbd5dd; border-radius: 6px; padding: .4rem .8rem; background: #fafbfc; }
.material-details summary { cursor: pointer; font-weight: 600; }

/* Entwurfszeilen: erst mit Haken Teil der Maschine */
.tm-rule-draft td { background: #fafbfc; }
.tm-rule-draft td:first-child { color: #8a9aa5; font-style: italic; }
.tm-rule-draft select, .tm-rule-draft input { border-style: dashed; }
.tm-row-actions { white-space: nowrap; }
.tm-confirm { border: 1.5px solid #1d6b3a; background: #fff; color: #1d6b3a; border-radius: 4px; cursor: pointer;
  font-weight: 700; padding: 0 .35rem; margin-right: .2rem; }
.tm-confirm:hover { background: #e7f4ec; }
.tm-confirmed { color: #1d6b3a; opacity: .5; margin-right: .3rem; font-weight: 700; }
.tm-problem-info { color: #54636c; list-style: '→ '; }
.tm-alphabet-input { width: 7rem; font: inherit; padding: .15rem .3rem; border: 1px solid #b9c4cc; border-radius: 4px; }
.tm-alphabet-input:disabled { width: auto; border-color: transparent; background: transparent; padding: 0; }
.tm-log-run td { background: #eef3f8; font-weight: 600; text-align: left; }
.tm-alphabet-text { font-weight: 600; font-size: .9rem; }

/* Ablauftabelle von Hand (tm_ablauf, tm-ablauf.js): Felder zum Antippen, darunter die Kopfmarke */
.tma-block { --tm-accent: #2f6db5; --tm-border: #cbd5dd; --tm-soft: #eef3f8; --tm-head: #f6b73c;
  --tm-next: #e6f0fb; --tm-last: #fff4d6; --tm-error: #a12b2b; min-width: 0; }
.tma-programm { margin: .4rem 0 .6rem; }
.tma-matrix td, .tma-matrix th { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.tma-legende { margin: .3rem 0 .5rem; }
.tma-tabelle td { vertical-align: middle; }
.tma-band { display: inline-flex; flex-direction: column; gap: 2px; padding: 2px; border-radius: 4px; }
.tma-reihe { display: flex; gap: 2px; }
.tma-zeichen { width: 32px; height: 34px; padding: 0; border: 1px solid #8796a3; border-radius: 3px; background: #fff;
  font: 700 16px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #26333a; cursor: pointer; }
.tma-zeichen.tma-blank { color: #b8c2ca; }
.tma-zeichen.tma-unterm-kopf { background: #fff3d1; box-shadow: inset 0 0 0 2px var(--tm-head); }
.tma-kopf { width: 32px; height: 22px; padding: 0; border: 1px dashed #c5ccd1; border-radius: 3px; background: transparent;
  color: var(--tm-head); font-size: 15px; line-height: 1; cursor: pointer; }
.tma-kopf.tma-kopf-hier { border: 1px solid var(--tm-head); background: #fff8e6; }
.tma-zeichen:focus-visible, .tma-kopf:focus-visible { outline: 2px solid var(--tm-accent); outline-offset: 1px; }
.tma-start .tma-zeichen, .tma-start .tma-kopf { cursor: default; }
.tma-start .tma-kopf:not(.tma-kopf-hier) { border-color: transparent; }
.tma-start td { background: var(--tm-soft); }
.tma-eingabe { font-size: 16px; width: 4.2em; padding: .25rem .35rem; border: 1.5px solid var(--tm-border); border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; }
.tma-regel { width: 3.2em; }
.tma-falsch { outline: 3px solid var(--tm-error); outline-offset: 1px; }
.tma-zeile-falsch .tm-nr { color: var(--tm-error); font-weight: 700; }
.tma-aktionen { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.tma-aktionen .btn:disabled { opacity: .45; cursor: not-allowed; }

/* Beispiel einer Ablauftabelle im Infotext (turing_materials.ablauf_html) */
.tm-ablauf-band { white-space: nowrap; }
.tm-ablauf-feld { display: inline-block; width: 1.5em; text-align: center; border: 1px solid #cbd5dd; margin-right: -1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; }
.tm-ablauf-kopf { background: #fff3d1; box-shadow: inset 0 0 0 2px #f6b73c; }

/* Paritaetsgitter (Zusatzmodul Fehlerkorrektur) */
.tm-gitter td { width: 2.2em; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; }
.tm-gitter .tm-pruefbit { background: #eef3f8; color: #2f6db5; }