/* =====================================================================
   Tafelmodus (Phase 3) - Vollbild fuer den Beamer.
   Grosse, ruhige Folien; hell als Standard (Beamer in hellen Raeumen
   waschen dunkle Folien aus), dunkel per H. Wendungen "kursiv und farbig"
   wie in Buergels Kasten 1. Noch nicht aufgedeckte Zeilen bleiben
   unsichtbar an ihrem Platz - so springt beim Aufdecken nichts.
   ===================================================================== */
html.tafel-an { overflow: hidden; }
/* Die variable Serifenschrift waehlt bei grossen Graden von selbst ihren
   "Display"-Zuschnitt - eng und kontrastreich. Fuer Ueberschriften gewollt,
   fuer Lesetext auf dem Beamer nicht: dort normal und ruhig. */
.tafel .tf-sit-a, .tafel .tf-txt, .tafel .tf-lk-v, .tafel .tf-frage { font-optical-sizing: none; font-variation-settings: 'opsz' 20; letter-spacing: 0; }
.tafel {
  --tf-bg: #fbf8f1; --tf-ink: #1c1814; --tf-soft: #51483d; --tf-faint: #a39889; --tf-akzent: #a2562a; --tf-mark: #a2562a; --tf-linie: #e5dccb; --tf-zweit: #5e4330;
  position: fixed; inset: 0; z-index: 300; background: var(--tf-bg); color: var(--tf-ink);
  display: flex; flex-direction: column; outline: none; cursor: default;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
  animation: fadeIn .2s ease;
}
.tafel.tafel-dunkel { --tf-bg: #1f1913; --tf-ink: #f3ecdf; --tf-soft: #cbbfa9; --tf-faint: #85786a; --tf-akzent: #e8a679; --tf-mark: #f2b48a; --tf-linie: #3a2f25; --tf-zweit: #d8bc93; }
.tf-buehne { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 5vh 6vw 9vh; min-height: 0; }
.tf-folie { width: 100%; max-width: 1400px; max-height: 100%; }
.tf-kicker { font-family: var(--mono); font-size: clamp(12px, 1.25vw, 20px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tf-akzent); margin-bottom: 2.2vh; }
.tf-titel { font-family: var(--serif); font-weight: 800; font-size: clamp(2.6rem, 7vw, 7.5rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--tf-ink); }
.tf-titel.tf-ende { text-align: center; margin-bottom: 2vh; }
.tf-ende ~ .tf-kicker { text-align: center; }

.tf-sit { margin-top: 5vh; display: grid; gap: 1.6vh; }
.tf-sit-z { display: grid; grid-template-columns: 9ch 1fr; gap: 2vw; align-items: baseline; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.tf-sit-z.an { opacity: 1; transform: none; }
.tf-sit-f { font-family: var(--serif); font-weight: 700; font-size: clamp(1.4rem, 3vw, 3rem); color: var(--tf-zweit); }
.tf-sit-a { font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 2.6vw, 2.6rem); line-height: 1.25; color: var(--tf-ink); }

.tf-dialog { display: grid; gap: 1.1vh; font-family: var(--serif); font-size: min(3vw, 4.1vh); line-height: 1.32; }
.tf-zeile { display: grid; grid-template-columns: 2.4ch 1fr; gap: 1.2vw; opacity: 0; transition: opacity .3s; }
.tf-zeile.an { opacity: 1; }
.tf-zeile.neu .tf-txt { animation: tfNeu .6s ease; }
@keyframes tfNeu { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.tf-sp { font-family: var(--mono); font-size: 0.62em; color: var(--tf-faint); padding-top: 0.32em; }
.tf-txt { color: var(--tf-soft); }
.tafel mark.tf-w { background: none; color: var(--tf-mark); font-style: italic; font-weight: 700; padding: 0 0.04em; border-bottom: 0.07em solid currentColor; }
.tf-kog .tf-txt { color: var(--tf-ink); }
.tf-ell { font-family: var(--serif); color: var(--tf-faint); font-size: 0.9em; padding-left: 3.6ch; }
.tf-frage { margin-top: 4vh; font-family: var(--serif); font-style: italic; font-size: min(2.8vw, 3.8vh); color: var(--tf-zweit); animation: tfNeu .5s ease; }
.tf-muster { margin-top: 2.5vh; display: grid; gap: 1vh; animation: tfNeu .5s ease; }
.tf-muster-z { font-family: var(--mono); font-size: min(2.6vw, 3.6vh); color: var(--tf-ink); border: 2px solid var(--tf-akzent); border-radius: 12px; padding: 1.2vh 1.6vw; display: inline-block; justify-self: start; }

.tf-form { display: flex; align-items: center; gap: 2vw; font-family: var(--serif); font-weight: 800; font-size: clamp(2.2rem, 6vw, 6.4rem); line-height: 1.05; letter-spacing: -0.015em; }
.tafel .tf-kz { width: 0.32em; height: 0.62em; border-width: 0.06em; border-color: var(--tf-zweit); flex: 0 0 auto; }
.tafel .tf-kz.kz-gebrauchsfertig { background: var(--tf-zweit); }
.tafel .tf-kz.kz-halbfertig { background: linear-gradient(to top, var(--tf-zweit) 50%, transparent 50%); }
.tafel .tf-kz.kz-unfertig { border-color: var(--tf-akzent); }
.tf-slot { margin-top: 1.4vh; font-family: var(--mono); font-size: min(1.9vw, 2.8vh); color: var(--tf-faint); }
.tf-lk { margin-top: 5vh; display: grid; gap: 2.4vh; }
.tf-lk-z { display: grid; grid-template-columns: minmax(10ch, 14ch) 1fr; gap: 2vw; align-items: baseline; animation: tfNeu .45s ease; }
.tf-lk-l { font-family: var(--mono); font-size: clamp(11px, 1.15vw, 18px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tf-faint); }
.tf-lk-v { font-family: var(--serif); font-size: min(3vw, 4.4vh); color: var(--tf-ink); line-height: 1.3; }
.tf-bsp .tf-lk-v { font-style: italic; color: var(--tf-soft); }

.tf-fort { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; display: flex; gap: 2px; }
.tf-fort span { flex: 1 1 0; background: var(--tf-linie); }
.tf-fort span.war { background: var(--tf-zweit); opacity: 0.55; }
.tf-fort span.jetzt { background: var(--tf-akzent); }
.tf-zaehler { position: absolute; left: 1.4rem; bottom: 1.1rem; font-family: var(--mono); font-size: 12px; color: var(--tf-faint); letter-spacing: 0.08em; }
.tf-knoepfe { position: absolute; right: 1rem; bottom: 0.9rem; display: flex; gap: 0.35rem; opacity: 0.35; transition: opacity .2s; }
.tafel:hover .tf-knoepfe, .tf-knoepfe:focus-within { opacity: 1; }
.tf-knoepfe button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--tf-linie); background: transparent; color: var(--tf-soft); font-size: 18px; cursor: pointer; }
.tf-knoepfe button:hover { color: var(--tf-akzent); border-color: var(--tf-akzent); }
@media (pointer: coarse) { .tf-knoepfe { opacity: 0.85; } .tf-knoepfe button { width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .tafel, .tf-zeile, .tf-sit-z, .tf-lk-z, .tf-frage, .tf-muster, .tf-zeile.neu .tf-txt { animation: none !important; transition: none !important; } }