/* ── tool.css — Charakter „Table Generator“ ───────────────────────────────────────────────────────────────────
   WAS:   Akzente (Blau · Mint · Bernstein = Tabelle/Fokus · Ausgabe · Import), das Hauptbild — das bearbeitbare Raster (Zellen sind
          Textfelder, Kopfzeile getönt, Spalten-/Zeilenköpfe kleben beim Scrollen) — die Werkzeugleiste, Format-Chips und Optionen.
   WARUM: Das Werkzeug lebt davon, dass man die Tabelle wie in einer Tabellenkalkulation direkt bearbeitet und sofort sieht, was
          herauskommt. Darum steht das Raster links groß, die Ausgabe rechts daneben; am Handy untereinander (Tabelle zuerst).
   LAUF 2 (27.10.): zwei Spalten Tabelle | Ausgabe (7fr/5fr, oben bündig), darunter die eingeklappten Kästen (.tg-unten, volle Breite), dann „Über dieses Tool“ (.tool-profil)
          und „Hilfe & Infos“. Kopf-Icon = Original-PNG auf neutralem Grund. Desktop- und Handy-Feinschliff in getrennten Medienblöcken (≥ 761 px / ≤ 760 px).
   WIE ÄNDERN: Akzente nur oben in :root (dunkel, hell per Medienabfrage UND data-thema — beide Blöcke gleich halten).
          Grundbausteine (Tafel, Chip, Segment, Feld, Kopier-Knopf, Toast) in ../_werk/werk.css — dort nichts tool-Eigenes.
          Klassen: .tg-grid (Raster) .tg-zelle (Zelltextfeld) .tg-sp/.tg-zn (Spalten-/Zeilenkopf) .tg-b (Leistenknopf) .tg-opt (Option). */
:root { --a1: #60a5fa; --a2: #34d399; --a3: #fbbf24; --a1-tinte: #06182e; }
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) { --a1: #1d4ed8; --a2: #047857; --a3: #b45309; --a1-tinte: #ffffff; } }
:root[data-thema="hell"] { --a1: #1d4ed8; --a2: #047857; --a3: #b45309; --a1-tinte: #ffffff; }

/* Raster der Seite: Tabelle | Ausgabe (Lauf 2: nur noch zwei Flächen; Import ist ein eingeklappter Kasten darunter); am Handy untereinander */
/* Lauf 2 ersetzt: .tg-raster { ... grid-template-areas: "ed aus" "imp aus"; ... } .tg-imp { grid-area: imp; } — das Schema ließ die Ausgabe über zwei Zeilen laufen (Lücken) */
.tg-raster { display: grid; gap: 14px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "ed aus"; align-items: start; }
.tg-editor { grid-area: ed; } .tg-aus { grid-area: aus; }
/* Lauf 2: etwas breiter als die Werk-Vorgabe (1240), damit die Leiste in einer Zeile bleibt */
.werk { width: min(1400px, 100%); }
.tg-unten { display: grid; gap: 14px; margin-top: 14px; }
.kopf-glyphe { width: 66px; background: var(--flaeche-3); box-shadow: inset 0 0 0 1px var(--linie), 0 10px 30px -14px var(--a1); }   /* Original-Icon auf neutralem Grund (hell wie dunkel erkennbar) */
.kopf-glyphe img { display: block; width: 50px; height: auto; max-height: 42px; object-fit: contain; }
.tafel-kopf { flex-wrap: wrap; }
.tg-kopfrechts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.tg-mass { font: 500 15px var(--mono); color: var(--leise); margin-right: 6px; }
/* Lauf 2 entfernt (Zähler): .tg-zahl { font: 500 13.5px var(--mono); color: var(--sehr-leise); } */

/* Knöpfe, Chips, Haken */
.tg-b { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; min-width: 34px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--linie);
  background: var(--flaeche-2); color: var(--text); font-size: 14px; font-weight: 700; white-space: nowrap; transition: background .15s, border-color .15s, transform .15s; }
.tg-b:hover:not(:disabled) { border-color: var(--linie-stark); background: var(--flaeche-3); }
.tg-b:active:not(:disabled) { transform: translateY(1px); }
.tg-b:disabled, .ikon-knopf:disabled, .tg-primaer:disabled { opacity: .4; cursor: default; }
.tg-b svg { width: 17px; height: 17px; flex: none; }
.tg-pfeil { padding: 0 9px; font-size: 16px; }
.tg-rechts { margin-left: auto; }
.tg-primaer { height: 44px; padding: 0 20px; border-radius: 12px; border: 0; background: var(--a1); color: var(--a1-tinte); font-size: 16px; font-weight: 700; transition: transform .15s, filter .15s; }
.tg-primaer:hover:not(:disabled) { filter: brightness(1.08); } .tg-primaer:active:not(:disabled) { transform: translateY(1px); }
.chip[aria-pressed="true"] { background: color-mix(in srgb, var(--a1) 16%, var(--flaeche)); border-color: var(--a1); }
.tg-haken { width: 18px; height: 18px; flex: none; border-radius: 6px; border: 2px solid var(--linie-stark); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.chip[aria-pressed="true"] .tg-haken { background: var(--a1); border-color: var(--a1); }
.chip[aria-pressed="true"] .tg-haken::after { content: ""; width: 9px; height: 5px; border: solid var(--a1-tinte); border-width: 0 0 2.4px 2.4px; transform: translateY(-1px) rotate(-45deg); }
/* Lauf 2 ersetzt: .tg-formate .chip { min-height: 38px; padding: 5px 12px; } — fünf Formate + „Mehr …“ sollen in eine Zeile */
.tg-formate { gap: 5px; }
.tg-formate .chip { min-height: 38px; padding: 5px 9px; font-size: 14px; }
.tg-formate .chip[aria-pressed="true"] { background: var(--a1); color: var(--a1-tinte); border-color: var(--a1); }
.tg-mehr { border-style: dashed; color: var(--leise); }
.tg-mehr:disabled { opacity: .5; cursor: default; }
.tg-kopfchip { min-height: 34px; padding: 4px 11px; font-size: 14px; }
.segment button[aria-pressed="true"] { box-shadow: 0 1px 3px rgba(0,0,0,.18), inset 0 0 0 1.5px var(--a1); }
.tg-seg button { min-height: 34px; padding: 0 10px; display: inline-grid; place-items: center; }
.tg-seg svg { width: 16px; height: 12px; display: block; }

/* Werkzeugleiste */
/* Lauf 2: eine schlanke Zeile (Gruppen ohne Beschriftung, brechen bei Platzmangel als Ganzes um) */
.tg-leiste { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 12px; align-items: center; }
.tg-gruppe { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tg-leiste .tg-b { padding: 0 10px; font-size: 13.5px; }
/* Lauf 2 entfernt (Gruppenlabels): .tg-gl { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sehr-leise); margin-right: 2px; } */

/* Hauptbild: das Raster */
.tg-scroll { overflow: auto; max-height: 66vh; border: 1px solid var(--linie-stark); border-radius: var(--r); background: var(--flaeche-2); overscroll-behavior: contain; }
.tg-grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 100%; }
.tg-grid th, .tg-grid td { padding: 0; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--flaeche); vertical-align: top; }
.tg-grid thead th { position: sticky; top: 0; z-index: 3; background: var(--flaeche-3); height: 34px; }
.tg-grid tbody th { position: sticky; left: 0; z-index: 2; background: var(--flaeche-3); }
.tg-grid .tg-ecke { left: 0; z-index: 4; }
.tg-sp { text-align: left; }
.tg-sp { display: table-cell; }
.tg-sp-name, .tg-sp-ausr, .tg-zn-name { border: 0; background: transparent; color: var(--leise); font: 700 13px var(--mono); padding: 0; cursor: pointer; }
.tg-sp-name { display: inline-block; width: calc(100% - 36px); height: 34px; text-align: left; padding-left: 12px; }
.tg-sp-ausr { width: 34px; height: 34px; display: inline-grid; place-items: center; vertical-align: top; border-radius: 8px; }
.tg-sp-ausr svg { width: 16px; height: 12px; }
.tg-sp-name:hover, .tg-sp-ausr:hover, .tg-zn-name:hover { color: var(--text); }
.tg-grid .tg-sp.aktiv, .tg-grid .tg-zn.aktiv { background: color-mix(in srgb, var(--a1) 20%, var(--flaeche-3)); }
.tg-sp.aktiv .tg-sp-name, .tg-zn.aktiv .tg-zn-name { color: var(--a1); }
.tg-zn { text-align: center; }
.tg-zn-name { width: 100%; min-height: 36px; height: 100%; text-align: center; font-size: 12.5px; }
.tg-grid td:last-child, .tg-grid th:last-child { border-right: 0; }
.tg-grid tbody tr:last-child td, .tg-grid tbody tr:last-child th { border-bottom: 0; }
.tg-grid tbody tr:nth-child(even):not(.kopfzeile) td { background: color-mix(in srgb, var(--text) 3%, var(--flaeche)); }
.tg-grid tr.kopfzeile td { background: color-mix(in srgb, var(--a1) 13%, var(--flaeche)); border-bottom: 2px solid color-mix(in srgb, var(--a1) 55%, transparent); }
.tg-grid tr.kopfzeile .tg-zelle { font-weight: 700; }
.tg-grid tr.kopfzeile .tg-zn-name::after { content: "•"; display: block; color: var(--a1); line-height: .6; font-size: 20px; }
.tg-zelle { display: block; width: 100%; min-height: 38px; padding: 8px 12px; border: 0; background: transparent; color: var(--text); resize: none; overflow: hidden;
  font: 500 15px/1.45 var(--mono); outline: none; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 0; }
.tg-zelle:focus { background: var(--flaeche); box-shadow: inset 0 0 0 2px var(--a1); position: relative; z-index: 1; }
td.a-c .tg-zelle { text-align: center; } td.a-r .tg-zelle { text-align: right; }
.tg-tipp { margin: 8px 0 0; font-size: 13.5px; color: var(--sehr-leise); line-height: 1.4; }
.tg-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.tg-aktiv { font: 500 14px var(--mono); color: var(--leise); }

/* Ausgabe */
.tg-formate { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-satz { margin: 10px 0 12px; font-size: 14.5px; color: var(--leise); line-height: 1.45; min-height: 1.45em; }   /* Lauf 2: ein kurzer Satz, keine zwei Zeilen Platz mehr */
.tg-text { display: block; width: 100%; resize: vertical; padding: 14px 16px; border-radius: var(--r); border: 1.5px solid var(--linie-stark);
  background: var(--flaeche-2); color: var(--text); font: 500 14.5px/1.5 var(--mono); outline: none; tab-size: 4; white-space: pre; overflow: auto; transition: border-color .15s, box-shadow .15s, background .15s; }
.tg-text:focus { border-color: var(--a1); box-shadow: var(--fokus); background: var(--flaeche); }
.tg-text::placeholder { color: var(--sehr-leise); }
.tg-ausgabe { line-height: 1.28; height: 300px; min-height: 180px; background: color-mix(in srgb, var(--a2) 6%, var(--flaeche-2)); }
.tg-hinweise { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; color: var(--hinweis); line-height: 1.45; }
.tg-hinweise:empty { display: none; }
.tg-hinweise li { position: relative; padding-left: 16px; margin-top: 4px; }
.tg-hinweise li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--hinweis); }
.tg-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.tg-aktionen .ikon-knopf, .tg-aktionen .kopier.breit { height: 40px; padding: 0 13px; }
.tg-kopier-platz { display: inline-flex; }
/* Lauf 2 ersetzt: margin-top/padding-top/border-top — jetzt im eingeklappten Kasten */
.tg-optionen { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.tg-opt-tipp { margin: 6px 0 0; font-size: 13.5px; color: var(--sehr-leise); }
.tg-optionen:empty { display: none; }
.tg-opt { min-width: 0; }
.tg-opt .feld-label { margin-bottom: 5px; }
.tg-opt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-opt-chips .chip { min-height: 40px; }
.tg-feldopt { flex: 1 1 220px; }
.tg-feldopt .feld-rahmen input { font: 500 15px var(--mono); padding: 9px 12px; }
.segment { flex-wrap: wrap; }

/* Import */
.tg-imp-box { position: relative; }
.tg-eingabe { height: 150px; min-height: 110px; }
.tg-ablage { position: absolute; inset: 0; display: none; place-items: center; border: 2.5px dashed var(--a1); border-radius: var(--r); background: color-mix(in srgb, var(--a1) 14%, var(--flaeche)); font: 700 20px var(--titel); pointer-events: none; }
.zieht .tg-ablage { display: grid; }
.tg-imp-leiste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tg-imp-opt { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-top: 14px; }
.meldung .zeile { display: block; } .meldung .zeile + .zeile { margin-top: 3px; }
.meldung .zeile.hinweis { color: var(--hinweis); }
#imp-status { min-height: 1.5em; }
#imp-status:empty { display: block; }
.tg-imp-aktion { margin-top: 10px; }
.tg-weitere { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-start; }
/* Lauf 2 ersetzt: .tg-neu { margin-top: 20px; padding-top: 16px; border-top } — steht jetzt neben den anderen Gruppen */
.tg-neu-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.tg-zahlfeld { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--leise); }
.tg-zahlfeld input { width: 86px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--linie-stark); background: var(--flaeche-2); font: 500 18px var(--mono); outline: none; }
.tg-zahlfeld input:focus { border-color: var(--a1); box-shadow: var(--fokus); }
.tg-mal { font: 500 20px var(--mono); color: var(--sehr-leise); height: 40px; display: grid; place-items: center; }
/* Lauf 2 entfernt (Beispiel-Chips): .tg-bsp-l { margin-top: 2px; } */

/* Druck: nur die Tabelle (wird in main.js als echte <table> in #druck gebaut) */
.druck-nur { display: none; }
@media print {
  body { background: #fff !important; background-image: none !important; color: #000; }
  .werk, .toast { display: none !important; }
  .druck-nur { display: block; font: 12pt/1.4 "Plex Sans", system-ui, sans-serif; }
  .druck-nur table { border-collapse: collapse; width: 100%; }
  .druck-nur caption { font-weight: 700; margin-bottom: 6pt; text-align: left; }
  .druck-nur th, .druck-nur td { border: 1px solid #000; padding: 4pt 8pt; text-align: left; white-space: pre-wrap; vertical-align: top; }
  .druck-nur th { background: #e8e8e8; }
  .druck-nur .a-c { text-align: center; } .druck-nur .a-r { text-align: right; }
}

/* Tool-Profil „Über dieses Tool“ (SEO/GEO, statisch im HTML; Muster pw-strength) */
.tool-profil { margin-top: 18px; padding: 20px; border-radius: var(--r-gross); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); min-width: 0; }
.tool-profil-titel { margin: 0 0 10px; font: 700 15px/1.2 var(--schrift); letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise); display: flex; align-items: center; gap: 9px; }
.tool-profil-titel::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--a1); }
.tool-profil h3 { margin: 18px 0 8px; font: 700 16px/1.3 var(--schrift); color: var(--text); }
.tool-profil p { margin: 0 0 10px; color: var(--leise); line-height: 1.6; }
.tool-profil-einl { color: var(--text); }
.tool-profil-liste { margin: 0; padding: 0 0 0 20px; color: var(--leise); line-height: 1.55; display: grid; gap: 4px; }
.tool-profil-faq { display: grid; gap: 8px; margin-top: 8px; }
.tool-profil-faq details { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--r); padding: 0 16px; }
.tool-profil-faq summary { list-style: none; cursor: pointer; padding: 13px 0; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.tool-profil-faq summary::-webkit-details-marker { display: none; }
.tool-profil-faq summary::after { content: "+"; margin-left: auto; font: 500 22px/1 var(--mono); color: var(--sehr-leise); transition: transform 0.25s var(--kurve); }
.tool-profil-faq details[open] summary::after { transform: rotate(45deg); }
.tool-profil-faq details p { margin: 0 0 14px; }
.wissen details p + p { margin-top: -6px; }

/* ── Desktop (≥ 761 px) ── */
@media (min-width: 761px) {
  .tg-leiste { gap: 8px 12px; }
}

/* ── Handy (≤ 760 px): Reihenfolge Tabelle (Leiste über dem Raster), Ausgabe mit Kopier-Knopf, eingeklappte Kästen ── */
@media (max-width: 900px) {
  .tg-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ed" "aus"; }
  .tg-aus .tg-ausgabe { height: 240px; }
}
@media (max-width: 760px) {
  .kopf-glyphe { width: 54px; }
  .kopf-glyphe img { width: 40px; max-height: 34px; }
  .tool-profil { padding: 16px; border-radius: 18px; }
}
@media (max-width: 640px) {
  .tg-scroll { max-height: 58vh; }
  .tg-zelle { font-size: 14.5px; padding: 8px 10px; }
  .tg-satz { min-height: 0; }
  .tg-imp-aktion .tg-primaer { width: 100%; }
  .tg-gruppe { gap: 6px; }
  .tg-rechts { margin-left: 0; }
}
/* Lauf 2 entfernt (Handy-Umsortierung, Gruppenlabels): .tg-editor { display: flex; flex-direction: column; } .tg-editor .tg-leiste { order: 3 } .tg-editor .tg-fuss { order: 2 } .tg-gl { width: 100% } */