/* ── tool.css — Charakter „Text Diff“ ───────────────────────────────────────────────────────────────────────
   WAS:   Violett/Cyan für die Oberfläche (--a1/--a2/--a3), Rot/Grün/Gelb ausschließlich für Entfernt/Hinzugefügt/Geändert (--minus/--plus/--chg),
          Spalte, Textfelder, die Vergleichsansicht (nebeneinander / untereinander) und das HAUPTBILD: die Übersichtsleiste (.td-karte).
   WARUM: Ein Diff muss auf einen Blick lesbar sein: Die Farben der Änderungen gehören nur den Änderungen (auch in Kacheln und Leiste
          dieselben), die Oberfläche bleibt davon unabhängig. Die Leiste zeigt das GANZE Dokument — wo viel passiert, sieht man sofort.
   WIE ÄNDERN: Akzente nur hier (--a1…--a3, --plus/--minus/--chg je Thema). Grundbausteine in ../_werk/werk.css.
              Zeilenhöhe im virtuellen Modus (24 px) steht auch in js/main.js (H) — beides gemeinsam ändern; die Spaltenkopfhöhe ist --kopfh (= KOPFH in main.js),
              die Übersichtsleiste hängt über --kopfh daran (kein fest verdrahteter Wert mehr).
   LAYOUT (Lauf 2, 27.10.): EINE Spalte, volle Breite: Eingabe (zwei gleich breite Felder) → Vergleich (Kopf mit Zusammenfassung + Navigation, Ansicht-Schalter
              mit Legende, Zeilen + Leiste) → eingeklappte Kästen → Über dieses Tool → Hilfe & Infos. Handy: Felder untereinander, Vergleich „Untereinander“.
              Desktop (≥ 761 px) und Handy (≤ 760 px) haben je einen eigenen Medienblock am Ende. Überholte Regeln stehen auskommentiert.
              Zeilen: .zl.sbs/.uni mit Art .g(gleich) .c(geändert) .d(entfernt) .i(hinzugefügt); Falz: .zl.falz; aktuell: .zl.aktuell. */
:root { --a1: #9d8cff; --a2: #3dd6e8; --a3: #f27ccc; --a1-tinte: #14102b; --plus: #3ddc97; --minus: #ff6b81; --chg: #ffbe55; }
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) { --a1: #5b46d6; --a2: #0e7f92; --a3: #b8359a; --a1-tinte: #ffffff; --plus: #12805a; --minus: #c7314a; --chg: #a86708; } }
:root[data-thema="hell"] { --a1: #5b46d6; --a2: #0e7f92; --a3: #b8359a; --a1-tinte: #ffffff; --plus: #12805a; --minus: #c7314a; --chg: #a86708; }

.td-spalte { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.kopf-glyphe { overflow: hidden; background: var(--flaeche-3); box-shadow: inset 0 0 0 1px var(--linie), 0 10px 30px -14px var(--a1); }   /* Original-Icon (quadratisch, dunkel) auf neutralem Grund */
.kopf-glyphe img { display: block; width: 100%; height: 100%; object-fit: cover; }
.td-kopfknoepfe { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.td-kopfknoepfe .ikon-knopf { height: 38px; padding: 0 11px; }

/* ── Eingabe: zwei Felder ── */
.td-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.td-feld { min-width: 0; display: flex; flex-direction: column; }
.td-feldkopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.td-feldname { font-size: 14px; font-weight: 700; color: var(--leise); letter-spacing: 0.02em; }
.td-kleinknoepfe { display: flex; gap: 4px; }
.td-klein { min-height: 32px; padding: 3px 11px; border-radius: 9px; border: 1px solid var(--linie); background: var(--flaeche-2); color: var(--leise); font-size: 14px; font-weight: 700; transition: background .15s, color .15s, border-color .15s; }
.td-klein:hover { color: var(--text); border-color: var(--linie-stark); }
.td-text { display: block; width: 100%; min-height: 210px; resize: vertical; padding: 12px 14px; border-radius: var(--r); border: 1.5px solid var(--linie-stark);
  background: var(--flaeche-2); color: var(--text); font: 400 14px/1.5 var(--mono); tab-size: 4; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; outline: none;   /* Lauf 2: umbrechen (Prosa und Code), kein horizontales Scrollen */ transition: border-color .15s, box-shadow .15s, background .15s; }
.td-text::placeholder { color: var(--sehr-leise); }
.td-text:focus { border-color: var(--a1); box-shadow: var(--fokus); background: var(--flaeche); }
.td-text.zieht { border-color: var(--a2); background: color-mix(in srgb, var(--a2) 8%, var(--flaeche-2)); }
.td-live { margin: 8px 0 0; font: 500 14px/1.3 var(--mono); color: var(--sehr-leise); min-height: 18px; }
.td-ein .meldung { margin-top: 6px; }
.td-beispiele { margin-top: 12px; }
.td-beispiele .chips { gap: 6px; }
.td-bsp { font-size: 14.5px; min-height: 40px; padding: 4px 12px; }

/* ── Haken-Chips ── */
.td-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"] { background: color-mix(in srgb, var(--a1) 16%, var(--flaeche)); border-color: var(--a1); }
.chip[aria-pressed="true"] .td-haken { background: var(--a1); border-color: var(--a1); }
.chip[aria-pressed="true"] .td-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); }

/* ── Vergleich ── */
.td-erg-kopf { margin-bottom: 14px; flex-wrap: wrap; }
.td-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* Zusammenfassungszeile: „5 Änderungen · +4 · −3 · ~2 Zeilen“ (Zahlen in den Farben von Hinzugefügt / Entfernt / Geändert) */
.td-summe { margin: 0 0 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 700 17px/1.3 var(--mono); color: var(--leise); min-width: 0; }
.td-summe:empty { display: none; }
.td-s-haupt { color: var(--text); font-family: var(--schrift); }
.td-s-plus { color: var(--plus); } .td-s-minus { color: var(--minus); } .td-s-chg { color: var(--chg); }
.td-s-z { font-weight: 500; color: var(--sehr-leise); margin-left: -6px; }
.td-zaehler { min-width: 74px; text-align: center; font: 700 17px/1 var(--mono); color: var(--leise); }
.td-nav .ikon-knopf:disabled { opacity: .4; cursor: default; }
.td-nav .ikon-knopf { background: color-mix(in srgb, var(--a1) 14%, var(--flaeche)); border-color: color-mix(in srgb, var(--a1) 40%, transparent); }

/* Lauf 2: Kachelreihe entfällt (ersetzt durch .td-summe)
.td-werte { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.td-werte .wert { padding: 10px 8px 10px 14px; }
.td-werte .wert-zahl { font-size: 24px; }
.td-werte .wert.haupt .wert-zahl { font-size: 28px; }
.td-werte .wert-zusatz { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-werte .wert.td-k-plus .wert-zahl { color: var(--plus); }
.td-werte .wert.td-k-minus .wert-zahl { color: var(--minus); }
.td-werte .wert.td-k-geaendert .wert-zahl { color: var(--chg); }
.td-werte .wert.td-k-plus { border-color: color-mix(in srgb, var(--plus) 26%, transparent); }
.td-werte .wert.td-k-minus { border-color: color-mix(in srgb, var(--minus) 26%, transparent); }
.td-werte .wert.td-k-geaendert { border-color: color-mix(in srgb, var(--chg) 26%, transparent); }
*/


.td-ansicht { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 0 0 12px; }
.td-ansicht .td-gruppe { display: flex; align-items: center; gap: 10px; }
.td-ansicht .td-gruppe .feld-label { margin: 0; }
.td-legende { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 700; color: var(--leise); }
.td-legende li::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; background: var(--minus); }
.td-legende .l-plus::before { background: var(--plus); }
.td-legende .l-chg::before { background: var(--chg); }
/* Optionen / Profi (eingeklappte Kästen): Gruppen gleichmäßig im Raster, keine Lücken durch ungleichen Umbruch */
.td-opt { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 24px; align-items: start; }
.td-gruppe { min-width: 0; }
.td-gruppe .feld-label { margin-bottom: 5px; }
.td-chips { gap: 6px; }
.td-chips .chip { min-height: 40px; padding: 4px 11px; font-size: 14.5px; }
.td-werkzeug .segment button { min-height: 36px; padding: 6px 12px; }
.td-muster { min-width: 0; }
.td-muster .feld-rahmen input { font-size: 15px; padding: 8px 12px; }

.td-notiz { margin: 7px 0 0; font-size: 14px; color: var(--leise); line-height: 1.4; }
.td-bild { min-width: 0; }
.td-bild .meldung { margin: 0 0 8px; }
.td-leer { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 16px; text-align: center; color: var(--leise); border: 1.5px dashed var(--linie-stark); border-radius: var(--r); }
.td-leer svg { width: 64px; height: 64px; color: var(--sehr-leise); }
.td-leer strong { color: var(--text); font-size: 19px; }
.td-leer.ok { border-color: color-mix(in srgb, var(--plus) 45%, transparent); padding: 56px 16px; }   /* „identisch“ ist ein vollwertiges Hauptergebnis: groß */
.td-leer.ok svg, .td-leer.ok strong { color: var(--plus); }
.td-leer.ok strong { font-size: 26px; }

/* ── Viewer + HAUPTBILD Übersichtsleiste ── */
.td-viewer { --kw: 64px; --kopfh: 36px; display: grid; grid-template-columns: minmax(0, 1fr) var(--kw); gap: 10px; align-items: stretch; }
.td-scroll { --nr: 48px; --mw: 12px;   /* --mw: schmale Trennspalte (früher 46 px für die Merge-Knöpfe) */ position: relative; overflow: auto; max-height: min(74vh, 780px); min-height: 170px; border: 1px solid var(--linie-stark); border-radius: var(--r);
  background: var(--flaeche); scrollbar-gutter: stable; outline: none; }
.td-scroll:focus-visible { box-shadow: var(--fokus); }
.td-spalten { position: sticky; top: 0; z-index: 3; height: var(--kopfh); display: grid; grid-template-columns: var(--nr) minmax(0, 1fr) var(--mw) var(--nr) minmax(0, 1fr);
  align-items: center; background: var(--flaeche-3); border-bottom: 1px solid var(--linie-stark); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.td-spalten span:first-child { grid-column: 1 / 3; padding-left: 14px; }
.td-spalten span:last-child { grid-column: 4 / 6; padding-left: 10px; }
.td-spalten span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 8px; background: var(--minus); }
.td-spalten span:last-child::before { background: var(--plus); }
.td-scroll.uni .td-spalten { display: flex; gap: 22px; padding-left: 14px; }
.td-scroll.uni .td-spalten span:first-child, .td-scroll.uni .td-spalten span:last-child { padding: 0; }
.td-zeilen { position: relative; }
.td-zeilen.virtuell { overflow: hidden; }

.zl { position: relative; min-width: 0; font: 400 13.5px/20px var(--mono); tab-size: 4; }
.td-zeilen.virtuell .zl { position: absolute; left: 0; right: 0; height: 24px; }
.zl.sbs { display: grid; grid-template-columns: var(--nr) minmax(0, 1fr) var(--mw) var(--nr) minmax(0, 1fr); }
.zl.uni { display: grid; grid-template-columns: var(--nr) var(--nr) 22px minmax(0, 1fr); }
.zl .nr { text-align: right; padding: 2px 9px 2px 0; min-height: 24px; line-height: 20px; font-size: 12.5px; color: var(--sehr-leise); background: color-mix(in srgb, var(--flaeche-3) 55%, var(--flaeche)); user-select: none; }
.zl .tx { padding: 2px 10px; min-height: 24px; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.zl.uni .tx { padding-right: 10px; }   /* früher 54 px für die Merge-Knöpfe */
.zl .zch { text-align: center; padding: 2px 0; font-weight: 700; user-select: none; }
.zl .mc { display: flex; align-items: flex-start; justify-content: center; padding-top: 1px; background: color-mix(in srgb, var(--flaeche-3) 35%, var(--flaeche)); }
.td-zeilen.virtuell .zl .tx, .td-zeilen.virtuell .zl .nr, .td-zeilen.virtuell .zl .zch { white-space: pre; overflow: hidden; text-overflow: ellipsis; padding-top: 0; padding-bottom: 0; line-height: 24px; }
.td-zeilen.virtuell .zl .mc { padding-top: 0; align-items: center; }

/* Arten: Entfernt rot, Hinzugefügt grün, Geändert GELB (Zeile) mit rot/grün markierten Wörtern */
.zl.d .tx.l, .zl.uni.d .tx { background: color-mix(in srgb, var(--minus) 15%, var(--flaeche)); }
.zl.i .tx.r, .zl.uni.i .tx { background: color-mix(in srgb, var(--plus) 15%, var(--flaeche)); }
.zl.c .tx.l, .zl.c .tx.r, .zl.uni.p .tx { background: color-mix(in srgb, var(--chg) 15%, var(--flaeche)); }
/* (alt) geänderte Zeilen wirkten rot/grün: .zl.c .tx.l (minus) und .zl.c .tx.r (plus) teilten sich die Regeln von entfernt/hinzugefügt */
.zl.d .tx.r, .zl.i .tx.l { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--text) 6%, transparent) 6px 12px); }
.zl.c .tx.l mark, .zl.uni.d .tx mark { background: color-mix(in srgb, var(--minus) 42%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.zl.c .tx.r mark, .zl.uni.i .tx mark { background: color-mix(in srgb, var(--plus) 42%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.zl.sbs.c > .nr, .zl.uni.p > .nr { background: color-mix(in srgb, var(--chg) 14%, var(--flaeche-3)); }
.zl.sbs.c > .nr:first-child, .zl.uni.c > .nr:first-child { box-shadow: inset 3px 0 0 var(--chg); }
.zl.uni.p > .nr:first-child, .zl.uni.p > .nr:nth-child(2) { box-shadow: inset 3px 0 0 var(--chg); }
.zl.sbs.c > .nr:nth-child(4) { box-shadow: inset 3px 0 0 var(--chg); }
.zl.sbs.d > .nr:first-child, .zl.uni.d > .nr:first-child { box-shadow: inset 3px 0 0 var(--minus); }
.zl.sbs.i > .nr:nth-child(4), .zl.uni.i > .nr:nth-child(2) { box-shadow: inset 3px 0 0 var(--plus); }
.zl.uni.d .zch { color: var(--minus); background: color-mix(in srgb, var(--minus) 15%, var(--flaeche)); }
.zl.uni.i .zch { color: var(--plus); background: color-mix(in srgb, var(--plus) 15%, var(--flaeche)); }
.zl.uni.p .zch { background: color-mix(in srgb, var(--chg) 15%, var(--flaeche)); }
.zl.sbs .tx.r { border-left: 1px solid var(--linie); }
.zl.aktuell::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: color-mix(in srgb, var(--a1) 11%, transparent); box-shadow: inset 3px 0 0 var(--a1); }

/* Block übernehmen */
/* Lauf 2: Merge (Übernehmen-Knöpfe) entfällt
.mk { display: inline-flex; gap: 2px; }
.mk-uni { position: absolute; right: 8px; top: 1px; z-index: 2; }
.mkb { width: 21px; height: 22px; padding: 0; line-height: 1; border-radius: 6px; border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--leise); font: 700 16px/1 var(--schrift); display: grid; place-items: center; opacity: .75; transition: opacity .15s, background .15s, color .15s; }
.mkb:hover, .mkb:focus-visible { opacity: 1; color: var(--a1-tinte); background: var(--a1); border-color: var(--a1); }
*/

/* Falz */
.zl.falz { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; border-block: 1px solid var(--linie); padding: 0 14px; background: color-mix(in srgb, var(--a1) 7%, var(--flaeche)); color: var(--leise); font: 700 13.5px var(--schrift); text-align: left; }
.zl.falz:hover { color: var(--text); background: color-mix(in srgb, var(--a1) 14%, var(--flaeche)); }
.zl.falz .falz-pfeil { color: var(--a1); font-size: 14px; }
.zl.falz .falz-t { margin-left: auto; font-weight: 400; color: var(--sehr-leise); font-size: 13px; }
.td-zeilen:not(.virtuell) .zl.falz { min-height: 30px; }

/* Übersichtsleiste */
.td-karte { position: relative; margin: calc(var(--kopfh) + 1px) 0 1px; border-radius: 10px; background: var(--flaeche); border: 1px solid var(--linie-stark); cursor: pointer; touch-action: none; user-select: none; }
.td-karte canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 9px; }
.td-fenster { position: absolute; left: -1px; right: -1px; border: 1.5px solid var(--a1); background: color-mix(in srgb, var(--a1) 15%, transparent); border-radius: 6px; pointer-events: none; transition: top .08s linear; box-shadow: 0 0 0 1px color-mix(in srgb, var(--grund) 60%, transparent); }
.td-aktuell { position: absolute; left: -4px; right: -4px; border: 2px solid var(--text); border-radius: 4px; pointer-events: none; }
.td-viewer.versteckt, .td-leer.versteckt { display: none; }

/* Export */
.td-export { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--linie); }
.td-export .feld-label { margin: 0; }
.td-export-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.td-export .kopier.breit { height: 42px; border-radius: 12px; }
.td-export .kopier:disabled, .td-export .ikon-knopf:disabled { opacity: .4; cursor: default; }
/* #kopier-alles .kopier.breit { color: var(--leise); }   (Lauf 2: „Zahlen kopieren“ entfällt) */
.fb-faltbar .fb-inhalt { margin-top: 14px; }

/* ── Über dieses Tool (Tool-Profil, SEO/GEO) ── */
.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-raster { grid-template-columns: minmax(0, 1fr); }

/* ── Desktop (≥ 761 px) ── */
@media (min-width: 761px) {
  .kopf-glyphe { width: 62px; height: 62px; }
  .td-erg { padding: 24px; }
}

/* ── Handy (≤ 760 px): Eingabe zuerst, Felder untereinander, Vergleich „Untereinander“ ── */
@media (max-width: 760px) {
  .td-felder { grid-template-columns: 1fr; gap: 12px; }
  .td-text { min-height: 130px; }
  .td-viewer { --kw: 38px; gap: 6px; }
  .td-scroll { --nr: 38px; --mw: 8px; max-height: 66vh; }
  .zl { font-size: 12.5px; }
  .zl .nr { padding-right: 6px; font-size: 11.5px; }
  .zl .tx { padding: 2px 6px; }
  .td-spalten { font-size: 11.5px; }
  .td-summe { order: 3; flex-basis: 100%; margin: 4px 0 0; font-size: 15px; }
  .td-export-knoepfe { margin-left: 0; width: 100%; }
  .td-zaehler { min-width: 58px; font-size: 15px; }
  .td-nav .ikon-knopf { height: 40px; }
  .td-opt { grid-template-columns: minmax(0, 1fr); }
  .td-leer.ok { padding: 40px 12px; }
  .td-leer.ok strong { font-size: 22px; }
  .tool-profil { padding: 16px; border-radius: 18px; }
}
/* (alt, Lauf 2 entfallen) @media (max-width: 1100px) { .td-werte { grid-template-columns: repeat(3, …); } }
   @media (max-width: 760px) { .hat-diff .td-erg { order: -1; } .td-bahn .td-bild { order: 1; } .td-bahn .td-werkzeug { order: 2; } .td-werte {…} .td-muster { width: 100%; } .mkb {…} } */