/* cf-fernwartung.css — Bereich "Fernwartung" (2026-07-31).
 *
 * DESIGN-HERKUNFT: dieselbe Higgsfield-Bauform, die der Elite Club (cf-abx.css) und die
 * Intelligenz (cf-intel.css) tragen — Glow-Hero, Sektionskopf ueber jedem Raster, Icon-Plate
 * mit eigenem Farbton je Art, schraege Versal-Badge, Invers-Abschlussflaeche. Uebernommen sind
 * die MUSTER, nie die Farbwerte: jede Farbe kommt aus den Konsolen-Token oder wird per
 * color-mix daraus abgeleitet. Damit bleibt guard-whitelabel-tokens.mjs gueltig und beide
 * Themes tragen den Bereich ohne Sonderfall.
 *
 * WAS HIER STAERKER IST ALS EINE LISTE: der Gegenstand dieses Bereichs ist ein RECHT — wer
 * darf was auf welchem Rechner. Ein Recht liest man nicht in Zeilen, man liest es in einer
 * Kreuzung. Deshalb ist das Herzstueck die Freigabe-Matrix (.fw-mx): Zugaenge als Zeilen,
 * Systeme als Spalten, in der Zelle die Stufe. Eine leere Zelle ist eine Aussage — "hier ist
 * nichts freigegeben" — und sieht auch so aus, statt einfach zu fehlen.
 *
 * GERAETE-GLYPHEN sind echte Zeichnungen (Sprite-Symbole i-monitor/i-laptop/i-tower/
 * i-terminal/i-screenshare/i-bot), keine Buchstaben und keine Emojis: ein Bereich, in dem man
 * Rechner auseinanderhalten muss, braucht am Rechner ein Bild, nicht eine Abkuerzung. */

/* ================================================================= Hero */
.fw-hero{position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb,var(--lime) 42%,var(--line));
  background:
    radial-gradient(120% 150% at 8% -25%,color-mix(in srgb,var(--lime) 24%,var(--surface)) 0%,var(--surface) 58%),
    var(--surface);
  padding:30px 32px;margin-bottom:26px}
/* Zweite Lichtquelle rechts unten — gibt der Flaeche Tiefe, ohne ein zweites Farbsystem. */
.fw-hero::after{content:'';position:absolute;inset:auto -14% -60% auto;width:54%;height:130%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--info) 26%,transparent) 0%,transparent 74%)}
/* Feines Raster als Textur: liest sich als "Technik", ohne ein Bild laden zu muessen. */
.fw-hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 90% at 80% 110%,#000 0%,transparent 70%);
  mask-image:radial-gradient(120% 90% at 80% 110%,#000 0%,transparent 70%)}
.fw-hero>*{position:relative;z-index:1}
.fw-hero h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.4px;line-height:1.08;
  font-size:clamp(1.35rem,2.6vw,1.9rem);margin:10px 0 8px;max-width:660px}
.fw-hero .fw-sub{color:var(--ink-soft);font-size:.92rem;max-width:640px;line-height:1.55}
.fw-badge{display:inline-block;background:var(--lime);color:var(--on-lime);font-family:var(--disp);font-weight:800;
  text-transform:uppercase;letter-spacing:.6px;font-size:.68rem;padding:4px 11px;border-radius:6px;transform:skewX(-8deg)}
.fw-badge>span{display:inline-block;transform:skewX(8deg)}
.fw-badge.alt{background:var(--info-bg);color:var(--info)}
.fw-badge.warn{background:var(--warn-bg);color:var(--warn)}

/* Kennzahlen-Leiste im Hero — vier Werte, eine Grundlinie. */
.fw-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:14px;margin-top:20px}
.fw-kpi{border:1px solid var(--line);border-radius:var(--r);background:color-mix(in srgb,var(--surface-2) 70%,transparent);
  padding:13px 15px;min-width:0}
.fw-kpi b{display:block;font-family:var(--disp);font-weight:800;font-size:1.55rem;line-height:1.05;letter-spacing:-.02em}
.fw-kpi span{display:block;font-size:.74rem;color:var(--ink-faint);margin-top:4px;line-height:1.35;min-height:2.4em}
.fw-kpi.k-warn b{color:var(--warn)}
.fw-kpi.k-good b{color:var(--good)}

/* ================================================================= Herkunftszeile */
/* Ohne diese Zeile kann der Leser gemessene Zahlen nicht von Beispielen unterscheiden —
   und genau das ist bei einem Zugriffsrecht der teuerste Irrtum. */
.fw-quelle{font-size:.82rem;color:var(--ink-faint);margin:0 0 16px;padding:9px 13px;border-radius:var(--r-sm);
  background:var(--surface-2);border-left:3px solid var(--line-strong)}
.fw-quelle-an{color:var(--good);background:var(--good-bg);border-left-color:var(--good)}
.fw-quelle-aus{color:var(--warn);background:var(--warn-bg);border-left-color:var(--warn)}

/* ================================================================= Systeme */
.fw-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(298px,1fr))}
@media(max-width:640px){.fw-grid{grid-template-columns:1fr}}

.fw-sys{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0;
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.fw-sys:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.fw-sys>*{min-width:0;max-width:100%}
/* Ein freigegebenes System traegt einen Lichtsaum — der Zustand ist die wichtigste Eigenschaft
   der Karte und darf nicht als kleines Wort am Rand stehen. */
.fw-sys.frei{border-color:color-mix(in srgb,var(--good) 55%,var(--line));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--good) 18%,transparent)}
.fw-sys.aus{opacity:.72;border-style:dashed}

/* Die Zustands-Marke steht in einer EIGENEN Zeile. Vorher lag sie neben dem Titel, und bei
   ~300 px Kachelbreite blieben dem Titel keine 90 px: aus "Relay-Gerät 326913569" wurde
   "Relay-Gerät 3269135 / 69", aus "Bildschirmfreigabe" ein Bruch mitten im Wort. Kein Guard
   hatte das gemeldet — sichtbar wurde es erst am Bild ([[feedback_flex_verschluckt_leerzeichen]]).
   flex-basis:100% laesst die Marke umbrechen, statt dem Titel die Breite zu nehmen. */
.fw-sh{display:flex;align-items:flex-start;gap:13px;min-width:0;flex-wrap:wrap}
.fw-sh>.fw-pill{flex-basis:100%;margin-top:2px}
/* Geraete-Plate: 52 px, abgerundet, Farbton nach Art. Das ist der Anker der Karte. */
.fw-plate{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:none;position:relative;
  background:var(--surface-3);color:var(--ink-soft)}
.fw-plate .ic{width:26px;height:26px}
.fw-plate.a-windows{background:var(--info-bg);color:var(--info)}
.fw-plate.a-macos{background:var(--surface-3);color:var(--ink)}
.fw-plate.a-linux{background:var(--warn-bg);color:var(--warn)}
.fw-plate.a-rustdesk{background:color-mix(in srgb,var(--lime) 28%,var(--surface-2));color:color-mix(in srgb,var(--on-lime) 68%,var(--ink))}
.fw-plate.a-rdp{background:var(--info-bg);color:var(--info)}
.fw-plate.a-vnc{background:var(--good-bg);color:var(--good)}
.fw-plate.a-ssh{background:var(--surface-3);color:var(--ink)}
.fw-plate.a-dienst{background:var(--surface-3);color:var(--ink-faint)}
/* Lebenszeichen-Punkt auf der Plate — gruen nur, wenn eine wirksame Freigabe besteht. */
.fw-plate .fw-dot{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--surface);background:var(--ink-faint)}
.fw-sys.frei .fw-plate .fw-dot{background:var(--good)}
.fw-sys.aus .fw-plate .fw-dot{background:var(--bad)}

.fw-sh h4{font-size:1.02rem;font-weight:800;letter-spacing:-.01em;margin:0;overflow-wrap:break-word;hyphens:none}
.fw-sh .fw-art{font-size:.76rem;color:var(--ink-faint);margin-top:3px}
.fw-meta{display:flex;flex-direction:column;gap:5px;font-size:.84rem;color:var(--ink-soft)}
.fw-meta b{color:var(--ink);font-weight:700}
.fw-akt{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.fw-akt .btn{flex:none}

/* ================================================================= Zustands-Marken */
.fw-pill{display:inline-flex;align-items:center;gap:6px;flex:none;max-width:100%;
  font-size:.7rem;font-weight:800;letter-spacing:.04em;padding:3px 10px;border-radius:20px;white-space:nowrap}
.fw-pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.fw-pill.p-frei{color:var(--good);background:var(--good-bg)}
.fw-pill.p-zu{color:var(--ink-faint);background:var(--surface-3)}
.fw-pill.p-aus{color:var(--bad);background:var(--bad-bg)}
.fw-pill.p-frist{color:var(--warn);background:var(--warn-bg)}
.fw-pill.p-ki{color:var(--info);background:var(--info-bg)}
.fw-pill.p-mensch{color:var(--ink-soft);background:var(--surface-3)}

/* Umfang als Leiter, nicht als Wort: drei Stufen, gefuellt bis zur erreichten. */
.fw-leiter{display:inline-flex;align-items:center;gap:3px;vertical-align:middle}
.fw-leiter i{display:block;width:7px;border-radius:2px;background:var(--line-strong)}
.fw-leiter i:nth-child(1){height:7px}
.fw-leiter i:nth-child(2){height:11px}
.fw-leiter i:nth-child(3){height:15px}
.fw-leiter.u-1 i:nth-child(-n+1),.fw-leiter.u-2 i:nth-child(-n+2),.fw-leiter.u-3 i:nth-child(-n+3){background:var(--lime)}

/* ================================================================= Freigabe-Matrix */
.fw-mxwrap{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow-x:auto}
.fw-mx{border-collapse:separate;border-spacing:0;width:100%;min-width:min(100%,640px);font-size:.85rem}
.fw-mx th,.fw-mx td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.fw-mx thead th{position:sticky;top:0;background:var(--surface-2);font-size:.7rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.fw-mx tbody tr:last-child th,.fw-mx tbody tr:last-child td{border-bottom:0}
.fw-mx tbody tr:hover td,.fw-mx tbody tr:hover th{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
.fw-mx th.fw-rowhead{font-weight:700;color:var(--ink);white-space:normal;min-width:170px}
.fw-mx .fw-rowhead small{display:block;font-weight:500;color:var(--ink-faint);font-size:.74rem;margin-top:2px}
/* Die Zelle: Knopf, weil jede Kreuzung eine Handlung ist (freigeben oder widerrufen). */
.fw-cell{width:100%;border:1px dashed var(--line);border-radius:var(--r-sm);background:transparent;
  color:var(--ink-faint);font:inherit;font-size:.76rem;padding:8px 10px;cursor:pointer;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;
  transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease)}
.fw-cell:hover{border-color:var(--lime);color:var(--ink)}
.fw-cell.c-an{border-style:solid;border-color:color-mix(in srgb,var(--good) 50%,var(--line));
  background:var(--good-bg);color:var(--good);font-weight:700}
.fw-cell.c-frist{border-style:solid;border-color:color-mix(in srgb,var(--warn) 50%,var(--line));
  background:var(--warn-bg);color:var(--warn);font-weight:700}
.fw-cell.c-weg{border-style:solid;border-color:var(--line);background:var(--surface-2);color:var(--ink-faint)}

/* ================================================================= Zugaenge */
.fw-zg{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:20px;
  display:flex;flex-direction:column;gap:12px;min-width:0}
.fw-zg>*{min-width:0;max-width:100%}
.fw-zg.gesperrt{border-color:color-mix(in srgb,var(--bad) 45%,var(--line));background:color-mix(in srgb,var(--bad-bg) 40%,var(--surface))}
.fw-zh{display:flex;align-items:flex-start;gap:13px;min-width:0;flex-wrap:wrap}
.fw-zh>.fw-pill{flex-basis:100%;margin-top:2px}
.fw-marke{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;color:var(--ink-faint);
  background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;overflow-wrap:anywhere}
/* Das Geheimnis erscheint genau einmal — die Flaeche sagt das auch, statt es zu verschweigen. */
.fw-secret{border:1px solid color-mix(in srgb,var(--warn) 55%,var(--line));background:var(--warn-bg);
  border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.fw-secret .fw-sec-t{font-weight:800;color:var(--warn);font-size:.86rem;display:flex;align-items:center;gap:8px}
.fw-secret code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;display:block;overflow-wrap:anywhere;color:var(--ink)}

/* ================================================================= Protokoll */
.fw-log{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden}
.fw-lz{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border-bottom:1px solid var(--line);
  position:relative;min-width:0}
.fw-log .fw-lz:last-child{border-bottom:0}
/* Linke Kante traegt das Urteil: erlaubt oder verweigert, auf einen Blick von oben nach unten. */
.fw-lz::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--good)}
.fw-lz.nein::before{background:var(--bad)}
.fw-lz-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--good-bg);color:var(--good)}
.fw-lz.nein .fw-lz-ic{background:var(--bad-bg);color:var(--bad)}
.fw-lz-ic .ic{width:16px;height:16px}
.fw-lz-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.fw-lz-mid b{font-size:.92rem;letter-spacing:-.01em;overflow-wrap:anywhere}
.fw-lz-sub{font-size:.8rem;color:var(--ink-faint);overflow-wrap:anywhere}
.fw-grund{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;padding:2px 8px;border-radius:6px;
  background:var(--surface-3);color:var(--ink-soft);white-space:nowrap;flex:none}
.fw-lz.nein .fw-grund{background:var(--bad-bg);color:var(--bad)}
.fw-lz-ts{font-size:.74rem;color:var(--ink-faint);flex:none;white-space:nowrap}
@media(max-width:640px){.fw-lz{flex-wrap:wrap}.fw-lz-ts{width:100%}}

/* ================================================================= Leerstand */
/* Ein leerer Bereich muss SAGEN, dass er leer ist, und WAS zu tun ist — sonst liest man
   Abwesenheit als Defekt (oder schlimmer: als "alles freigegeben"). */
.fw-leer{border:1px dashed var(--line-strong);border-radius:var(--r-lg);padding:26px;text-align:center;
  color:var(--ink-soft);display:flex;flex-direction:column;align-items:center;gap:10px}
.fw-leer .ic{width:26px;height:26px;color:var(--ink-faint)}
.fw-leer b{font-size:.98rem;color:var(--ink)}
.fw-leer span{font-size:.86rem;max-width:52ch;line-height:1.5}

/* ================================================================= Formular */
.fw-form{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);padding:20px;
  display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.fw-form .fw-feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fw-form label{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.fw-form input,.fw-form select,.fw-form textarea{width:100%;min-width:0;font:inherit;font-size:.9rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px}
.fw-form input:focus,.fw-form select:focus,.fw-form textarea:focus{outline:none;border-color:var(--lime)}
.fw-form .fw-breit{grid-column:1/-1}
.fw-form .fw-akt{margin:0;padding:0}
/* Der Verwaltungs-Schluessel wird NICHT gespeichert — die Zeile daneben sagt das. */
.fw-hinweis{font-size:.8rem;color:var(--ink-faint);line-height:1.45}

/* ================================================================= Abschlussflaeche */
.fw-out{margin-top:28px;border-radius:var(--r-lg);padding:26px 28px;background:var(--ink);color:var(--surface);
  display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.fw-out h4{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.4px;margin:0;
  font-size:1.05rem;flex:1;min-width:220px}
.fw-out p{margin:0;font-size:.87rem;opacity:.78;flex:2;min-width:240px;line-height:1.5}

/* ================================================================= Ziel-Messung an der Kachel
   Drei Zustaende, drei Toene — und "nicht messbar" bekommt bewusst NICHT den Rot-Ton des
   Ausfalls. Ein Ziel im internen Netz des Gateways ist vom Dienst aus nicht erreichbar und
   trotzdem kerngesund; ein rotes Zeichen daneben waere eine Falschmeldung mit Signalfarbe. */
.fw-ziel{display:flex;align-items:baseline;gap:8px;font-size:.82rem;color:var(--ink-soft);flex-wrap:wrap}
.fw-ziel .dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--ink-faint)}
.fw-ziel.z-an .dot{background:var(--lime);box-shadow:0 0 0 3px color-mix(in srgb,var(--lime) 22%,transparent)}
.fw-ziel.z-aus .dot{background:#d2544a}
.fw-ziel.z-un .dot{background:var(--ink-faint)}
/* Der Rechnername darf UMBRECHEN statt abgeschnitten zu werden. Ein gekuerztes Ziel
   ("ssr-fw-arbeitspl…") sieht aus wie eine Angabe und ist keine: man kann nicht nachsehen,
   ob es der gemeinte Rechner ist. Lieber zwei Zeilen als eine halbe Wahrheit. */
.fw-ziel-h{font-size:.76rem;color:var(--ink-faint);font-variant-numeric:tabular-nums;
  overflow-wrap:break-word;min-width:0}
.fw-ziel .dot{position:relative;top:1px}
/* Warum hier KEIN Knopf steht. Die Begruendung nimmt den Platz des Knopfes ein — eine leere
   Zeile liesse den Leser vermuten, die Ansicht sei unfertig. */
.fw-kein{font-size:.8rem;color:var(--ink-faint);line-height:1.45;max-width:44ch}

/* ================================================================= Buehne — das laufende Bild
   Sie liegt UEBER der Konsole statt in der Sektion: ein fremder Bildschirm braucht die volle
   Flaeche, und ein halb sichtbares Fernbild ist zum Arbeiten unbrauchbar. Kein Scrollen im
   Rahmen: der Gateway skaliert selbst. */
.fw-buehne{position:fixed;inset:0;z-index:9000;background:color-mix(in srgb,var(--ink) 92%,#000);
  display:flex;flex-direction:column;padding:14px;gap:12px}
.fw-bh{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--surface)}
.fw-bh-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.fw-bh-t b{font-family:var(--disp);font-size:1rem;letter-spacing:.3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-bh-t span{font-size:.8rem;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-bh-a{display:flex;gap:8px;flex-wrap:wrap;flex:none}
.fw-bh-a .btn{background:color-mix(in srgb,var(--surface) 14%,transparent);
  border-color:color-mix(in srgb,var(--surface) 30%,transparent);color:var(--surface);text-decoration:none}
.fw-bh-a .btn:hover{background:color-mix(in srgb,var(--surface) 24%,transparent)}
.fw-bh-rahmen{flex:1;min-height:0;border-radius:var(--r-lg);overflow:hidden;background:#000;
  border:1px solid color-mix(in srgb,var(--surface) 22%,transparent)}
.fw-bh-rahmen iframe{width:100%;height:100%;border:0;display:block}
.fw-bh-fuss{font-size:.8rem;color:color-mix(in srgb,var(--surface) 72%,transparent);line-height:1.45}
@media(max-width:640px){.fw-buehne{padding:8px}.fw-bh-t b{font-size:.9rem}}