/**
 * FWT Timeline-Generator
 * Datei: tools/timeline-generator/assets/timeline-generator.css
 * Zweck: Aussehen des Tabellen-Editors
 *
 * Stand: 2026-10-11
 * Auf schmalen Bildschirmen scrollt die Tabelle waagerecht (tl-scroll).
 * Wichtig: .tl-scroll ist "position: relative", sonst entkommt der unsichtbare
 * Hilfstext (.tl-sr) dem Scroll-Bereich und macht die ganze Seite breiter.
 */
.tl-editor-wrap { margin-bottom: 1.5rem; min-width: 0; max-width: 100%; }
.tl-editor-title { margin: 0 0 .5rem; }
.tl-editor-wrap code { white-space: normal; overflow-wrap: anywhere; }

.tl-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #d3dae3; border-radius: .75rem; background: #fff; padding: .5rem; }
.tl-table { border-collapse: collapse; width: 100%; min-width: 78rem; }
.tl-th { position: relative; text-align: left; font-size: .8rem; font-weight: 700; padding: .25rem .25rem; color: #3f4a5a; white-space: nowrap; }
.tl-td { padding: .2rem .25rem; vertical-align: top; }
.tl-td--start, .tl-td--end { width: 9rem; }
.tl-td--title { width: 14rem; } .tl-td--text { width: 20rem; }
.tl-td--link, .tl-td--img { width: 12rem; } .tl-td--alt { width: 12rem; }
.tl-td--cat { width: 7rem; } .tl-td--act { width: 6.5rem; }

.tl-input { box-sizing: border-box; width: 100%; min-width: 0; padding: .45rem .5rem; border: 1px solid #aeb8c6; border-radius: .4rem; font: inherit; font-size: .92rem; background: #fff; color: #1c2333; }
.tl-input:focus { outline: 3px solid #0f766e; outline-offset: 1px; }
.tl-input[aria-invalid="true"] { border-color: #9b1c1c; }
.tl-hint { display: block; min-height: 1.1rem; margin-top: .15rem; font-size: .75rem; color: #3f4a5a; }
.tl-hint--bad { color: #9b1c1c; font-weight: 600; }

.tl-tools { display: flex; gap: .25rem; }
.tl-btn { min-width: 2.25rem; min-height: 2.25rem; border: 1px solid #aeb8c6; border-radius: .4rem; background: #f3f5f8; color: #1c2333; font: inherit; cursor: pointer; }
.tl-btn:hover { background: #e6ebf1; }
.tl-btn:focus-visible { outline: 3px solid #0f766e; outline-offset: 1px; }
.tl-btn--del { color: #9b1c1c; }
.tl-btn--add { padding: .35rem .8rem; font-weight: 600; }
.tl-addbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: .75rem; }
.tl-count { font-size: .85rem; color: #4a5565; }

.tl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tl-msg { margin-top: .5rem; }

/* Gleiche Korrekturen wie beim Preislisten-Generator: nichts breiter als der Bildschirm */
.gk-layout--stacked > *, .gk-layout--stacked .gk-controls, .gk-layout--stacked .gk-card { min-width: 0; max-width: 100%; }
.gk-code, .gk-code pre { max-width: 100%; overflow-x: auto; }