hmgr 0.0.3 → 0.0.5

package/dist/gui/renderer/styles.css

@@ -0,0 +1,638 @@
+/* hmgr-GUI, Renderer-Styling. Gestaltung, Token und Layout aus entwurf/gui.html übernommen,
+   die Farbrichtung ist verbindlich (GRILL.md „GUI-Runden"): Werkstattbeschriftung, Petrol-Emaille,
+   Blechgrau, Signalorange nur für Links und Meldungen. */
+:root{
+  color-scheme: light;
+
+  --tinte:#16211D;
+  --tinte-weich:#4A5A54;
+  --tinte-leise:#626C66;
+  --platte:#E3E7E0;
+  --blech:#F4F6F1;
+  --papier:#FFFFFF;
+
+  --emaille:#0D5545;
+  --emaille-tief:#093B31;
+  --emaille-hoch:#14705C;
+  --emaille-hell:#A6CABC;
+  --emaille-hell-tief:#86AB9D;
+  --emaille-zahl:#BEDACF;
+
+  --strich:#C4CCC0;
+  --strich-zart:#D8DED4;
+  --strich-ui:#7F847C;
+
+  --signal:#D8501B;
+  --signal-tief:#A63B11;
+  --signal-dunkel:#832E0D;
+  --signal-blass:#FDF3EC;
+  --signal-hell:#FFF9F5;
+
+  --messing:#9A7420;
+  --messing-tief:#856317;
+  --messing-blass:#FAF6EA;
+  --messing-satt:#5C4A18;
+
+  --q1:#1C6B57;
+  --q2:#35608F;
+  --q3:#9A7420;
+
+  --schrift:'Inter',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Roboto,sans-serif;
+  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
+}
+
+/* Beide Schriften liegen unter fonts/, statt auf eine lokale Installation zu hoffen (SIL Open Font
+   License, Lizenztexte liegen daneben). Inter als Variable Font deckt 400–800 ab, JetBrains Mono
+   nur die beiden gebrauchten Schnitte 400/500. */
+@font-face{
+  font-family:'Inter';
+  src:url('fonts/InterVariable.woff2') format('woff2-variations'), url('fonts/InterVariable.woff2') format('woff2');
+  font-weight:400 800;
+  font-style:normal;
+  font-display:swap;
+}
+@font-face{
+  font-family:'JetBrains Mono';
+  src:url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
+  font-weight:400;
+  font-style:normal;
+  font-display:swap;
+}
+@font-face{
+  font-family:'JetBrains Mono';
+  src:url('fonts/JetBrainsMono-Medium.woff2') format('woff2');
+  font-weight:500;
+  font-style:normal;
+  font-display:swap;
+}
+
+*{box-sizing:border-box}
+html,body{margin:0}
+body{
+  background:var(--platte);
+  color:var(--tinte);
+  font-family:var(--schrift);
+  font-size:16px;
+  line-height:1.55;
+  -webkit-font-smoothing:antialiased;
+}
+h1,h2,h3{margin:0;font-family:var(--schrift);font-weight:700;letter-spacing:-.018em;line-height:1.18}
+p{margin:0}
+button{font:inherit;color:inherit}
+a{color:var(--signal-tief)}
+:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:1px}
+.leiste :focus-visible{outline-color:#F0EBD8}
+
+.etikett{
+  font-family:var(--schrift);font-weight:700;font-size:15px;
+  letter-spacing:.15em;text-transform:uppercase;color:var(--tinte-weich);
+}
+.mono{font-family:var(--mono);font-size:16px;letter-spacing:-.012em}
+
+/* ---------- Quellen: Icon, Name, Sprung zur Quelle (E60) ---------- */
+/* Der Name bleibt ruhig, das kleine Pfeilsymbol traegt das Signalorange und sagt: das geht nach
+   draussen, zur Repo-Seite oder in den Finder. Keine Unterstreichung, die flackert in einer Tabelle
+   mit vielen Zeilen. */
+.qlink{
+  display:inline-flex;align-items:center;gap:5px;
+  font-family:var(--mono);font-size:16px;letter-spacing:-.012em;
+  color:var(--tinte-weich);text-decoration:none;text-align:left;
+  background:none;border:0;padding:0;cursor:pointer;border-radius:2px;
+  transition:color .12s ease;
+}
+.qlink:hover{color:var(--signal-tief)}
+.qlink .extern{flex:none;width:12px;height:12px;color:var(--signal-tief)}
+.qlink:hover .extern{color:var(--signal-dunkel)}
+
+/* Das 20px-Icon der Quelle: Besitzer-Avatar oder Favicon als data-URL, generisch bei lokalen
+   Quellen und jedem Fehlschlag (F35). */
+.repo{flex:none;width:20px;height:20px;display:block;border-radius:5px;overflow:hidden}
+
+/* Quellen-Chip im Katalog: zwei Bedienelemente in einer Huelle. Links filtert der Name, rechts
+   oeffnet das Pfeilsymbol die Quelle. Ein <a> im <button> waere nicht erlaubt, also stehen sie
+   nebeneinander, getrennt durch eine Kante. */
+.chipgruppe{display:inline-flex;align-items:stretch;border:1px solid var(--strich-ui);border-radius:22px}
+.chipgruppe:hover{border-color:var(--tinte-weich)}
+.chipgruppe:has(.chip[aria-pressed="true"]){border-color:var(--tinte)}
+.chipgruppe .chip{border:0;border-radius:22px 0 0 22px;padding:7px 12px 7px 15px}
+.chipoeffnen{
+  display:inline-flex;align-items:center;
+  padding:0 12px 0 10px;border:0;border-left:1px solid var(--strich-ui);
+  background:transparent;border-radius:0 22px 22px 0;cursor:pointer;
+  color:var(--signal-tief);text-decoration:none;
+}
+.chipoeffnen svg{flex:none;width:12px;height:12px;display:block}
+.chipoeffnen:hover{color:var(--signal-dunkel);background:var(--signal-blass)}
+.chipgruppe:has(.chip[aria-pressed="true"]) .chipoeffnen{border-left-color:var(--tinte)}
+
+.app{display:grid;grid-template-columns:284px minmax(0,1fr);min-height:100vh}
+
+.leiste{
+  background:var(--emaille);color:#EAF0EA;padding:20px 18px 22px;
+  border-right:3px solid var(--emaille-tief);
+  position:sticky;top:0;height:100vh;overflow-y:auto;
+  display:flex;flex-direction:column;
+}
+.marke{display:flex;align-items:baseline;gap:11px;padding:4px 6px 22px}
+.marke b{font-family:var(--schrift);font-weight:800;font-size:30px;letter-spacing:-.035em;color:#FBFDF9;line-height:1}
+.marke span{font-family:var(--mono);font-size:16px;color:var(--emaille-hell)}
+
+.nav{display:flex;flex-direction:column;gap:6px}
+.plakette{
+  display:flex;align-items:center;gap:11px;width:100%;
+  background:var(--emaille-tief);border:1px solid rgba(255,255,255,.10);
+  border-left:4px solid transparent;border-radius:3px;padding:11px 13px;cursor:pointer;text-align:left;
+  color:#DCE7E0;font-family:var(--schrift);font-weight:600;font-size:16px;letter-spacing:-.005em;
+  transition:background .14s ease,color .14s ease;
+}
+.plakette:hover{background:#0B4A3D;color:#FBFDF9}
+.plakette[aria-current="page"]{background:var(--blech);color:var(--tinte);border-left-color:var(--signal);border-color:var(--blech)}
+.plakette .zahl{margin-left:auto;font-family:var(--mono);font-size:16px;font-weight:400;color:#A7BCB4}
+.plakette[aria-current="page"] .zahl{color:var(--tinte-weich)}
+.plakette svg{flex:none;width:18px;height:18px}
+
+.stand{margin:22px 4px 0;padding:14px 6px 0;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
+.stand p{flex:1 1 130px;font-size:16px;line-height:1.4;color:var(--emaille-hell)}
+.stand p b{font-weight:600;color:#F1F6EF}
+/* Ruhig, solange nichts ansteht; erst „mit Neuem" (.neu) macht ihn zum Signal. Der Knopf ist
+   zugleich der Weg in die Update-Ansicht, deshalb nie disabled. */
+.standknopf{
+  background:transparent;border:1px solid rgba(255,255,255,.3);color:var(--emaille-hell);border-radius:3px;
+  padding:6px 13px;cursor:pointer;white-space:nowrap;font-family:var(--schrift);font-weight:500;
+  font-size:16px;letter-spacing:-.005em;transition:background .14s ease,border-color .14s ease,color .14s ease;
+}
+.standknopf:hover{background:var(--emaille-hoch);color:#F1F6EF}
+.standknopf.neu{border-color:var(--emaille-hell);background:var(--emaille-hoch);color:#F1F6EF;font-weight:600}
+
+.einstellungen{
+  margin-top:auto;padding:14px 6px 0;display:flex;align-items:center;gap:11px;width:100%;
+  background:transparent;border:0;border-top:1px solid rgba(255,255,255,.16);cursor:pointer;text-align:left;
+  color:var(--emaille-hell);font-family:var(--schrift);font-weight:600;font-size:16px;letter-spacing:-.005em;
+  transition:color .14s ease;
+}
+.einstellungen:hover{color:#FBFDF9}
+.einstellungen svg{flex:none;width:18px;height:18px}
+
+.kopf{background:var(--blech);border-bottom:2px solid var(--tinte);padding:18px 34px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 24px}
+.kopf .mono{color:var(--tinte-weich)}
+.buehne{padding:30px 34px 76px;max-width:1200px}
+
+.meldung{
+  display:flex;gap:14px;align-items:flex-start;margin:0 34px;padding:13px 16px;
+  background:var(--signal-blass);border:1px solid #E9B99C;border-left:5px solid var(--signal);border-radius:3px;
+}
+.meldung[hidden]{display:none}
+/* pre-line: Kernmeldungen sind mehrzeilig (Grund, Aufzählung, Handlungszeile), etwa der Abbruch bei
+   lokalen Änderungen mit den Checkout-Pfaden (F31a). Ohne das liefe alles zu einer Zeile zusammen. */
+.meldung p{font-size:16px;white-space:pre-line}
+.meldung button{margin-left:auto;background:none;border:0;cursor:pointer;padding:2px 6px;color:var(--signal-tief);font-weight:700;font-size:16px}
+
+.ansichtskopf{margin-bottom:26px;max-width:62ch}
+.ansichtskopf h1{font-size:clamp(26px,3.4vw,34px);font-weight:800;letter-spacing:-.028em}
+.ansichtskopf p{margin-top:10px;color:var(--tinte-weich);font-size:17px}
+
+.werkzeuge{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:18px}
+.suche{position:relative;flex:1 1 320px;min-width:260px}
+.suche input{
+  width:100%;font:inherit;font-size:16px;padding:11px 14px 11px 44px;background:var(--blech);
+  border:1px solid var(--strich-ui);border-bottom:2px solid var(--tinte);border-radius:3px;color:var(--tinte);
+}
+.suche input::placeholder{color:var(--tinte-leise);opacity:1}
+.suche svg{position:absolute;left:14px;top:13px;width:18px;height:18px;stroke:var(--tinte-weich);fill:none}
+
+.filter{display:flex;flex-wrap:wrap;gap:7px}
+.chip{
+  background:transparent;border:1px solid var(--strich-ui);border-radius:22px;padding:7px 15px;cursor:pointer;
+  font-family:var(--schrift);font-weight:600;font-size:16px;letter-spacing:-.005em;color:var(--tinte-weich);
+  display:inline-flex;align-items:center;gap:8px;transition:border-color .14s ease,color .14s ease;
+}
+.chip:hover{border-color:var(--tinte-weich);color:var(--tinte)}
+.chip i{width:10px;height:10px;border-radius:2px;background:currentColor;display:inline-block}
+.chip[aria-pressed="true"]{background:var(--tinte);border-color:var(--tinte);color:var(--blech)}
+/* Harness-Zeichen im Chip (E53 Pkt. 1): kleiner als die Standardgröße, gap übernimmt den Abstand. */
+.chip .hsymbol{width:15px;height:15px;margin-right:0}
+
+.katalogzahl{margin:0 0 12px;font-size:16px;color:var(--tinte-weich)}
+.zeilen{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}
+.zeile{
+  background:var(--blech);border:1px solid var(--strich-zart);border-left:5px solid var(--q1);border-radius:3px;
+  padding:15px 18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;align-items:center;
+  transition:transform .13s ease,box-shadow .13s ease,border-color .13s ease;
+}
+.zeile:hover{transform:translateY(-2px);box-shadow:0 4px 0 -1px rgba(22,33,29,.13);border-color:var(--strich)}
+.zeile[hidden]{display:none}
+.zeile h3{font-size:19px;font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+.zeile .beschreibung{color:var(--tinte-weich);font-size:16px;margin-top:5px}
+.zeile .herkunft{margin-top:7px;color:var(--tinte-leise)}
+.zeile .herkunft b{font-weight:400;color:var(--tinte-leise)}
+/* In der Katalogzeile tritt der Quellen-Link zurück, er steht neben Ref und Marken (entwurf/gui.html). */
+.zeile .herkunft .qlink{color:var(--tinte-leise)}
+.zeile .herkunft .qlink:hover{color:var(--signal-tief)}
+
+.merker{
+  font-family:var(--schrift);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;
+  border:1px solid var(--messing);color:var(--messing-tief);border-radius:2px;padding:1px 8px;white-space:nowrap;line-height:1.5;
+}
+.merker.doppelt{border-color:var(--strich-ui);color:var(--tinte-weich)}
+/* Dezente Variante für Besonderheiten aus dem Frontmatter im Skill-Katalog (E55): informativ,
+   deshalb neutral statt der Messing-Farbe. Keine Versalien: die Marke zitiert
+   Befehle wie /name, Großschreibung würde sie verfälschen. Damit gilt die 16px-Untergrenze
+   (15px sind nur für versale Etiketten erlaubt). */
+.merker.leise{
+  border-color:var(--strich-ui);color:var(--tinte-weich);
+  text-transform:none;letter-spacing:normal;font-size:16px;font-weight:400;
+}
+/* Hooks und vorab erlaubte Werkzeuge sind sicherheitsrelevant, deshalb doch Messing (F11). */
+.merker.leise.warnend{border-color:var(--messing);color:var(--messing-tief)}
+.marken{display:inline-flex;gap:6px;flex-wrap:wrap}
+.wahlzeile .marken{margin-left:8px}
+
+/* Aufklapp-Umschalter einer Skill-Zeile (E55): eigener Button statt role="button" auf einem Div,
+   weil die Zeile selbst keinen Klickbereich ist (die Marken und der Verlinken-Knopf liegen daneben). */
+.aufklappknopf{
+  background:transparent;border:1px solid var(--strich-ui);border-radius:3px;width:34px;height:34px;
+  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .14s ease;flex:none;
+}
+.aufklappknopf:hover{border-color:var(--tinte-weich)}
+.aufklappknopf[aria-expanded="true"] .akkordeonpfeil{transform:rotate(180deg)}
+/* Pfeil auf hellem Grund (die Zeile ist nicht wie .zielkopf dunkel), eigene Strichfarbe. */
+.akkordeonpfeil.dunkel{stroke:var(--tinte-weich)}
+
+.zeile .skillkoerper{grid-column:1/-1;margin-top:2px;padding-top:12px;border-top:1px solid var(--strich-zart)}
+.zeile .skillkoerper[hidden]{display:none}
+.skilldetail{margin:0 0 6px;font-size:16px;color:var(--tinte-weich)}
+.skilldetail:last-child{margin-bottom:0}
+.skilldetail b{color:var(--tinte);font-weight:600}
+
+.rechts{display:flex;align-items:center;gap:16px;justify-self:end}
+.schilder{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end;max-width:430px;position:relative}
+.schilder::before{content:"";width:18px;height:1px;background:var(--strich-ui);flex:none}
+.schilder.leer::before{display:none}
+.schild{
+  display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 8px;border:1.5px solid var(--signal);
+  border-radius:2px 11px 11px 2px;background:var(--signal-blass);font-family:var(--mono);font-size:16px;
+  font-weight:500;color:var(--signal-tief);white-space:nowrap;line-height:1.35;
+}
+.schild::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--signal);background:var(--platte);flex:none}
+.ohne{font-size:16px;color:var(--tinte-leise);font-style:normal}
+
+.knopf{
+  border:1.5px solid var(--tinte);background:var(--tinte);color:var(--blech);border-radius:3px;
+  padding:9px 17px;cursor:pointer;white-space:nowrap;font-family:var(--schrift);font-weight:600;
+  font-size:16px;letter-spacing:-.005em;transition:background .14s ease,border-color .14s ease,color .14s ease;
+}
+.knopf:hover{background:var(--emaille);border-color:var(--emaille)}
+.knopf.leise{background:transparent;color:var(--tinte);border-color:var(--strich-ui)}
+.knopf.leise:hover{background:transparent;border-color:var(--tinte);color:var(--tinte)}
+.knopf.signal{background:var(--signal-tief);border-color:var(--signal-tief);color:var(--signal-hell)}
+.knopf.signal:hover{background:var(--signal-dunkel);border-color:var(--signal-dunkel)}
+.knopf.gross{font-size:18px;padding:14px 26px}
+.knopf.mitsymbol{display:inline-flex;align-items:center;gap:9px}
+.knopf.mitsymbol svg{flex:none;width:18px;height:18px}
+/* Harness-Zeichen vor „Skills hinzufügen" (E53 Pkt. 4, 7): gleiche Größe wie das Ordner-Symbol,
+   ohne die eingebaute Randbreite von .hsymbol, die gap schon übernimmt. */
+.knopf.mitsymbol .hsymbol{width:18px;height:18px;margin-right:0}
+.knopf[disabled]{opacity:.55;cursor:default}
+.knopf[disabled]:hover{background:var(--tinte);border-color:var(--tinte)}
+.knopf.klein{padding:4px 13px}
+
+.ziele{display:flex;flex-direction:column;gap:18px}
+.ziel{background:var(--blech);border:1px solid var(--strich);border-radius:3px;overflow:hidden}
+/* Kopfzeile als Akkordeon-Umschalter (E45): role="button", die ganze Zeile ist klickbar. */
+.zielkopf{background:var(--emaille);color:#EAF0EA;padding:14px 20px;display:flex;flex-wrap:wrap;align-items:center;column-gap:26px;row-gap:8px;border-bottom:3px solid var(--emaille-tief);cursor:pointer}
+.zielkopf h3{font-size:18px;font-weight:700;color:#FBFDF9}
+/* Der Pfad darf kürzen statt umzubrechen (schmales Fenster): min-width:0 macht den Flex-Item
+   schrumpfbar, sonst greift text-overflow nicht. */
+.zielkopf .mono{color:var(--emaille-hell);font-size:16px;flex:1 1 160px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.zielkopf .zahl{margin-left:auto;font-family:var(--mono);font-size:16px;color:var(--emaille-zahl)}
+/* Zeichen statt Text-Badge (E45-Nachschärfung): trägt die Farbe selbst als Emoji, nur Größe passend
+   zur Kopfzeile. Eigener Randabstand, damit es neben Titel und Pfad Luft behält. */
+.warnung{font-size:19px;line-height:1;margin:0 4px}
+/* Pfeil-Indikator des Akkordeons: zeigt zu, dreht sich beim Aufklappen. */
+.akkordeonpfeil{flex:none;width:15px;height:15px;stroke:var(--emaille-hell);fill:none;stroke-width:1.8;transition:transform .14s ease}
+.zielkopf[aria-expanded="true"] .akkordeonpfeil{transform:rotate(180deg)}
+/* Fokusring nach innen: .ziel läuft über (overflow:hidden) und schnitte den außen liegenden
+   Ring der Kopfzeile ab. Helle Farbe wie in der Leiste, der Kopf ist dunkel. */
+.zielkopf:focus-visible{outline-offset:-3px;outline-color:#F0EBD8}
+.zielkoerper{padding:16px 18px 18px}
+.zielkoerper[hidden]{display:none}
+
+.gruppenkopf{display:block;margin:16px 0 0;padding:0 0 9px;font-size:19px;font-weight:800;letter-spacing:.2em;color:var(--tinte);border-bottom:2px solid var(--tinte)}
+.gruppenkopf:first-child{margin-top:0}
+
+.ziel.verzeichnis .zielkopf h3{font-family:var(--mono);letter-spacing:-.012em;word-break:break-all}
+.ziel.verzeichnis .zielkoerper > * + *{border-top:1px solid var(--strich);margin-top:16px;padding-top:14px}
+/* Icons aller am Verzeichnis beteiligten Harnesses (E49), statt des einzelnen Icons vor h3. */
+.harnesssymbole{display:inline-flex;align-items:center;color:var(--emaille-hell)}
+.harnesssymbole .hsymbol{margin-right:6px}
+.harnesssymbole .hsymbol:last-child{margin-right:0}
+.harnesszeile .mono,.konfigzeile .mono{word-break:break-all}
+
+/* Chip-Leiste „Alle" + je Harness einer, oben im Körper einer Verzeichnis-Karte (E53 Pkt. 1):
+   eigener Abstand statt der Trennlinie, die sonst zwischen den Körper-Blöcken steht. */
+.kartenchips{margin-bottom:16px}
+.ziel.verzeichnis .zielkoerper > .kartenchips + *{border-top:0;margin-top:0;padding-top:0}
+.kartenchips .hsymbol{margin-right:6px}
+/* Zielordner des gewählten Harness, wie ihn vorher der Abschnittskopf trug (25cddf6): rechts in der
+   Chip-Leiste, daneben die Inaktiv-Marke. */
+.kartenchips .kartenordner{margin-left:auto;align-self:center;color:var(--tinte-weich);word-break:break-all}
+.kartenchips .ruhend{align-self:center}
+
+.hsymbol{flex:none;width:17px;height:17px;margin-right:8px;vertical-align:-.19em}
+/* Das Hermes-Zeichen ist ein Bitmap-Favicon mit weißem Grund: leicht gerundet wie eine Tab-Kachel. */
+img.hsymbol{border-radius:3px}
+
+/* Kleine Harness-Zeichen an einer Zeile (E53 Pkt. 2, 5): gebündelte Skill-Zeile unter „Alle" und
+   fremde/ignorierte Einträge dort, je mit Sammel-aria-label statt einzelner Beschriftung. Eigene,
+   kleinere Größe statt der Kopfzeilen-Optik von .harnesssymbole, die für den dunklen Zielkopf gilt. */
+.zeilenzeichen{display:inline-flex;align-items:center;vertical-align:-.15em;margin-right:6px}
+.zeilenzeichen .hsymbol{width:14px;height:14px;margin-right:3px}
+.zeilenzeichen .hsymbol:last-child{margin-right:0}
+.linkliste .name .zeilenzeichen{margin-right:8px}
+.fremdname{display:inline-flex;align-items:center}
+
+/* Fünf Spalten (E60, entwurf/gui.html): Icon, Skill-Name, Beschreibung (die breiteste, sie
+   beantwortet die Frage, wegen der die Tabelle gelesen wird), Quelle, Aktion. */
+.linkkopf,.linkliste li{
+  display:grid;
+  grid-template-columns:20px minmax(0,180px) minmax(0,1fr) minmax(0,152px) 176px;
+  gap:4px 16px;align-items:start;
+}
+.linkkopf{padding-bottom:8px;border-bottom:1px solid var(--strich)}
+.linkliste{list-style:none;margin:0;padding:0}
+.linkliste li{padding:9px 0;border-bottom:1px solid var(--strich-zart)}
+.linkliste li:last-child{border-bottom:0}
+.linkliste .repo{margin-top:1px}
+.linkliste .name{font-family:var(--mono);font-size:16px;letter-spacing:-.012em;color:var(--tinte);word-break:break-word;line-height:1.4}
+/* Zwei Zeilen sind das Dach: ein Satz passt hinein, eine überlange Zeile sprengt die Tabelle
+   nicht. Der volle Satz steht dann im title. */
+.linkliste .was{
+  font-size:16px;color:var(--tinte-weich);line-height:1.4;
+  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
+}
+.linkliste .was.fehlt{color:var(--tinte-leise);font-style:italic}
+.linkliste .quelle{display:flex;flex-wrap:wrap;align-items:center;gap:3px 9px;line-height:1.4}
+.linkliste .quelle .ref{font-family:var(--mono);font-size:16px;letter-spacing:-.012em;color:var(--tinte-leise)}
+/* Der Grund steht nur da, wenn er nicht „von Hand" heisst (der Normalfall entfällt ersatzlos): ein
+   stiller Vermerk, keine Marke mit Umrandung. */
+.linkliste .quelle .grundmarke{font-size:16px;color:var(--tinte-leise);line-height:1.4}
+.linkliste .kein-weg{font-size:16px;color:var(--tinte-leise);justify-self:end;text-align:right;line-height:1.4}
+/* Rechtsbündig in der Aktionsspalte, wie der Plugin-Vermerk daneben: ohne das dehnt das Raster den
+   Knopf über die volle Spaltenbreite (entwurf/gui.html). */
+.linkliste .knopf.klein{margin-top:-4px;justify-self:end}
+
+/* E47: Knopf unterhalb der Link-Liste, ebenso als Ersatz der zweiten Hälfte des Leerhinweises. */
+.zielfuss{margin-top:14px;display:flex;justify-content:flex-end}
+.leerzeile{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
+.leerzeile .ohne{flex:1 1 260px;margin:0}
+.leerzeile .knopf{margin-left:auto}
+
+.dkoerper .suche{margin-bottom:14px}
+
+.fremdkasten{margin:18px 0;padding:14px 16px;background:var(--messing-blass);border:1px dashed var(--messing);border-radius:3px;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
+.fremdkasten .fremdtext{flex:1 1 320px}
+.fremdkasten p{font-size:16px;color:var(--messing-satt)}
+.fremdkasten strong{font-weight:700}
+.fremdnamen{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:16px;letter-spacing:-.012em;color:var(--messing-satt);line-height:1.45}
+.fremdnamen li{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px}
+.fremdkopf{display:flex;flex-direction:column;gap:2px}
+.fremdkopf .mono{font-size:14px;color:var(--tinte-weich)}
+.fremdknoepfe{display:flex;gap:8px;flex-wrap:wrap}
+.fremderklaerung{margin-top:9px}
+.fremdursache{flex-basis:100%;font-size:14px;color:var(--tinte-weich)}
+.fremdursache .tipps{margin-top:4px}
+.fremdursache .tippkopf{font-size:13px;font-weight:600;color:var(--tinte-weich);margin:0}
+.fremdursache .tippliste{list-style:none;margin:2px 0 0;padding:0;font-size:14px;color:var(--tinte-weich)}
+.fremdursache .tippliste li{margin-top:2px}
+
+.ignoriertzeile{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:15px;color:var(--tinte-leise)}
+.ignoriertzahl{font-weight:600}
+.ignoriertname{display:flex;align-items:center;gap:6px;font-family:var(--mono);letter-spacing:-.012em}
+
+.startfeld{background:var(--blech);border:1px solid var(--strich);border-radius:3px;padding:28px;display:flex;flex-wrap:wrap;gap:22px;align-items:center}
+.startfeld p{flex:1 1 320px;color:var(--tinte-weich);font-size:16px}
+.lauf{margin-top:20px;background:var(--emaille-tief);border-radius:3px;padding:18px 20px}
+.lauf ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
+.lauf li{font-family:var(--mono);font-size:16px;color:var(--emaille-zahl);display:flex;gap:14px}
+.lauf li b{color:#F1F6EF;font-weight:500}
+
+.bericht{margin-top:20px;display:flex;flex-direction:column;gap:14px}
+.block{background:var(--blech);border:1px solid var(--strich);border-radius:3px;padding:17px 19px;border-left:5px solid var(--emaille)}
+.block.uebersprungen{border-left-color:var(--messing);background:var(--messing-blass)}
+.block.entfernt{border-left-color:var(--signal)}
+.block .etikett{display:block;margin-bottom:11px}
+.block ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;font-size:16px}
+.block li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline}
+.block .marke-ok{color:var(--emaille-hoch);font-weight:700}
+.block .marke-aus{color:var(--messing-tief);font-weight:700}
+.block .pfad{color:var(--tinte-weich)}
+
+.markt{margin-bottom:26px}
+.marktkopf{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--tinte)}
+.marktkopf h3{font-size:18px;font-weight:700}
+.marktkopf .mono{color:var(--tinte-weich)}
+.pluginzeile{background:var(--blech);border:1px solid var(--strich-zart);border-radius:3px;padding:16px 18px;margin-bottom:8px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 24px;align-items:center}
+.pluginzeile h4{margin:0;font-family:var(--schrift);font-weight:700;font-size:18px;letter-spacing:-.015em}
+.pluginzeile p{color:var(--tinte-weich);font-size:16px;margin-top:5px}
+.kette{margin-top:10px;display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-family:var(--mono);font-size:16px;color:var(--tinte-weich)}
+.kette .glied{border:1px solid var(--strich-ui);border-radius:2px;padding:3px 9px;background:var(--papier)}
+.kette .pfeil{color:var(--signal-tief)}
+
+dialog{
+  border:0;padding:0;max-width:min(660px,calc(100vw - 28px));width:100%;max-height:calc(100vh - 32px);
+  overflow:hidden;background:var(--blech);color:var(--tinte);border-radius:4px;border-top:6px solid var(--signal);
+  box-shadow:0 22px 60px rgba(9,30,24,.42);
+}
+dialog form{display:flex;flex-direction:column;max-height:calc(100vh - 38px)}
+dialog::backdrop{background:rgba(9,45,37,.62)}
+.dkopf{padding:24px 28px 0}
+.dkopf .etikett{display:block;margin-bottom:9px;color:var(--signal-tief)}
+.dkopf h3{font-size:23px;font-weight:800;letter-spacing:-.024em}
+.dkopf p{margin-top:11px;color:var(--tinte-weich);font-size:17px}
+/* Mehrere Hinweise stehen untereinander (E26, F32). */
+#de-hinweis{white-space:pre-line}
+#de-hinweis[hidden]{display:none}
+.dkoerper{padding:18px 28px;overflow:auto;min-height:0}
+.dfuss{padding:16px 28px 20px;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;border-top:1px solid var(--strich-zart);background:#EFF2EC}
+.dfuss .links{margin-right:auto}
+
+.wahl{display:flex;flex-direction:column;gap:9px}
+.wahlzeile{
+  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;border:1px solid var(--strich-ui);
+  border-radius:3px;padding:13px 15px;cursor:pointer;background:var(--papier);
+  transition:border-color .12s ease,background .12s ease;position:relative;
+}
+.wahlzeile:hover{border-color:var(--tinte-weich)}
+.wahlzeile:has(input:checked){border-color:var(--signal);background:var(--signal-blass)}
+.wahlzeile:has(input:focus-visible){outline:3px solid var(--signal);outline-offset:2px}
+.wahlzeile:has(input:disabled){opacity:.66;cursor:default}
+/* Wie bei .zeile: die Klasse setzt display, also braucht hidden eine eigene Regel, sonst filtert
+   das Suchfeld im Skills-Dialog (E47) nichts weg. */
+.wahlzeile[hidden]{display:none}
+.wahlzeile.quellfarbe{border-left-width:4px}
+.wahlzeile input{margin:4px 0 0;width:19px;height:19px;accent-color:var(--signal-tief)}
+.wahlzeile input.versteckt{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none}
+.wahlzeile b{font-family:var(--schrift);font-weight:700;font-size:17px;letter-spacing:-.012em}
+.wahlzeile .mono{display:block;color:var(--tinte-weich);margin-top:3px}
+.wahlzeile .notiz{display:block;margin-top:8px;font-size:16px;color:var(--messing-satt);background:var(--messing-blass);border-left:3px solid var(--messing);padding:7px 10px;border-radius:0 2px 2px 0}
+.nummer{
+  font-family:var(--mono);font-size:16px;font-weight:500;width:28px;height:28px;flex:none;display:grid;
+  place-items:center;border:1.5px solid var(--tinte);border-radius:50%;margin-top:1px;
+}
+.wahlzeile:has(input:checked) .nummer{background:var(--signal-tief);border-color:var(--signal-tief);color:var(--signal-hell)}
+
+.probeliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
+.probeliste li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline;border-bottom:1px solid var(--strich-zart);padding-bottom:8px;font-size:16px}
+.probeliste li:last-child{border-bottom:0}
+.probeliste .ok{color:var(--emaille-hoch);font-weight:700}
+.probeliste .aus{color:var(--messing-tief);font-weight:700}
+.probeliste .mono{display:block;color:var(--tinte-weich);margin-top:2px}
+.probeliste .tipps{margin-top:6px}
+.probeliste .tippkopf{font-size:14px;font-weight:600;color:var(--tinte-weich);margin:0}
+.probeliste .tippliste{list-style:none;margin:2px 0 0;padding:0;font-size:15px;color:var(--tinte-weich)}
+.probeliste .tippliste li{margin-top:2px}
+
+.feld{display:block;margin-bottom:20px}
+.feld .etikett,.feldtitel{display:block;margin-bottom:8px}
+.feld input{
+  width:100%;font:inherit;font-family:var(--mono);font-size:16px;letter-spacing:-.012em;padding:11px 13px;
+  background:var(--papier);border:1px solid var(--strich-ui);border-bottom:2px solid var(--tinte);border-radius:3px;color:var(--tinte);
+}
+
+.dialogfehler{color:var(--signal-tief);font-size:15px;margin:0}
+.dialogfehler[hidden]{display:none}
+
+.pfadzeile{display:flex;gap:10px;align-items:stretch}
+.pfadzeile .pfadfeld{flex:1;min-width:0}
+.pfadzeile .knopf{flex:none;white-space:nowrap}
+.pfadfeld{position:relative;display:block}
+.pfadfeld input{padding-left:42px}
+.pfadfeld svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--tinte-weich);fill:none;pointer-events:none}
+
+.pfadliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
+.pfadliste li{font-family:var(--mono);font-size:16px;background:var(--papier);border:1px solid var(--strich-zart);border-radius:2px;padding:9px 12px;word-break:break-all}
+
+.erfolgliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
+.erfolgliste li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:baseline;font-size:16px}
+.erfolgliste .ok{color:var(--emaille-hoch);font-weight:700}
+.erfolgliste .aus{color:var(--messing-tief);font-weight:700}
+.erfolgliste .mono{display:block;color:var(--tinte-weich)}
+
+.abschnitt + .abschnitt{margin-top:22px;padding-top:20px;border-top:1px solid var(--strich)}
+.abschnitt > .etikett{display:block;margin-bottom:6px}
+.abschnitt > p{font-size:16px;color:var(--tinte-weich);margin-bottom:13px;max-width:58ch}
+
+/* Zwei Zeilen je Quelle (E60): oben Icon und Name, so wie die Quelle überall in hmgr heisst,
+   darunter zurückgenommen die volle Adresse, Ref und Skill-Zahl. Die farbigen Kantenstreifen
+   entfallen ersatzlos, das Icon trägt jetzt die Unterscheidung. */
+.quellenliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
+.quellenliste li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:3px 10px;align-items:center}
+.quellenliste .repo{grid-column:1;grid-row:1}
+/* Umbenennen und Entfernen sitzen zusammen in Spalte 3, sonst lägen sie als eigene Grid-Kinder
+   beide in derselben Zelle übereinander. Spalte und Zeile stehen ausdrücklich da, damit sie nicht
+   in der zweiten Zeile neben der Adresse landen. */
+.quellenliste li .quellenknoepfe{grid-column:3;grid-row:1;align-self:center;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
+.quellenliste b{grid-column:2;grid-row:1;display:block;font-family:var(--mono);font-weight:500;font-size:16px;color:var(--tinte);word-break:break-word;line-height:1.35}
+.quellenliste small{grid-column:2;grid-row:2;font-family:var(--mono);font-size:16px;color:var(--tinte-weich);line-height:1.4;overflow-wrap:anywhere}
+/* Stift-Knopf fürs Umbenennen (ersetzt den Textknopf), zurückgenommen wie in den Einstellungen sonst. */
+.umbenennen{
+  display:inline-flex;align-items:center;justify-content:center;
+  background:none;border:0;padding:5px;border-radius:2px;cursor:pointer;
+  color:var(--tinte-leise);transition:color .12s ease;
+}
+.umbenennen:hover{color:var(--tinte)}
+.umbenennen svg{width:16px;height:16px}
+/* Der „Quelle hinzufügen …"-Knopf gehört nicht mehr zur Liste, er braucht Luft nach oben. */
+#quelleneu{margin-top:24px}
+
+.leerhinweis{padding:24px;text-align:center;color:var(--tinte-weich);font-size:16px;background:var(--blech);border:1px dashed var(--strich);border-radius:3px}
+
+/* Harness-Schalter im Einstellungen-Dialog (entwurf/gui.html). */
+.harnessliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
+.harnessschalter{
+  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;cursor:pointer;
+  background:var(--blech);border:1px solid var(--strich-ui);border-radius:3px;padding:12px 15px;
+  transition:border-color .12s ease;
+}
+.harnessschalter:hover{border-color:var(--tinte-weich)}
+.harnessschalter input{
+  appearance:none;-webkit-appearance:none;
+  margin:3px 0 0;flex:none;width:38px;height:22px;
+  border:1.5px solid var(--strich-ui);border-radius:11px;background:var(--blech);
+  position:relative;cursor:pointer;transition:background .14s ease,border-color .14s ease;
+}
+.harnessschalter input::after{
+  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
+  background:var(--strich-ui);transition:transform .14s ease,background .14s ease;
+}
+.harnessschalter input:checked{background:var(--emaille);border-color:var(--emaille)}
+.harnessschalter input:checked::after{background:var(--blech);transform:translateX(16px)}
+.harnessschalter b{display:flex;align-items:center;font-family:var(--mono);font-weight:500;font-size:16px;color:var(--tinte);line-height:1.35;word-break:break-word}
+.harnessschalter small{display:block;font-size:16px;color:var(--tinte-weich);line-height:1.4}
+
+/* Ziel eines abgeschalteten Harness: still, kein Alarm, nur ein Vermerk. */
+.ruhend{
+  font-family:var(--schrift);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;
+  background:var(--platte);color:var(--tinte);border-radius:2px;padding:2px 9px;border:1px solid var(--strich-ui);
+}
+/* Der Weg zurück für Konfiguration, die keinen aktiven Harness mehr hat. */
+.ruhezeile{
+  display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;
+  margin-bottom:14px;padding:11px 14px;
+  background:var(--messing-blass);border:1px solid var(--messing);border-radius:3px;
+}
+.ruhezeile p{flex:1 1 300px;font-size:16px;color:var(--messing-satt)}
+.ruhezeile svg{flex:none;width:18px;height:18px;stroke:var(--messing-tief);fill:none}
+.ruhezeile .knopf{margin-left:auto}
+
+/* Sichtbare Konfiguration eines Ziels, hier der verwaltete Hermes-Ordner aus der config.yaml (E56). */
+.konfigzeile{
+  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
+  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--strich-ui);
+}
+.konfigzeile b{font-weight:700;font-size:16px}
+.konfigzeile .mono{color:var(--tinte)}
+.konfigzeile .konfigquelle{font-size:16px;color:var(--tinte-leise)}
+.konfigzeile .knopf{margin-left:auto}
+
+/* Fünf Spalten brauchen Breite, sonst zerfällt die Beschreibung in Wortsalat: der Link stapelt hier
+   schon auf drei Zeilen, das Icon bleibt als Anker links stehen, die Aktion rechts (entwurf/gui.html). */
+@media (max-width:1180px){
+  .linkkopf{display:none}
+  .linkliste li{grid-template-columns:20px minmax(0,1fr) auto;gap:3px 12px}
+  .linkliste .repo{grid-column:1;grid-row:1}
+  .linkliste .name{grid-column:2;grid-row:1}
+  .linkliste .was{grid-column:2;grid-row:2}
+  .linkliste .quelle{grid-column:2;grid-row:3}
+  .linkliste .knopf.klein,.linkliste .kein-weg{grid-column:3;grid-row:1 / span 3;align-self:center}
+  .linkliste .knopf.klein{margin-top:0}
+  .linkliste .kein-weg{white-space:normal}
+}
+
+@media (max-width:980px){
+  .app{grid-template-columns:1fr}
+  .leiste{position:static;height:auto;border-right:0;border-bottom:3px solid var(--emaille-tief);padding:16px 18px 20px}
+  .marke{padding-bottom:16px}
+  .nav{flex-direction:row;flex-wrap:wrap}
+  .plakette{width:auto;flex:1 1 160px}
+  .einstellungen{margin-top:14px}
+  .kopf,.meldung{padding-left:20px;padding-right:20px}
+  .meldung{margin:0 20px}
+  .buehne{padding:22px 20px 64px}
+  .zeile{grid-template-columns:minmax(0,1fr)}
+  .rechts{justify-self:start;flex-wrap:wrap}
+  .schilder{justify-content:flex-start;max-width:none}
+  .schilder::before{display:none}
+  .pluginzeile{grid-template-columns:minmax(0,1fr)}
+  /* Die Linktabelle steht schon seit 1180px gestapelt, hier rutscht nur noch die Aktion unter den
+     Text, damit die drei Zeilen die volle Breite haben. */
+  .linkliste .knopf.klein,.linkliste .kein-weg{grid-column:2;grid-row:4;justify-self:start;text-align:left;margin-top:6px}
+  .dkopf{padding:20px 20px 0}
+  .dkoerper{padding:16px 20px}
+  .dfuss{padding:14px 20px 18px}
+}
+
+@media (prefers-reduced-motion:reduce){
+  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
+  .zeile:hover{transform:none}
+}