/* Tafelbild (app/tafel.js) – Grundgestaltung für Unterrichtsmodus, Beamer und Lernbereich.
   Größen über --tf-fs (Schrift) steuerbar; der Beamer setzt größere Werte. */
.tf { --tf-fs: 16px; font-size: var(--tf-fs); line-height: 1.45; }
.tf-h { font-family: "League Spartan", system-ui, sans-serif; font-size: 1.35em; font-weight: 700; margin: .6em 0 .3em; line-height: 1.15; }
.tf-h:first-child { margin-top: 0; }
.tf-s { margin: .35em 0; }
.tf-w { display: inline-block; border-radius: .25em; padding: 0 .08em; }
.tf-w.tf-r { color: var(--rc); font-weight: 700; box-shadow: inset 0 -.14em 0 color-mix(in srgb, var(--rc) 45%, transparent); }
.tf-w[data-tk] { cursor: pointer; } .tf-w[data-tk]:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.tf-w.tf-sel { outline: 2px dashed currentColor; outline-offset: 1px; background: color-mix(in srgb, currentColor 8%, transparent); }
.tf-tabw { overflow-x: auto; margin: .4em 0 .6em; }
.tf-tab { border-collapse: collapse; }
.tf-tab td, .tf-tab th { border: 1.5px solid color-mix(in srgb, currentColor 30%, transparent); padding: .2em .7em; text-align: left; }
.tf-tab th { font-weight: 700; background: color-mix(in srgb, currentColor 7%, transparent); }
.tf-words { display: flex; flex-wrap: wrap; gap: .3em .5em; margin: .35em 0; }
.tf-wd { border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: .4em; padding: .05em .45em; }
.tf-leg { display: flex; flex-wrap: wrap; gap: .25em .9em; margin-top: .6em; font-size: .78em; opacity: .85; }
.tf-leg span { display: inline-flex; align-items: center; gap: .3em; color: var(--rc); font-weight: 600; }
.tf-leg i { width: .7em; height: .7em; border-radius: 50%; background: var(--rc); display: inline-block; }
/* Auswahl der Satzglieder (Unterrichtsmodus) */
.tf-roles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tf-role { border: 2px solid var(--rc, #a8a29e); color: var(--rc, inherit); background: transparent; border-radius: 99px; padding: 4px 11px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tf-role:hover, .tf-role:focus-visible { background: color-mix(in srgb, var(--rc, #a8a29e) 12%, transparent); }
.tf-role[disabled] { opacity: .45; cursor: default; }
/* Werkzeugleiste: Satzbau-Felder, TeKaMoLo, Wortarten, Lücke, Umstellen */
.tf-w.tf-tk { box-shadow: inset 0 -.18em 0 var(--tc); padding-bottom: .04em; }
.tf-w.tf-r.tf-tk { box-shadow: inset 0 -.18em 0 var(--tc); }
.tf-w.tf-wa { color: var(--wac); font-weight: 700; }
.tf-w.tf-gap { color: transparent; border-bottom: .12em solid currentColor; border-radius: 0; min-width: 2.5em; cursor: pointer; }
.tf-w.tf-gap { border-bottom-color: color-mix(in srgb, var(--tf-ink, #26221f) 70%, transparent); }
.tf-w.tf-gap.tf-open { color: inherit; }
.tf-w.tf-gapt { outline: .08em dashed color-mix(in srgb, currentColor 55%, transparent); outline-offset: .06em; }
.tf-fields { display: inline-grid; grid-template-columns: auto auto auto auto; gap: .25em; vertical-align: top; max-width: 100%; }
.tf-fc { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.tf-fl { font-size: .55em; font-weight: 600; opacity: .7; padding: 0 .3em; white-space: nowrap; }
.tf-fv { padding: .25em .5em; border-radius: .35em; background: color-mix(in srgb, currentColor 6%, transparent); box-shadow: inset 0 0 0 .06em color-mix(in srgb, currentColor 22%, transparent); }
.tf-f-v .tf-fv, .tf-f-se .tf-fv { background: color-mix(in srgb, #dc2626 13%, transparent); box-shadow: inset 0 0 0 .1em #b91c1c; font-weight: 700; }
.tf-fe .tf-fv { opacity: .45; }
.tf-mix { display: inline-flex; flex-wrap: wrap; gap: .3em; }
.tf-chip { border-radius: .4em; padding: .08em .5em; box-shadow: inset 0 0 0 .07em color-mix(in srgb, currentColor 35%, transparent); background: color-mix(in srgb, currentColor 5%, transparent); }
.tf-s.tf-su::after { content: " ↺"; font-size: .7em; opacity: .55; }
.tf-leg span.tf-leg-u i { height: .2em; border-radius: .1em; width: 1em; }
.tf-leg span.tf-leg-t i { border-radius: .2em; }
/* Werkzeugleiste und Auswahl */
.tf-pal { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tf-tab td:empty { min-width: 4.5em; height: 1.7em; }   /* Tabellen zum Ergänzen: leere Felder sichtbar groß */
/* Spalten-Reihe als Satz: Kästchen mit Beschriftung darüber (Satzglieder, Satzbau, TeKaMoLo, Wortarten) */
.tf-tab tr.tf-cr td { vertical-align: bottom; }
.tf-cb { position: relative; }
.tf-cb .tf-cv2 { display: inline-block; padding: .12em .5em; border-radius: .5em; border: 2px solid color-mix(in srgb, currentColor 22%, transparent); background: color-mix(in srgb, currentColor 5%, transparent); }
.tf-cb.tf-r .tf-cv2 { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 14%, transparent); }
.tf-cb.tf-tk .tf-cv2 { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, transparent); }
.tf-cb.tf-wa .tf-cv2 { color: var(--wac); }
.tf-cb.tf-cv .tf-cv2 { color: #b91c1c; font-weight: 700; }
.tf-cb .tf-cl { display: block; font-size: .5em; line-height: 1.2; opacity: .75; margin-bottom: .15em; white-space: nowrap; }
.tf-cb.tf-gap .tf-cv2 { color: transparent; border-style: dashed; }
.tf-cb.tf-sel .tf-cv2 { outline: 3px solid var(--brand, #fc4c00); outline-offset: 2px; }
/* Zwischenüberschrift und Bilder im Tafelbild */
.tf-h2 { font-size: .95em; opacity: .85; margin: .5em 0 .2em; }
.tf-img { margin: .4em 0; } .tf-img img { max-width: 100%; max-height: 260px; border-radius: 10px; display: block; } .tf-img figcaption { font-size: .7em; opacity: .7; margin-top: .2em; }
/* Satzbau-Felder: lange Sätze brechen zwischen den Feldern um, nicht mitten im Feld oder Wort */
.tf-fields { display: inline-flex !important; flex-wrap: wrap; gap: .25em .4em; }
.tf-fc { flex: 0 1 auto; }