/* --------------------------------------------------------------------------
   w1re - Stil
   Uebernimmt die Farben und die Schrift von n1x.tech (stil.css), bleibt aber
   eigenstaendig: diese Seite ist eine Arbeitsflaeche und keine Kachelseite,
   sie braucht Leisten, Griffe und einen Zeichentisch.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/spacegrotesk.woff2) format('woff2');
}

:root {
  --bg: #0a0b0d;
  --flaeche: #111316;
  --flaeche2: #14171b;
  --flaeche3: #181c21;
  --rand: #1e2126;
  --rand-hell: #2b2f36;
  --txt: #e9ecef;
  --dim: #8b929c;
  --schwach: #5a616b;
  --akzent: #3ecfb2;
  --warn: #e5b567;
  --boese: #e5566d;
  --leiste-h: 46px;
  --seite-b: 300px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* MUSS ganz oben stehen und MUSS !important sein.
   Dialog, Menü und diverse Teile der Boxen werden über das hidden-Attribut
   ein- und ausgeblendet. Das Attribut wirkt aber nur über display:none aus
   dem Browser-Stylesheet - und jede eigene display-Regel schlaegt die. Genau
   das ist hier der Fall (.ueberlagerung ist grid, .menue ist flex), und die
   Folge war ein Dialog, der beim Laden offen stand und sich nicht schliessen
   liess: das X setzte hidden, das ohnehin schon gesetzt war.
   Wer hier eine display-Regel ergaenzt, braucht diese Zeile weiterhin. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--txt);
  font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.marke { font-weight: 600; letter-spacing: -.02em; font-size: 1.05rem; }
.akz { color: var(--akzent); }

/* ---------------------------------------------------------------- Leiste -- */
.leiste {
  position: fixed; inset: 0 0 auto 0; height: var(--leiste-h); z-index: 40;
  display: flex; align-items: center; gap: 7px;
  padding: 0 12px;
  background: var(--flaeche); border-bottom: 1px solid var(--rand);
}
.trenner { width: 1px; height: 20px; background: var(--rand-hell); margin: 0 3px; }
.fueller { flex: 1; }

.knopf {
  font: inherit; font-size: .84rem;
  padding: 6px 11px; border-radius: 8px;
  border: 1px solid var(--rand-hell); background: var(--flaeche2); color: var(--txt);
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.knopf:hover { border-color: rgba(62, 207, 178, .45); background: var(--flaeche3); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: .35; cursor: default; transform: none; }
.knopf:disabled:hover { border-color: var(--rand-hell); background: var(--flaeche2); }
.knopf.haupt { border-color: rgba(62, 207, 178, .5); color: var(--akzent); }
.knopf.gefahr:hover { border-color: rgba(229, 86, 109, .6); color: var(--boese); }
.knopf.klein { padding: 3px 8px; font-size: .8rem; }

select, input[type=text], input[type=number], input[type=password], textarea {
  font: inherit; font-size: .84rem;
  padding: 6px 9px; border-radius: 8px;
  border: 1px solid var(--rand-hell); background: var(--flaeche2); color: var(--txt);
  max-width: 100%;
}
select:focus, input:focus, textarea:focus {
  outline: none; border-color: rgba(62, 207, 178, .55);
}
textarea { resize: vertical; min-height: 62px; width: 100%; line-height: 1.45; }

.schalter { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--dim); cursor: pointer; }
.schalter input { accent-color: var(--akzent); }

.zoomwert {
  font-family: ui-monospace, Consolas, monospace; font-size: 11px;
  color: var(--dim); min-width: 52px; text-align: right;
}
.stand {
  font-family: ui-monospace, Consolas, monospace; font-size: 11px;
  letter-spacing: .08em; color: var(--schwach); transition: color .2s ease;
}
.stand.aktiv { color: var(--akzent); }
.stand.fehler { color: var(--boese); }

/* ------------------------------------------------------------------ Menü -- */
.menue {
  position: fixed; top: calc(var(--leiste-h) + 6px); right: 12px; z-index: 60;
  display: flex; flex-direction: column; min-width: 220px; padding: 6px;
  border: 1px solid var(--rand-hell); border-radius: 11px; background: var(--flaeche);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
}
.menue button {
  font: inherit; font-size: .86rem; text-align: left;
  padding: 8px 11px; border: 0; border-radius: 7px;
  background: transparent; color: var(--txt); cursor: pointer;
}
.menue button:hover { background: var(--flaeche3); color: var(--akzent); }

/* ---------------------------------------------------------------- Brett --- */
.brett {
  position: fixed; inset: var(--leiste-h) var(--seite-b) 0 0;
  overflow: hidden; outline: none; cursor: default;
  /* Das Raster faehrt beim Verschieben mit - es wird in wire.js ueber
     background-position und background-size an die Sicht gekoppelt. */
  background-color: var(--bg);
  background-image:
    radial-gradient(circle, #1a1e24 1px, transparent 1px);
  background-size: 24px 24px;
}
.brett.zugeklappt { right: 0; }
.brett.schiebt { cursor: grabbing; }
.brett.kabelt { cursor: crosshair; }

.welt { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.ebene { position: absolute; top: 0; left: 0; width: 0; height: 0; }
#ebene-gruppen { z-index: 1; }
#ebene-knoten { z-index: 3; }

.kabel {
  position: absolute; overflow: visible; z-index: 2;
  left: -50000px; top: -50000px; width: 100000px; height: 100000px;
  pointer-events: none;
}
.kabel .linie { pointer-events: stroke; cursor: pointer; fill: none; }
.kabel .treffer { pointer-events: stroke; stroke: transparent; stroke-width: 14; fill: none; cursor: pointer; }
.kabel .zieh { fill: none; stroke: var(--akzent); stroke-width: 2; stroke-dasharray: 5 4; }
.kabel text {
  fill: var(--dim); font-family: 'Space Grotesk', sans-serif;
  paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round;
  pointer-events: none; user-select: none;
}
.kabel .gewaehlt { filter: drop-shadow(0 0 5px rgba(62, 207, 178, .75)); }

/* --------------------------------------------------------------- Knoten --- */
.knoten {
  position: absolute;
  display: flex; flex-direction: column;
  border: 1px solid var(--rand-hell); border-radius: 11px;
  background: var(--flaeche);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
  cursor: grab; user-select: none; overflow: visible;
}
.knoten.gewaehlt {
  border-color: var(--akzent);
  box-shadow: 0 0 0 1px var(--akzent), 0 8px 24px rgba(0, 0, 0, .5);
}
.knoten.zieht { cursor: grabbing; z-index: 20; }

.knoten-kopf {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 11px 7px;
  border-bottom: 1px solid var(--rand);
  border-radius: 10px 10px 0 0;
  font-weight: 600; line-height: 1.25;
  overflow: hidden;
}
.knoten-titel { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.knoten-titel[contenteditable=true] {
  outline: 1px solid var(--akzent); border-radius: 4px; cursor: text; padding: 0 2px;
}
.knoten-art {
  font-family: ui-monospace, Consolas, monospace; font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
  border: 1px solid var(--rand-hell); border-radius: 4px; padding: 2px 5px;
  flex: none;
}
.knoten-koerper {
  flex: 1; padding: 8px 11px 10px; overflow: hidden;
  color: var(--dim); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.knoten-felder {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 8px;
  padding: 0 11px 9px; font-size: .78em;
}
.knoten-felder dt { color: var(--schwach); font-family: ui-monospace, Consolas, monospace; }
.knoten-felder dd { margin: 0; color: var(--txt); overflow-wrap: anywhere; }
.knoten a.knoten-verweis { color: var(--akzent); text-decoration: none; }
.knoten a.knoten-verweis:hover { text-decoration: underline; }

/* Formen. Rechteck ist der Normalfall und braucht keine Regel. */
.knoten.form-rund { border-radius: 24px; }
.knoten.form-rund .knoten-kopf { border-radius: 23px 23px 0 0; }
.knoten.form-ellipse { border-radius: 50%; align-items: center; justify-content: center; text-align: center; }
.knoten.form-ellipse .knoten-kopf { border: 0; justify-content: center; }
.knoten.form-raute { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border-radius: 0; }
.knoten.form-raute .knoten-kopf { border: 0; justify-content: center; padding-top: 22%; }
.knoten.form-raute .knoten-koerper { display: none; }
.knoten.form-zylinder { border-radius: 11px / 26px; }
.knoten.form-zylinder .knoten-kopf { border-radius: 10px 10px 0 0 / 24px 24px 0 0; }

/* --- Griffe zum Verkabeln ---
   Vier Punkte am Rand. Sichtbar erst beim Zeigen auf den Knoten, damit die
   Karte im Ruhezustand ruhig aussieht - beim Verkabeln aber IMMER sichtbar
   (Klasse kabelt am body), sonst zielt man ins Blinde. */
.griff {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: var(--flaeche3); border: 1.5px solid var(--rand-hell);
  opacity: 0; transition: opacity .12s ease, transform .12s ease, border-color .12s ease;
  cursor: crosshair; z-index: 5;
}
.knoten:hover .griff, .knoten.gewaehlt .griff, body.kabelt .griff { opacity: 1; }
.griff:hover, .griff.ziel { border-color: var(--akzent); background: var(--akzent); transform: scale(1.35); }
.griff.links   { left: -6px;  top: 50%; margin-top: -6px; }
.griff.rechts  { right: -6px; top: 50%; margin-top: -6px; }
.griff.oben    { top: -6px;   left: 50%; margin-left: -6px; }
.griff.unten   { bottom: -6px; left: 50%; margin-left: -6px; }

/* --- Benannte Anschluesse (wie in ComfyUI) --- */
.anschluesse { position: absolute; inset: 0; pointer-events: none; }
.anschluss {
  position: absolute; display: flex; align-items: center; gap: 5px;
  font-family: ui-monospace, Consolas, monospace; font-size: 10px; color: var(--dim);
  pointer-events: auto; cursor: crosshair; white-space: nowrap;
}
.anschluss i {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--flaeche3); border: 1.5px solid var(--rand-hell);
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.anschluss:hover i, .anschluss.ziel i { background: var(--akzent); border-color: var(--akzent); transform: scale(1.3); }
.anschluss.links { flex-direction: row; left: -7px; transform: translateX(-100%); }
.anschluss.links span { order: -1; }
.anschluss.rechts { right: -7px; transform: translateX(100%); }

/* --- Griff zum Groesseaendern --- */
.groesse {
  position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px;
  cursor: nwse-resize; opacity: 0; transition: opacity .12s ease; z-index: 6;
  background: linear-gradient(135deg, transparent 48%, var(--rand-hell) 48%, var(--rand-hell) 66%, transparent 66%);
  border-radius: 0 0 10px 0;
}
.knoten:hover .groesse, .knoten.gewaehlt .groesse { opacity: 1; }
.knoten.gewaehlt .groesse { background: linear-gradient(135deg, transparent 48%, var(--akzent) 48%, var(--akzent) 66%, transparent 66%); }

/* -------------------------------------------------------------- Gruppen --- */
.gruppe {
  position: absolute; border: 1.5px dashed var(--rand-hell); border-radius: 14px;
  background: rgba(111, 155, 216, .05);
  cursor: grab; user-select: none;
}
.gruppe.gewaehlt { border-style: solid; box-shadow: 0 0 0 1px currentColor; }
.gruppe-kopf {
  position: absolute; top: -1px; left: -1px;
  display: flex; align-items: center; gap: 7px;
  padding: 5px 12px 6px; border-radius: 13px 0 13px 0;
  font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
}
.gruppe-kopf .knopf.klein { opacity: 0; }
.gruppe:hover .gruppe-kopf .knopf.klein { opacity: 1; }
.gruppe .groesse { opacity: 0; }
.gruppe:hover .groesse, .gruppe.gewaehlt .groesse { opacity: 1; }
.gruppe.eingeklappt { height: 34px !important; overflow: hidden; }

/* --------------------------------------------------------- Auswahlrahmen -- */
.auswahlrahmen {
  position: absolute; z-index: 30; pointer-events: none;
  border: 1px solid var(--akzent); background: rgba(62, 207, 178, .09); border-radius: 3px;
}
.leerhinweis {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--schwach); font-size: .95rem; pointer-events: none;
}

/* ------------------------------------------------------- Seitenleiste ----- */
.seite {
  position: fixed; top: var(--leiste-h); right: 0; bottom: 0; width: var(--seite-b);
  z-index: 35; display: flex; flex-direction: column;
  background: var(--flaeche); border-left: 1px solid var(--rand);
}
.seite.zu { display: none; }
.seite-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 12px; border-bottom: 1px solid var(--rand);
  font-size: .86rem; font-weight: 600;
}
.seite-inhalt { flex: 1; overflow-y: auto; padding: 12px; }
.seite-inhalt .leer { color: var(--schwach); font-size: .86rem; line-height: 1.5; }
.seite-auf {
  position: fixed; top: calc(var(--leiste-h) + 10px); right: 10px; z-index: 36;
  font: inherit; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--rand-hell); background: var(--flaeche2); color: var(--dim);
  cursor: pointer;
}

.feld { margin-bottom: 13px; }
.feld > label {
  display: block; margin-bottom: 5px;
  font-family: ui-monospace, Consolas, monospace; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--schwach);
}
.feld input[type=text], .feld select, .feld textarea { width: 100%; }
.reihe { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.reihe > * { flex: 1; min-width: 0; }
.reihe .fest { flex: none; }

.farbreihe { display: flex; flex-wrap: wrap; gap: 6px; }
.farbtupfer {
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--rand-hell); padding: 0; background-clip: padding-box;
}
.farbtupfer.aktiv { box-shadow: 0 0 0 2px var(--akzent); }
.farbtupfer.leer {
  background: var(--flaeche2);
  background-image: linear-gradient(45deg, transparent 45%, var(--schwach) 45%, var(--schwach) 55%, transparent 55%);
}

.stil-knopf {
  font: inherit; font-size: .84rem; padding: 5px 10px; border-radius: 7px;
  border: 1px solid var(--rand-hell); background: var(--flaeche2); color: var(--dim); cursor: pointer;
}
.stil-knopf.aktiv { border-color: var(--akzent); color: var(--akzent); }
.stil-knopf b { font-weight: 700; }
.stil-knopf i { font-style: italic; }

.paar { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.paar input { min-width: 0; }
.paar .weg { flex: none; padding: 3px 7px; }

.hinweiszeile { color: var(--schwach); font-size: .76rem; line-height: 1.45; margin: 6px 0 0; }

/* ------------------------------------------------------------- Dialog ----- */
.ueberlagerung {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 20px;
  background: rgba(6, 7, 9, .72);
}
.dialog {
  width: min(760px, 100%); max-height: 82vh; display: flex; flex-direction: column;
  border: 1px solid var(--rand-hell); border-radius: 14px; background: var(--flaeche);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.dialog-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--rand); font-weight: 600;
}
.dialog-inhalt { padding: 16px; overflow: auto; }
.dialog-inhalt pre {
  margin: 0; padding: 12px; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--rand);
  font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--dim);
}
.dialog-inhalt code { font-family: ui-monospace, Consolas, monospace; color: var(--akzent); }
.dialog-inhalt h3 { margin: 18px 0 8px; font-size: .95rem; }
.dialog-inhalt h3:first-child { margin-top: 0; }
.dialog-inhalt p { margin: 0 0 10px; color: var(--dim); font-size: .88rem; line-height: 1.55; }
.dialog-inhalt table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.dialog-inhalt td { padding: 5px 10px 5px 0; color: var(--dim); vertical-align: top; }
.dialog-inhalt td:first-child {
  font-family: ui-monospace, Consolas, monospace; color: var(--txt); white-space: nowrap;
}

/* --------------------------------------------------------- Anmeldeseite --- */
body.anmeldeseite { display: grid; place-items: center; }
.anmelden {
  display: flex; flex-direction: column; gap: 11px; width: min(320px, 90vw);
  padding: 30px 28px 26px; border: 1px solid var(--rand); border-radius: 14px;
  background: var(--flaeche);
}
.anmelden h1 { margin: 0; font-size: 1.7rem; font-weight: 600; letter-spacing: -.03em; }
.anmelden .unter { margin: -6px 0 8px; color: var(--dim); font-size: .9rem; }
.anmelden button {
  font: inherit; padding: 9px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(62, 207, 178, .5); background: var(--flaeche2); color: var(--akzent);
}
.anmelden button:hover { background: var(--flaeche3); }
.anmelden .hinweis { margin: 0; min-height: 18px; font-size: .82rem; color: var(--boese); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }