/* ============================================================
   openKITTI — Automatisierung (Bildschirm im Hintergrund)

   Ein Ablauf-Editor mit Schritten, Verbindungen und einer
   Ausfuehrung als Vorfuehrung. Verwendet ausschliesslich die
   Rollen aus stil.css; kein eigener Farbwert. Seit AP 9 ist der
   Editor die erweiterte Ansicht (ablauf.html) und hell wie das
   uebrige System; nur die Zeichenflaeche ist leicht abgesetzt.
   ============================================================ */

.au-seite { max-width: none; }

/* ---------- Aufteilung: Schritte oben, Flaeche und Eigenschaften -- */

.au-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  grid-template-areas:
    "palette palette"
    "flaeche eigenschaften";
  gap: calc(var(--spacing) * 4);
}

.au-palette { grid-area: palette; }
.au-flaeche-rahmen { grid-area: flaeche; }
.au-eigenschaften { grid-area: eigenschaften; }

@media (max-width: 999px) {
  .au-editor { grid-template-columns: 1fr; grid-template-areas: "palette" "flaeche" "eigenschaften"; }
  .au-flaeche-rahmen { min-height: 28rem; }
}

.au-palette,
.au-eigenschaften {
  padding: calc(var(--spacing) * 4);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--kante-licht);
}

.au-palette .rubrik,
.au-eigenschaften .rubrik { margin-bottom: calc(var(--spacing) * 4); }

.au-palette { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 3) calc(var(--spacing) * 5); padding-block: calc(var(--spacing) * 3); }

.au-palette .rubrik { margin: 0; }

.au-palette-liste {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.au-palette .ab-hilfe { flex-basis: 100%; margin: 0; }

.au-palette-knopf {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 3) calc(var(--spacing) * 1) calc(var(--spacing) * 1);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-canvas);
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dauer-zustand) var(--kurve), transform var(--dauer-zustand) var(--kurve);
}

.au-palette-knopf:hover { border-color: var(--color-border-brand); transform: translateY(var(--hub-hover)); }

.au-palette-knopf b { display: block; font-size: 0.875rem; white-space: nowrap; }

/* Typkennzeichen: ein Icon auf einer kleinen Flaeche. Die
   Kategorien unterscheiden sich in der Flaeche, nicht im Ton. */
.au-typ-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-brand);
  color: var(--color-text-on-brand);
}

.au-typ-icon svg { width: 1rem; height: 1rem; }

[data-kategorie="ausloeser"] .au-typ-icon { background-color: var(--color-surface-brand); }
[data-kategorie="schritt"] .au-typ-icon { background-color: var(--color-surface-brand-deep); }
[data-kategorie="logik"] .au-typ-icon { background-color: var(--color-surface-inverse); color: var(--color-text-on-inverse); }
[data-kategorie="ausgabe"] .au-typ-icon { background-color: var(--color-surface-success); }

/* ---------- Arbeitsflaeche --------------------------------- */

.au-flaeche-rahmen {
  position: relative;
  min-height: 36rem;
  overflow: hidden;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-sunken);
}

/* Punktraster als Zierde; Schritte liegen als deckende Flaechen
   darueber, Text steht nie unmittelbar auf dem Raster. */
.au-flaeche {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  background-image: radial-gradient(rgb(var(--ton-licht) / 0.1) 1px, transparent 1.5px);
  background-size: 24px 24px;
}

.au-flaeche:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }

.au-flaeche[data-ziehen] { cursor: grabbing; }

.au-ansicht {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

.au-kanten {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}

.au-kante-treffer {
  fill: none;
  stroke: transparent;
  stroke-width: 16;
  pointer-events: stroke;
  cursor: pointer;
}

.au-kante {
  fill: none;
  stroke: var(--color-border-control);
  stroke-width: 2;
  pointer-events: none;
  transition: stroke var(--dauer-zustand) var(--kurve);
}

.au-kante[data-gewaehlt] { stroke: var(--color-border-brand); stroke-width: 3; }

.au-kante[data-aktiv] { stroke: var(--color-text-accent); stroke-width: 3; }

.au-kante-temp {
  fill: none;
  stroke: var(--color-text-accent);
  stroke-width: 2;
  stroke-dasharray: 6 6;
  pointer-events: none;
}

.au-puls {
  fill: var(--color-surface-brand);
  filter: drop-shadow(0 0 6px rgb(var(--ton-aura) / 0.9));
  pointer-events: none;
}

.au-knoten-ebene { position: absolute; left: 0; top: 0; }

/* ---------- Ein Schritt ------------------------------------ */

.au-knoten {
  position: absolute;
  width: 15rem;
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2), var(--kante-licht);
  color: var(--color-text-primary);
  user-select: none;
  transition: border-color var(--dauer-zustand) var(--kurve), box-shadow var(--dauer-zustand) var(--kurve);
}

.au-knoten:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }

.au-knoten[data-gewaehlt] { border-color: var(--color-border-brand); box-shadow: var(--shadow-3), var(--aura-ring); }

.au-knoten[data-stand="laeuft"] { border-color: var(--color-border-brand); animation: au-pulsieren 900ms ease-in-out infinite; }

.au-knoten[data-stand="fertig"] { border-color: var(--color-surface-success); }

.au-knoten[data-stand="fehler"] { border-color: var(--color-surface-error); }

.au-knoten[data-stand="uebersprungen"] { opacity: 0.6; }

@keyframes au-pulsieren {
  0%, 100% { box-shadow: var(--shadow-2), var(--kante-licht); }
  50% { box-shadow: var(--shadow-3), var(--aura-ring); }
}

@media (prefers-reduced-motion: reduce) {
  .au-knoten[data-stand="laeuft"] { animation: none; }
}

.au-knoten-kopf {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border-bottom: 1px solid var(--color-border-hairline);
  cursor: grab;
}

.au-knoten[data-ziehen] .au-knoten-kopf { cursor: grabbing; }

.au-knoten-titel {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.9375rem;
}

.au-knoten-rumpf {
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.au-knoten-stand {
  padding: 0 calc(var(--spacing) * 3) calc(var(--spacing) * 2);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.au-knoten[data-stand="fertig"] .au-knoten-stand { color: var(--color-text-success); }

.au-knoten[data-stand="fehler"] .au-knoten-stand { color: var(--color-text-error); }

.au-knoten[data-stand="laeuft"] .au-knoten-stand { color: var(--color-text-accent); }

/* Anschluesse: links Eingang, rechts Ausgang. Bei einer
   Verzweigung zwei Ausgaenge untereinander mit Beschriftung. */
.au-port {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-border-control);
  background-color: var(--color-surface-canvas);
  cursor: crosshair;
  transition: border-color var(--dauer-zustand) var(--kurve), background-color var(--dauer-zustand) var(--kurve);
}

.au-port-ein { left: -8px; top: 14px; }

.au-port-aus { right: -8px; top: 14px; }

.au-port[data-name="ja"] { top: auto; bottom: 30px; }

.au-port[data-name="nein"] { top: auto; bottom: 8px; }

.au-port:hover,
.au-port[data-ziel] { border-color: var(--color-border-brand); background-color: var(--color-surface-brand); }

.au-port-namen {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding: 0 calc(var(--spacing) * 3) calc(var(--spacing) * 2);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ---------- Ansicht: Zoom ---------------------------------- */

.au-zoom {
  position: absolute;
  right: calc(var(--spacing) * 3);
  bottom: calc(var(--spacing) * 3);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  padding: calc(var(--spacing) * 1);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
}

.au-zoomknopf {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
}

.au-zoomknopf:hover { background-color: var(--color-surface-sunken); }

.au-zoomknopf svg { width: 1.125rem; height: 1.125rem; }

.au-zoom-wert { min-width: 3.5rem; text-align: center; font-size: 0.8125rem; color: var(--color-text-primary); }

/* ---------- Eigenschaften ---------------------------------- */

.au-eigenschaften .ab-feld { margin-bottom: calc(var(--spacing) * 3); }

.au-eigenschaften .ab-feld label { font-size: 0.875rem; }

.au-eigenschaften .ab-reihe { margin-top: calc(var(--spacing) * 4); }

.au-typzeile {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 4);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Code-Feld mit Zeilenzahlen: links eine Spalte mit Zahlen, die
   beim Tippen mitlaeuft; rechts das Textfeld in Festbreite. */
.au-codefeld {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-canvas);
  overflow: hidden;
}

.au-codefeld:focus-within { outline: 2px solid var(--color-focus-ring); outline-offset: 1px; }

.au-zeilen {
  margin: 0;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 1) calc(var(--spacing) * 2) 0;
  text-align: right;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  background-color: var(--color-surface-sunken);
  border-right: 1px solid var(--color-border-hairline);
  user-select: none;
  overflow: hidden;
}

.au-code {
  width: 100%;
  min-height: 9rem;
  margin: 0;
  padding: calc(var(--spacing) * 2);
  border: 0;
  background-color: transparent;
  color: var(--color-text-primary);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  resize: vertical;
  white-space: pre;
  overflow: auto;
}

.au-code:focus { outline: none; }

/* ---------- Unten: Protokoll und Daten --------------------- */

.au-unten {
  margin-top: calc(var(--spacing) * 4);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--kante-licht);
}

.au-unten-kopf {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: 0 calc(var(--spacing) * 3);
  border-bottom: 1px solid var(--color-border-hairline);
}

.au-unten-kopf [role="tablist"] { display: flex; gap: calc(var(--spacing) * 1); flex: 1 1 auto; }

.au-tab {
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3);
  border: 0;
  border-bottom: 2px solid transparent;
  background-color: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.au-tab:hover { color: var(--color-text-primary); }

.au-tab[aria-selected="true"] { color: var(--color-text-accent); border-bottom-color: var(--color-border-brand); }

.au-unten-klapp {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  padding: calc(var(--spacing) * 2);
  border: 0;
  background-color: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.au-unten-klapp:hover { color: var(--color-text-primary); }

.au-protokoll {
  display: grid;
  gap: 2px;
  max-height: 14rem;
  margin: 0;
  padding: calc(var(--spacing) * 3);
  overflow: auto;
  list-style: none;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--color-text-primary);
}

.au-protokoll time { margin-right: calc(var(--spacing) * 2); color: var(--color-text-muted); }

.au-protokoll [data-art="fehler"] { color: var(--color-text-error); }

.au-protokoll [data-art="erfolg"] { color: var(--color-text-success); }

.au-protokoll [data-art="hinweis"] { color: var(--color-text-accent); }

.au-daten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3);
}

.au-daten h3 { margin: 0 0 calc(var(--spacing) * 2); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }

.au-daten pre,
.au-dialog pre {
  max-height: 14rem;
  margin: 0;
  padding: calc(var(--spacing) * 3);
  overflow: auto;
  background-color: var(--color-surface-canvas);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
}

.au-daten-leer { padding: calc(var(--spacing) * 3); }

/* ---------- Dialoge: Export und Import --------------------- */

.au-dialog { max-width: 44rem; width: calc(100% - 2rem); }

.au-dialog pre { max-height: 24rem; }

.au-dialog textarea {
  width: 100%;
  min-height: 14rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
}

/* Symbol innerhalb von Knoepfen und Zeilen */
.au-icon { display: inline-flex; }

.au-icon svg { width: 1.125rem; height: 1.125rem; }