/* ── tool.css — Charakter „XML → JSON“ (Lauf 2, 27.10.: zwei gleich breite Spalten, Kästen unten) ────────────────────────────────────────────────────────────────────────
   WAS:   Akzente (Smaragd · Orange · Indigo = Element · Attribut · Text/JSON-Seite), die Knotenfarben (--k-*) für Baum UND Code-Ansicht,
          Raster (Eingabe + Ausgabe links, Baum + Konvention rechts), Textfläche mit Ablagefeld, Status mit Fehlerauszug, Baumansicht
          (Hauptbild), Code-Ansicht der Ausgabe mit Zeilenmarkierung, Auswahlleiste, Beispieltabelle der Konvention.
   WARUM: Das Werkzeug lebt davon, dass man die Zuordnung XML ↔ JSON sieht: dieselbe Farbe steht für denselben Knotentyp im Baum, in der
          XML-Ausgabe und als Schlüssel im JSON (Element grün, Attribut orange, Text rosa, CDATA gelb, Kommentar grau). Klick auf einen Knoten
          markiert seine Zeilen in der Ausgabe (.cl.hl), die Auswahlleiste zeigt XPath und JSON-Pfad.
   WIE ÄNDERN: Akzente und --k-* nur oben in :root (dunkel, hell per Medienabfrage UND data-thema — beide Blöcke gleich halten);
          Grundbausteine in ../_werk/werk.css. Baum-Klassen: .bk (Knoten) .bz (Zeile) .bt (Pfeil) .bn-el/.bn-at/.bn-av (Namen/Wert)
          .bx (Text) .bc (CDATA) .bm (Kommentar) .bpi (Anweisung) .ba (Attribut-Chip) — gebaut in js/main.js (baueKnoten).
          Code-Ansicht: .cl (Zeile) mit Segmenten .s-p/.s-e/.s-a/.s-v/.s-t/.s-c/.s-m/.s-i (XML) bzw. .k-el/.k-attr/… und .v-el/.v-attr/… (JSON-Schlüssel und -Werte). */
:root {
  --a1: #2dd4a7; --a2: #ffa94d; --a3: #8b9cff; --a1-tinte: #04251c;
  --k-el: #2dd4a7; --k-attr: #ffa94d; --k-val: #7dd3fc; --k-text: #fda4af; --k-cdata: #fde047; --k-comment: #8e99aa; --k-pi: #c4b5fd;
}
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) {
  --a1: #0b8a68; --a2: #c2570c; --a3: #4f46e5; --a1-tinte: #ffffff;
  --k-el: #0b7a5c; --k-attr: #b45309; --k-val: #0369a1; --k-text: #be185d; --k-cdata: #946200; --k-comment: #6b7280; --k-pi: #6d28d9; } }
:root[data-thema="hell"] {
  --a1: #0b8a68; --a2: #c2570c; --a3: #4f46e5; --a1-tinte: #ffffff;
  --k-el: #0b7a5c; --k-attr: #b45309; --k-val: #0369a1; --k-text: #be185d; --k-cdata: #946200; --k-comment: #6b7280; --k-pi: #6d28d9;
}
.k-el { color: var(--k-el); } .k-attr { color: var(--k-attr); } .k-text { color: var(--k-text); } .k-cdata { color: var(--k-cdata); } .k-comment { color: var(--k-comment); } .k-pi { color: var(--k-pi); }

/* LAYOUT (Lauf 2): Richtungswahl schmal oben; darunter zwei GLEICH breite Spalten — links Eingabe mit Status und Beispielen, rechts die JSON-Ausgabe (Textfeld und Codefläche
   gleich hoch); darunter über die volle Breite die eingeklappten Kästen (.xj-kasten: Einstellungen, XML-Baum & Pfade). align-items: start — keine Tafel wird auf die Höhe der
   Nachbarin gedehnt (die Statuslänge ändert sich mit dem Fehler). Handy: eine Spalte in Quellreihenfolge (Eingabe → Status → Beispiele → Ausgabe → Kästen).
   Desktop (≥ 961 px) und Handy (≤ 960 / ≤ 640 px) sind am Ende je ein eigener Medienblock. */
.xj-raster { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.xj-modus, .xj-kasten { grid-column: 1 / -1; }
/* (alt) Raster 5fr/7fr mit Spalten-Wrappern und Kennzahlen-Leiste:
.xj-raster { display: grid; gap: 14px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.xj-modus, .xj-werte-box { grid-column: 1 / -1; }
.xj-spalte { display: flex; flex-direction: column; gap: 14px; min-width: 0; } */
.kopf-glyphe { background: var(--flaeche-3); box-shadow: inset 0 0 0 1px var(--linie), 0 10px 30px -14px var(--a1); }   /* Original-Icon (transparent) auf neutralem Grund, hell und dunkel erkennbar */
.kopf-glyphe img { display: block; width: 40px; height: 40px; object-fit: contain; }
.tafel-kopf { flex-wrap: wrap; }
.xj-ein .tafel-kopf, .xj-aus .tafel-kopf { min-height: 48px; }   /* beide Textflächen beginnen auf gleicher Höhe */
.xj-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.xj-knoepfe .ikon-knopf, .xj-aktionen .ikon-knopf, .xj-aktionen .kopier.breit { height: 38px; padding: 0 11px; }
.versteckt { display: none !important; }

/* Richtung */
.xj-modus { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 10px 14px; }
.xj-modi { flex: none; }
.xj-modi button { display: inline-flex; align-items: center; gap: 2px; padding: 8px 16px; font: 700 17px/1.2 var(--titel); min-height: 44px; }
.xj-m-pfeil { color: var(--a2); margin: 0 7px; font-weight: 700; }
.xj-modi button[aria-pressed="true"] { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), inset 0 0 0 1.5px var(--a1); }
/* (Lauf 2: Richtungssatz entfernt) .xj-modus-satz { margin: 0; flex: 1 1 320px; min-width: 0; color: var(--leise); font-size: 15.5px; line-height: 1.45; } */

/* Chips, Haken */
.chip[aria-pressed="true"] { background: color-mix(in srgb, var(--a1) 16%, var(--flaeche)); border-color: var(--a1); }
.xj-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"] .xj-haken { background: var(--a1); border-color: var(--a1); }
.chip[aria-pressed="true"] .xj-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); }
.chip:disabled, .ikon-knopf:disabled, .kopier:disabled { opacity: .45; cursor: default; }

/* Eingabefläche */
.xj-eingabe-box { position: relative; display: flex; min-height: 250px; }
.xj-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 15px/1.5 var(--mono); outline: none; tab-size: 2; white-space: pre; overflow: auto; transition: border-color .15s, box-shadow .15s, background .15s; }
.xj-eingabe-box .xj-text { flex: 1; min-height: 250px; height: 320px; }   /* gleiche Höhe wie .xj-code (vorher 280 gegen 340) */
.xj-text::placeholder { color: var(--sehr-leise); }
.xj-text:focus { border-color: var(--a1); box-shadow: var(--fokus); background: var(--flaeche); }
.xj-eingabe-box.fehlerhaft .xj-text { border-color: var(--fehler); background: var(--fehler-grund); }
.xj-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 .xj-ablage { display: grid; }

/* Status */
.xj-status { margin-top: 12px; }
.xj-badge-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.xj-badge { font: 700 13px/1 var(--schrift); letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--linie-stark); color: var(--leise); }
.xj-badge.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.xj-badge.fehler { color: var(--fehler); border-color: color-mix(in srgb, var(--fehler) 55%, transparent); background: var(--fehler-grund); }
.xj-badge-text { font-weight: 700; font-size: 16px; }
.xj-status .meldung { font-size: 15.5px; }
.xj-ausschnitt { margin-top: 10px; padding: 8px 0; border-radius: var(--r); background: var(--flaeche-2); border: 1px solid var(--linie); overflow: auto; font: 500 14.5px/1.6 var(--mono); }
.xj-ausschnitt .az { display: flex; white-space: pre; padding: 0 12px; min-width: max-content; }
.xj-ausschnitt .az.fehler { background: var(--fehler-grund); }
.xj-ausschnitt .nr { flex: none; margin-right: 12px; color: var(--sehr-leise); text-align: right; user-select: none; min-width: 2ch; }
.xj-ausschnitt .fehler .nr { color: var(--fehler); font-weight: 700; }
.xj-ausschnitt mark { background: var(--fehler); color: var(--grund); border-radius: 3px; padding: 0 2px; font-weight: 700; }
.xj-status-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.xj-status-knoepfe:not(:has(.chip:not(.versteckt))) { display: none; }
.xj-status-knoepfe .chip { min-height: 38px; padding: 4px 13px; background: var(--flaeche-2); }
.xj-hinweise { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.xj-hinweise:empty { display: none; }
.xj-hinweise li { padding: 8px 12px; border-radius: 11px; font-size: 14.5px; line-height: 1.45; background: color-mix(in srgb, var(--hinweis) 12%, transparent); border: 1px solid color-mix(in srgb, var(--hinweis) 40%, transparent); }
.xj-beispiele { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }   /* schmale Chipzeile unter der Eingabe */
.xj-beispiele .feld-label { margin: 0; }
.xj-beispiele .chips { gap: 6px; }
.xj-beispiele .chip { min-height: 38px; padding: 4px 12px; }

/* Ausgabe: Code-Ansicht */
.xj-einzug { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.xj-einzug .feld-label { margin: 0; }
.xj-einzug .segment button { min-width: 38px; padding: 6px 10px; }
.xj-code-box { position: relative; }
.xj-code { position: relative; height: 320px; overflow: auto; padding: 8px 0; border-radius: var(--r); border: 1.5px solid var(--linie-stark);
  background: color-mix(in srgb, var(--a3) 6%, var(--flaeche-2)); font: 500 14.5px/1.55 var(--mono); outline: none; }
.xj-code:focus-visible { box-shadow: var(--fokus); border-color: var(--a1); }
.cl { position: relative; display: block; width: max-content; min-width: 100%; padding: 0 16px 0 54px; white-space: pre; cursor: default; min-height: 1.55em; }
.koppelt .cl { cursor: pointer; }   /* Zeile wählt den Knoten nur, solange der Kasten „XML-Baum & Pfade“ offen ist (js/main.js baumOffen) */
.cl::before { content: attr(data-n); position: absolute; left: 0; width: 42px; text-align: right; color: var(--sehr-leise); font-size: 12.5px; user-select: none; }
.koppelt .cl:hover { background: color-mix(in srgb, var(--flaeche-3) 60%, transparent); }
.cl.hl { background: color-mix(in srgb, var(--a2) 20%, var(--flaeche-2)); box-shadow: inset 3px 0 0 var(--a2); }
.cl.hl::before { color: var(--a2); font-weight: 700; }
.xj-code.umbruch .cl { white-space: pre-wrap; word-break: break-all; width: auto; padding-left: 16px; cursor: default; }
.xj-code.umbruch .cl::before { display: none; }
.xj-code-leer { margin: 0; padding: 22px; color: var(--leise); border: 1.5px dashed var(--linie-stark); border-radius: var(--r); }
.xj-mehr { display: block; margin: 8px 12px; border: 1px dashed var(--linie-stark); background: transparent; color: var(--a3); font: 700 14px var(--schrift); padding: 6px 12px; border-radius: 10px; }
/* XML-Segmente */
.s-p { color: var(--leise); } .s-w { color: inherit; } .s-e { color: var(--k-el); font-weight: 700; } .s-a { color: var(--k-attr); } .s-v { color: var(--k-val); }
.s-t { color: var(--k-text); } .s-c { color: var(--k-cdata); } .s-m { color: var(--k-comment); font-style: italic; } .s-i { color: var(--k-pi); }
/* JSON-Segmente: Schlüssel und Werte tragen die Farbe ihrer XML-Herkunft */
.cl .k-el { color: var(--k-el); font-weight: 700; } .cl .k-attr { color: var(--k-attr); font-weight: 700; } .cl .k-text { color: var(--k-text); font-weight: 700; }
.cl .k-cdata { color: var(--k-cdata); font-weight: 700; } .cl .k-comment { color: var(--k-comment); font-weight: 700; font-style: italic; }
.cl .v-el, .cl .v-text { color: var(--k-text); } .cl .v-attr { color: var(--k-val); } .cl .v-cdata { color: var(--k-cdata); } .cl .v-comment { color: var(--k-comment); font-style: italic; }
.cl .n { text-shadow: 0 0 0 currentColor; letter-spacing: -.01em; }
.meldung.hinweis { color: var(--hinweis); }
.xj-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.xj-kopier-platz { display: contents; }
.xj-aktionen .kopier.breit { height: 38px; }
.xj-code-box + .meldung { margin-top: 10px; }

/* Baum (Hauptbild) */
.xj-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; list-style: none; margin: 0; padding: 0; font-size: 13px; }
.xj-legende li { display: inline-flex; align-items: center; gap: 6px; }
.xj-legende i { width: 10px; height: 10px; border-radius: 3px; background: currentColor; display: inline-block; }
.xj-legende span { color: var(--leise); }
.xj-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.xj-ebenen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xj-ebenen .chip { min-height: 38px; padding: 4px 12px; }
.xj-ebenen .segment button { min-width: 34px; padding: 6px 10px; }
.xj-auswahl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; margin-bottom: 10px; padding: 10px 12px; border-radius: var(--r); background: var(--flaeche-2); border: 1px solid var(--linie); }
.xj-pfadzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.xj-pfad-label { flex: none; min-width: 96px; }
.xj-art { display: inline-block; font: 700 12.5px/1 var(--schrift); letter-spacing: .07em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; border: 1px solid currentColor; color: var(--leise); }
.xj-pfad-text { flex: 1 1 200px; min-width: 0; padding: 7px 10px; border-radius: var(--r-klein); background: var(--flaeche); border: 1px solid var(--linie); font: 500 14.5px/1.35 var(--mono); color: var(--a2);
  overflow-x: auto; white-space: nowrap; user-select: all; }
.xj-pfad-text.a3 { color: var(--a3); }
.xj-pfad-text.leer { color: var(--sehr-leise); font-family: var(--schrift); user-select: none; }
.xj-art.k-el { color: var(--k-el); } .xj-art.k-attr { color: var(--k-attr); } .xj-art.k-text { color: var(--k-text); } .xj-art.k-cdata { color: var(--k-cdata); } .xj-art.k-comment { color: var(--k-comment); } .xj-art.k-pi { color: var(--k-pi); }
.xj-pfad-knopf { flex: none; }
.xj-pfad-knopf .kopier { width: 34px; height: 34px; }
.xj-pfadart button { padding: 5px 10px; min-height: 34px; font-size: 13.5px; }
.xj-baum-box { height: 420px; overflow: auto; border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche-2); padding: 8px 6px; }
.xj-baum-innen { min-width: max-content; }
.xj-leer { margin: 20px 14px; color: var(--leise); }
.xj-begrenzt { margin: 8px 12px; color: var(--hinweis); font-size: 14px; }
.bk-kinder { margin-left: 11px; padding-left: 10px; border-left: 1px solid var(--linie-stark); }
.bz { display: flex; align-items: baseline; gap: 0; padding: 2px 10px 2px 2px; border-radius: 8px; font: 500 15px/1.6 var(--mono); cursor: default; outline: none; border-left: 2px solid transparent; white-space: nowrap; }
.bz:hover { background: color-mix(in srgb, var(--flaeche-3) 70%, transparent); }
.bz.sel { background: color-mix(in srgb, var(--a2) 20%, var(--flaeche-2)); border-left-color: var(--a2); }
.bz:focus-visible { box-shadow: var(--fokus); }
.bt { flex: none; width: 22px; height: 22px; align-self: center; border: 0; background: transparent; color: var(--leise); padding: 2px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; margin-right: 2px; }
.bt.leer { cursor: default; pointer-events: none; }
.bt svg { width: 16px; height: 16px; transition: transform .2s var(--kurve); }
.bt.auf svg { transform: rotate(90deg); }
.bt:hover { background: var(--flaeche-3); color: var(--text); }
.bo { color: var(--sehr-leise); }
.bn-el { color: var(--k-el); font-weight: 700; }
.bn-at { color: var(--k-attr); }
.bn-av { color: var(--k-val); }
.ba { border-radius: 6px; cursor: pointer; padding: 0 1px; margin-left: 0.7ch; }
.ba:hover { background: color-mix(in srgb, var(--k-attr) 14%, transparent); }
.ba.sel, .bx.sel { background: color-mix(in srgb, var(--a2) 28%, transparent); outline: 1.5px solid var(--a2); }
.bx { color: var(--k-text); cursor: pointer; border-radius: 5px; padding: 0 1px; margin: 0; white-space: pre; }
.bx.bc { color: var(--k-cdata); }
.bm { color: var(--k-comment); font-style: italic; }
.bpi { color: var(--k-pi); }
.bp { color: var(--sehr-leise); margin: 0 4px; }
.bz[aria-expanded="true"] .bp, .bz[aria-expanded="true"] .bz-ende, .bz[aria-expanded="true"] .bn { display: none; }
.bn { color: var(--sehr-leise); font: 500 12.5px var(--schrift); padding: 0 8px; margin-left: 8px; border-radius: 99px; border: 1px solid var(--linie); align-self: center; line-height: 1.5; }
.bmehr { margin: 4px 0 6px 26px; border: 1px dashed var(--linie-stark); background: transparent; color: var(--a3); font: 700 14px var(--schrift); padding: 6px 12px; border-radius: 10px; }
.bmehr:hover { background: var(--flaeche-3); }

/* Konvention & Einstellungen */
/* (Lauf 2: Konventionssatz entfernt, steht in hilfe.einstellungen) .xj-konv-satz { margin: 0 0 14px; color: var(--leise); font-size: 15.5px; line-height: 1.5; } */
.fb-faltbar .fb-inhalt { margin-top: 14px; }
.xj-legende { margin-bottom: 10px; }
/* Rundreise-Ergebnis: eine Zeile unter den Optionen */
.xj-rund { margin: 0 0 14px; padding: 9px 13px; border-radius: var(--r); background: var(--flaeche-2); border: 1px solid var(--linie); font-size: 15px; line-height: 1.45; color: var(--leise); }
.xj-rund.versteckt { display: none !important; }
.xj-rund-label { font-weight: 700; color: var(--leise); }
.xj-rund-wert { color: var(--text); }
.xj-rund.ok .xj-rund-wert { color: var(--ok); }
.xj-rund.anders .xj-rund-wert { color: var(--hinweis); }
.xj-optionen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 22px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--linie); }
.xj-opt .feld-label { margin-bottom: 5px; }
.xj-opt.versteckt { display: none !important; }
.xj-schalter { display: flex; flex-wrap: wrap; gap: 8px; }
.xj-schalter .chip.versteckt { display: none !important; }
.xj-schalter:not(:has(.chip:not(.versteckt))) { display: none; }
.xj-klein { width: 190px; }
.xj-klein input { font: 500 16px/1.2 var(--mono); padding: 9px 12px; }
.xj-tabelle-titel { margin: 0 0 8px; font: 700 14px/1.2 var(--schrift); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.xj-tabelle { display: grid; gap: 0; border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; background: var(--flaeche-2); }
.xj-trow { display: grid; grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 4px 12px; align-items: baseline; padding: 7px 12px; border-top: 1px solid var(--linie); }
.xj-trow:first-child { border-top: 0; }
.xj-tkopf { font: 700 12.5px var(--schrift); letter-spacing: .07em; text-transform: uppercase; color: var(--sehr-leise); background: var(--flaeche-3); }
.xj-tl { font-size: 14px; font-weight: 700; color: var(--leise); }
.xj-tx, .xj-tj { font: 500 13.5px/1.45 var(--mono); overflow-wrap: anywhere; min-width: 0; }
.xj-tx { color: var(--text); }

/* Kennzahlen (Lauf 2 entfernt)
.xj-werte-box .werte { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); }
.wert.versteckt { display: none; }

*/

/* Tool-Profil „Über dieses Tool“ (SEO/GEO; HTML statisch, Quelle spec.profil) */
.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; max-width: 110ch; }
.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; max-width: 110ch; }
.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; }

/* ── Desktop (≥ 961 px) ── */
@media (min-width: 961px) {
  .xj-ein, .xj-aus { padding: 22px; }
}

/* ── schmal (≤ 960 px): eine Spalte, Reihenfolge wie im HTML ── */
@media (max-width: 960px) {
  .xj-raster { grid-template-columns: minmax(0, 1fr); }
  .xj-baum-box { height: min(60vh, 440px); min-height: 280px; }
  .xj-auswahl { grid-template-columns: minmax(0, 1fr); }
}
/* (alt) @media (max-width: 960px) { … .xj-spalte { display: contents; } .xj-modus { order: 0; } .xj-ein { order: 1; } .xj-baum { order: 2; } .xj-aus { order: 3; } … } */

/* ── Handy (≤ 640 px) ── */
@media (max-width: 640px) {
  .kopf-glyphe img { width: 32px; height: 32px; }
  .xj-modus { padding: 10px; gap: 10px; }
  .xj-modi { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .xj-modi button { padding: 8px 6px; font-size: 15px; justify-content: center; min-width: 0; }
  /* (alt, 3 Knöpfe) .xj-modi button:last-child { grid-column: 1 / -1; } */
  .xj-m-pfeil { margin: 0 4px; }
  .xj-eingabe-box, .xj-eingabe-box .xj-text { min-height: 190px; }
  .xj-eingabe-box .xj-text { height: 200px; font-size: 14px; }
  .xj-text { padding: 12px; }
  .xj-badge-text { font-size: 15px; }
  .bz { font-size: 14px; min-height: 34px; }
  .bt { width: 28px; height: 28px; }
  .xj-code { height: 300px; font-size: 13.5px; }
  .cl { padding-left: 46px; } .cl::before { width: 34px; }
  .xj-pfad-label { min-width: 0; flex-basis: 100%; }
  .xj-knoepfe { margin-left: 0; width: 100%; }
  .xj-einzug { margin-left: 0; }
  .xj-knoepfe .ikon-knopf .knopf-text, .xj-aktionen .ikon-knopf .knopf-text { display: inline; font-size: 14px; }
  .xj-knoepfe .ikon-knopf { padding: 0 10px; }
  .xj-trow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .xj-tl { grid-column: 1 / -1; }
  .xj-tkopf .xj-tl, .xj-tkopf span:first-child { display: none; }
  .xj-klein { width: 100%; }
  .xj-opt { max-width: 100%; }
  .xj-opt .segment { flex-wrap: wrap; }
  .tool-profil { padding: 16px; border-radius: 18px; }
}