/* ==========================================================================
   meinHERMES — Graph (Struktur, Fokus, Phasen)
   Kategoriefarben: helle Palette validiert (Lichtheit, Chroma, Farbfehl-
   sichtigkeit über alle Paare); Kategorie zusätzlich über Knotenform und
   Icon codiert, nie nur über Farbe. Die Kategoriefarben sind eine
   Datencodierung und bleiben — alles andere (Leiste, Popover, Detailfeld)
   folgt dem Modernist-System aus css/style.css: kein Radius, Linien statt
   Kästen, Text-Knöpfe in Versalien, Rot als einziger Akzent.
   ========================================================================== */

:root {
  /* Phase in Ocker, Ergebnis im Blau der Originalabbildung (#DCEBFA), damit
     ein Ergebnis im Graph aussieht wie sein Kasten in der Abbildung darüber. */
  --gk-phase: #e2a000;        --gk-phase-bg: #fbeecb;        --gk-phase-fg: #7a5300;
  --gk-szenario: #5d3aa8;     --gk-szenario-bg: #e7dff7;     --gk-szenario-fg: #3f2680;
  --gk-modul: #14a58f;        --gk-modul-bg: #d4f0ea;        --gk-modul-fg: #0b5e52;
  --gk-aufgabe: #d9541a;      --gk-aufgabe-bg: #fbe3d6;      --gk-aufgabe-fg: #8a3208;
  --gk-ergebnis: #2a78d6;     --gk-ergebnis-bg: #dcebfa;     --gk-ergebnis-fg: #164a8a;
  --gk-rolle: #a8266a;        --gk-rolle-bg: #f6dbe8;        --gk-rolle-fg: #6f1546;
  --gk-grundbegriff: #556474; --gk-grundbegriff-bg: #e3e8ee; --gk-grundbegriff-fg: #384652;
  --gk-glyph-auf: #ffffff;
  --gk-phase-glyph-auf: #3a2a00;

  --gkante: #9aa7b4;
  --gkante-stark: #55636f;
  /* Verbindungen in den Farben der Quelle: Rosé der Rolle für
     «verantwortlich», «beteiligt» und «verantwortet das Ergebnis»,
     Orange der Aufgabe für «erzeugt». */
  --gkante-verantwortlich: #a8266a;
  --gkante-erzeugt: #d9541a;
  /* Phasenmodell in der Karte beim Überfahren: Grundfläche hell, Phasen des Elements dunkelgrau. */
  --gk-phase-leer: #d9d6d6;
  --gk-phase-aktiv: #5a5656;
  --gkante-phase: #e2a000;
  --gkante-meilenstein: #164a8a;
  --gkante-grundbegriff: #556474;

  /* Die Fläche ist weiss wie die Bühne der Originalabbildung im Überblick;
     Bahnen wechseln zwischen Weiss und dem Grund der Seite. */
  --graph-bg: #ffffff;
  --graph-bahn: #ffffff;
  --graph-bahn-2: #f3f2f2;
  --detail-breite: 24rem;
  /* Nur für schmale Schirme, wo die Seite im normalen Fluss scrollt: dort ist
     die Kopfzeile die Markenzeile allein (46 px + 2 px Linie). Ab 700 px füllt
     die Leinwand den Rest der Höhe per Flexbox — ohne Zahl, die zur Kopfzeile
     passen muss. */
  --kopf: 48px;
}

/* Gemeinsame Form der Text-Knöpfe in Leiste, Popover und Detailfeld. */
.graph-wirt .btn--klein,
.segment__knopf,
.chip--auswahl,
.gauswahl__reset,
.graph-werkzeug,
.graph-zoom__knopf,
.graph-schliessen {
  height: 28px;
  min-height: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-leise);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.graph-wirt .btn--klein:hover,
.segment__knopf:hover,
.chip--auswahl:hover,
.graph-werkzeug:hover,
.graph-zoom__knopf:hover,
.graph-schliessen:hover { color: var(--text); background: transparent; }
.graph-wirt .btn--klein.btn--primaer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  background: var(--akzent);
  border: 2px solid var(--akzent);
  color: #fff;
}
.graph-wirt .btn--klein.btn--primaer:hover { background: var(--akzent-hover); border-color: var(--akzent-hover); color: #fff; }

/* --- Seite: drei Bereiche -------------------------------------------------- */
.segment { display: inline-flex; align-items: center; gap: 2px; }
.segment__knopf { flex: 0 0 auto; }
/* Ansicht als Icon: der Name steht in aria-label und Titel. */
.segment__knopf--ikone { display: grid; place-items: center; width: 28px; padding: 0; }
.segment__knopf[aria-pressed="true"] {
  color: var(--text);
  font-weight: 800;
  box-shadow: inset 0 -3px 0 var(--akzent);
}
.segment__knopf:focus-visible { outline-offset: -2px; }

.gs-suche { position: relative; }
.gpop .suche__feld--klein {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--rand-stark);
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  box-shadow: none;
}
.gpop .suche__feld--klein::placeholder { color: var(--text-leise-hell); }
.gs-treffer {
  margin: 0; padding: 0;
  list-style: none;
  max-height: 18rem;
  overflow-y: auto;
}
.gs-treffer__knopf {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 4px;
  border: 0;
  border-top: 1px solid var(--rand-fein);
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 14px;
  cursor: pointer;
}
.gs-treffer > li:first-child .gs-treffer__knopf { border-top: 0; }
.gs-treffer__knopf:hover, .gs-treffer__knopf:focus-visible { background: var(--flaeche-2); }
.gs-treffer__leer { padding: 6px 0; color: var(--text-leise); font-size: 13px; }


.gswatch {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--gk-glyph-auf);
  background: var(--gk-grundbegriff);
}
.gswatch svg { width: 65%; height: 65%; stroke-width: 2.2; }
.gswatch--phase { background: var(--gk-phase); color: var(--gk-phase-glyph-auf); }
.gswatch--szenario { background: var(--gk-szenario); }
.gswatch--modul { background: var(--gk-modul); }
.gswatch--aufgabe { background: var(--gk-aufgabe); }
.gswatch--ergebnis { background: var(--gk-ergebnis); }
.gswatch--rolle { background: var(--gk-rolle); }
.gswatch--grundbegriff { background: var(--gk-grundbegriff); }

.gs-liste { display: grid; }
.gs-schalter {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  border-top: 1px solid var(--rand-fein);
  font-size: 13.5px;
  cursor: pointer;
}
.gs-liste > .gs-schalter:first-child { border-top: 0; }
.gs-schalter__eingabe { width: 16px; height: 16px; margin: 0; accent-color: var(--akzent); flex: 0 0 auto; }
.gs-schalter__label { flex: 1 1 auto; }
.gs-schalter__extra { font-size: 10.5px; color: var(--text-leise); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

.gs-feld { display: grid; gap: 6px; }
.gs-feld--zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.gs-feld__label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); }
.gs-select {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--rand-stark);
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  max-width: 100%;
}

/* Beispiele: Zeilen mit Linien, keine Kästen. */
.gs-beispiele { display: grid; }
.gs-beispiel {
  display: grid;
  gap: 2px;
  padding: 9px 0;
  border: 0;
  border-top: 1px solid var(--rand-fein);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.gs-beispiele > .gs-beispiel:first-child { border-top: 0; }
.gs-beispiel:hover .gs-beispiel__titel { color: var(--akzent-text); }
.gs-beispiel__titel { font-weight: 700; font-size: 14px; }
.gs-beispiel__hinweis { font-size: 12.5px; color: var(--text-leise); }

.glegende { display: grid; gap: 12px; font-size: 13px; }
.glegende__gruppe { display: grid; gap: 5px; }
.glegende__gruppe--typen { grid-template-columns: 1fr 1fr; }
.glegende__eintrag { display: flex; align-items: center; gap: 8px; }
.glegende__symbol { width: 20px; text-align: center; color: var(--gk-ergebnis-fg); font-size: 14px; }
.glegende__hinweis { margin: 0; font-size: 12.5px; color: var(--text-leise); }
/* Was der Graph gerade zeigt — stand früher als Text in der Leiste. */
.glegende__status {
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
  font-size: 13px;
  color: var(--text);
}

.glinie {
  display: inline-block;
  width: 26px; height: 0;
  flex: 0 0 auto;
  border-top: 2px solid var(--gkante-stark);
}
.glinie--struktur { border-top-color: var(--gkante-stark); }
.glinie--erzeugt { border-top-color: var(--gkante-erzeugt); border-top-width: 2.5px; }
.glinie--verantwortlich { border-top-color: var(--gkante-verantwortlich); border-top-width: 3px; }
.glinie--beteiligt { border-top-color: var(--gkante-verantwortlich); border-top-style: dashed; }
.glinie--phase { border-top-color: var(--gkante-phase); border-top-style: dotted; border-top-width: 3px; }
.glinie--meilenstein { border-top-color: var(--gkante-meilenstein); border-top-style: double; border-top-width: 3px; }
.glinie--ergebnisrolle { border-top-color: var(--gkante-verantwortlich); border-top-style: dotted; border-top-width: 2px; }

/* --- Bühne --------------------------------------------------------------- */
.graph-buehne {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.graph-buehne[hidden] { display: none; }

.graph-zoom { margin-left: 8px; padding-left: 9px; }
.graph-zoom::before { content: ""; width: 1px; height: 16px; margin-right: 2px; background: var(--rand); }

.graph-pfad { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; flex: 1 1 100%; }
.graph-pfad[hidden] { display: none; }
.graph-pfad__label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); margin-right: 4px; }
.graph-pfad__knopf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px 0 4px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  max-width: 16rem;
}
.graph-pfad__knopf span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graph-pfad__knopf:hover { color: var(--akzent-text); }
.graph-pfad__knopf .gswatch { width: 18px; height: 18px; }

.graph-zoom { display: inline-flex; align-items: center; gap: 2px; }
.graph-zoom__knopf { width: 28px; padding: 0; display: grid; place-items: center; font-size: 18px; }
.graph-zoom__knopf--ikone { font-size: 12px; }

.graph-flaeche {
  position: relative;
  flex: 1 1 auto;
  min-height: 60vh;
  background-color: var(--graph-bg);
  overflow: hidden;
  touch-action: none;
}
.graph-messprobe { position: absolute; visibility: hidden; font: 600 12px var(--schrift); }
.graph-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; font-family: var(--schrift); }
.graph-svg.ist-am-ziehen { cursor: grabbing; }
.graph-svg:focus { outline: none; }

/* Knoten */
.gk { cursor: pointer; }
.gk:focus { outline: none; }
.gk:focus-visible .gk__form { stroke-width: 3; stroke: var(--fokus); }
.gk__form { fill: var(--gk-grundbegriff-bg); stroke: var(--gk-grundbegriff); stroke-width: 1.5; transition: opacity .15s ease; }
.gk__label { font: 600 14px var(--schrift); fill: var(--gk-grundbegriff-fg); dominant-baseline: central; pointer-events: none; }
.gk__glyph { fill: var(--gk-grundbegriff); }
.gk__ikone {
  fill: none;
  stroke: var(--gk-glyph-auf);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.gk__typ { font: 600 13px var(--schrift); fill: var(--gk-ergebnis-fg); dominant-baseline: central; pointer-events: none; }
/* Phasenmodell (Karte beim Überfahren): hellgrau, die Phasen des Elements dunkelgrau. */
.gk__phase { fill: var(--gk-phase-leer); stroke: none; }
.gk__phase.ist-aktiv { fill: var(--gk-phase-aktiv); }

.gk--phase .gk__form { fill: var(--gk-phase-bg); stroke: var(--gk-phase); }
.gk--phase .gk__label { fill: var(--gk-phase-fg); }
.gk--phase .gk__glyph { fill: var(--gk-phase); }
.gk--phase .gk__ikone { stroke: var(--gk-phase-glyph-auf); }
.gk--szenario .gk__form { fill: var(--gk-szenario-bg); stroke: var(--gk-szenario); }
.gk--szenario .gk__label { fill: var(--gk-szenario-fg); }
.gk--szenario .gk__glyph { fill: var(--gk-szenario); }
.gk--modul .gk__form { fill: var(--gk-modul-bg); stroke: var(--gk-modul); }
.gk--modul .gk__label { fill: var(--gk-modul-fg); }
.gk--modul .gk__glyph { fill: var(--gk-modul); }
.gk--aufgabe .gk__form { fill: var(--gk-aufgabe-bg); stroke: var(--gk-aufgabe); }
.gk--aufgabe .gk__label { fill: var(--gk-aufgabe-fg); }
.gk--aufgabe .gk__glyph { fill: var(--gk-aufgabe); }
.gk--ergebnis .gk__form { fill: var(--gk-ergebnis-bg); stroke: var(--gk-ergebnis); }
.gk--ergebnis .gk__label { fill: var(--gk-ergebnis-fg); }
.gk--ergebnis .gk__glyph { fill: var(--gk-ergebnis); }
/* Rollen und Meilensteine ohne Kasten: Glyph und Name genügen — so heben sie
   sich von Aufgaben und Ergebnissen deutlicher ab. Die Form bleibt
   transparent als Trefffläche. */
.gk--rolle .gk__form,
.gk--meilenstein .gk__form { fill: transparent; stroke: none; }
.gk--rolle:hover .gk__label,
.gk--meilenstein:hover .gk__label { text-decoration: underline; }
.gk--rolle:hover .gk__form,
.gk--meilenstein:hover .gk__form,
.gk--rolle:focus-visible .gk__form,
.gk--meilenstein:focus-visible .gk__form { stroke: none; }
.gk--rolle:focus-visible .gk__glyph,
.gk--rolle.ist-gewaehlt .gk__glyph,
.gk--meilenstein:focus-visible .gk__glyph,
.gk--meilenstein.ist-gewaehlt .gk__glyph { stroke: var(--fokus); stroke-width: 2.5; }
.gk--rolle.ist-gewaehlt .gk__form,
.gk--meilenstein.ist-gewaehlt .gk__form { stroke: none; filter: none; }
.gk--rolle .gk__label { fill: var(--gk-rolle-fg); }
.gk--rolle .gk__glyph { fill: var(--gk-rolle); }
.gk--grundbegriff .gk__form { stroke-dasharray: 4 3; }

.gk--zwingend .gk__form { stroke-width: 2.5; }
.gk--entscheid .gk__form { stroke-width: 2.2; }
.gk--gross .gk__form { stroke-width: 3; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .18)); }
.gk--gross .gk__label { font: 700 15px var(--schrift); }
.gk--mehr .gk__form { fill: var(--flaeche); stroke: var(--rand-stark); stroke-dasharray: 4 3; }
.gk--mehr .gk__label { fill: var(--text-leise); font-weight: 600; }
.gk:hover .gk__form { stroke-width: 2.5; }
.gk.ist-gewaehlt .gk__form { stroke-width: 3; filter: drop-shadow(0 0 0 2px var(--fokus)); }

/* Kanten */
.gkante { fill: none; stroke: var(--gkante); stroke-width: 1.4; stroke-linecap: round; transition: opacity .15s ease, stroke-width .15s ease; }
.gkante--struktur { stroke: var(--gkante); }
.gkante--erzeugt { stroke: var(--gkante-erzeugt); stroke-width: 1.6; }
.gkante--verantwortlich { stroke: var(--gkante-verantwortlich); stroke-width: 2.2; }
.gkante--beteiligt { stroke: var(--gkante-verantwortlich); stroke-width: 1.1; stroke-dasharray: 5 4; opacity: .75; }
.gkante--phase { stroke: var(--gkante-phase); stroke-dasharray: 1.5 4; stroke-width: 2; }
.gkante--meilenstein { stroke: var(--gkante-meilenstein); stroke-width: 2; }
.gkante--ergebnisrolle { stroke: var(--gkante-verantwortlich); stroke-width: 1.2; stroke-dasharray: 1.5 3; opacity: .7; }
.ggruppenlinie { stroke: var(--rand); stroke-width: 1; }
/* Bahnen des Swimlane-Layouts: abwechselnd getönt, damit die Zuordnung
   ohne Linienlesen erkennbar bleibt. Liegen hinter Kanten und Knoten. */
.gbahn { fill: var(--graph-bahn); }
.gbahn--ungerade { fill: var(--graph-bahn-2); }
.gkante--weit { opacity: .45; }
.gkante--quer { opacity: .4; stroke-width: 1; }
.gpfeil { fill: var(--gkante-erzeugt); }

/* Hervorhebung: alles ausser Nachbarschaft dimmen */
.graph-svg.ist-hervorhebung .gk:not(.ist-aktiv) { opacity: .28; }
.graph-svg.ist-hervorhebung .gkante:not(.ist-aktiv) { opacity: .12; }
.graph-svg.ist-hervorhebung .gkante.ist-aktiv { stroke-width: 2.6; opacity: 1; }
.graph-svg.ist-hervorhebung .gkante--verantwortlich.ist-aktiv { stroke-width: 3.2; }
.graph-svg.ist-hervorhebung .gtext { opacity: .55; }

/* Texte */
.gtext { font: 700 12px var(--schrift); fill: var(--text-leise); dominant-baseline: central; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
.gtext--spalte { font-size: 16px; letter-spacing: .06em; }
.gtext--kat { font-size: 11.5px; }
.gtext--gruppe { font-size: 10.5px; letter-spacing: .04em; fill: var(--text-leise); }
/* Swimlane: Bahnname und Anzahl links neben der Bahn */
.gtext--bahn { font-size: 14px; letter-spacing: .03em; fill: var(--text); }
.gtext--bahnzahl { font-size: 12px; font-weight: 600; letter-spacing: 0; fill: var(--text-leise); }
.gtext--bahnkopf { fill: var(--text-leise); }
/* Modul-Zwischentitel in einer Phasenbahn: leiser als der Bahnname, anklickbar. */
.gtext--untergruppe { font-size: 10px; letter-spacing: .1em; fill: var(--text-leise); pointer-events: auto; cursor: pointer; }
.gtext--untergruppe:hover, .gtext--untergruppe:focus-visible { fill: var(--akzent); outline: none; }
.ggruppenlinie--unter { stroke: var(--rand); }
.gtext--rel { font-weight: 600; font-size: 10.5px; text-transform: none; letter-spacing: 0; fill: var(--text-leise); }
.gtext--phase { fill: var(--gk-phase-fg); }
.gtext--szenario { fill: var(--gk-szenario-fg); }
.gtext--modul { fill: var(--gk-modul-fg); }
.gtext--aufgabe { fill: var(--gk-aufgabe-fg); }
.gtext--ergebnis { fill: var(--gk-ergebnis-fg); }
.gtext--rolle { fill: var(--gk-rolle-fg); }
.gtext--grundbegriff { fill: var(--gk-grundbegriff-fg); }

/* Karte beim Überfahren eines Knotens: Text, Module, Phasenmodell und das
   Filter-Icon. Sie nimmt Zeiger an, damit das Icon erreichbar ist — beim
   schnellen Überstreichen verschwindet sie aber sofort (js/graph.js). */
.graph-tooltip {
  position: absolute;
  z-index: 6;
  width: max-content;
  max-width: 20rem;
  padding: .55rem .7rem;
  background: var(--bg);
  border: 1px solid var(--rand-stark);
  box-shadow: var(--schatten-stark);
  font-size: 13px;
}
.graph-tooltip__kopf { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-weight: 700; }
.graph-tooltip__kopf b { flex: 1 1 auto; min-width: 0; }
.graph-tooltip__filter {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px; height: 26px;
  margin: -3px -5px -3px 4px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-leise);
  cursor: pointer;
}
.graph-tooltip__filter:hover { color: var(--text); background: var(--flaeche-2); }
.graph-tooltip__filter[aria-pressed="true"] { color: var(--akzent-text); background: var(--akzent-schwach); }
.graph-tooltip__phasen { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 12px; color: var(--text-weich); }
.graph-tooltip__phasen .gk__phasen { flex: 0 0 auto; }
.graph-tooltip__rel { margin: 0 0 4px; color: var(--akzent-text); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.graph-tooltip__text { margin: 0; color: var(--text-weich); }
.graph-tooltip__module { margin: 4px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise); }
.graph-tooltip__tipp { margin: 6px 0 0; font-size: 11.5px; color: var(--text-leise); }

/* --- Auswahl in der Leiste: welche Phasen bzw. Module -------------------- */
.gauswahl__vorgehen[hidden], .gauswahl__reset[hidden] { display: none; }
/* Die Chips laufen in einer Zeile und scrollen seitwärts — bei zwölf Modulen
   bliebe sonst von der Leiste nichts übrig. */
.chips--auswahl {
  display: flex;
  flex-wrap: nowrap;
  gap: .3rem;
  margin: 0;
  padding: 2px 0;
  flex: 1 1 6rem;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chips--auswahl::-webkit-scrollbar { display: none; }
/* Rechte Kante ausblenden: zeigt an, dass weitere Chips folgen. Passt die
   Auswahl in die Zeile, liegt die Blende über leerem Raum und fällt nicht auf. */
.chips--auswahl {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.chip--auswahl { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; }
.chip--auswahl[aria-pressed="true"] { color: var(--text); font-weight: 800; box-shadow: inset 0 -3px 0 var(--akzent); }
.chip--auswahl .chip__zahl { font-weight: 500; letter-spacing: 0; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.chip--auswahl svg { width: 14px; height: 14px; }

/* Phasen sind eine Folge — sie stehen als Reihe flacher Reiter mit Zähler
   nebeneinander; die gewählte Phase trägt die Unterstreichung. */
.chips--phasen { gap: 2px; }
.chip--phase:focus-visible { outline-offset: -2px; }

/* Popover «Alle Filter»: über die ganze Breite der Fläche, die Abschnitte
   als Spalten nebeneinander — nichts muss scrollen. */
.gpop.gpop--breit { left: .75rem; right: calc(1.5rem + 54px); width: auto; }
/* Die Umfang-Popover (Phasen, Szenarien, Module) stehen rechts neben der
   linken Icon-Leiste (58 px breit), oben bündig mit ihrem Knopf — die Höhe
   setzt `popAusrichten` in js/graph.js. */
.gpop.gpop--links { left: calc(1.25rem + 58px); right: auto; }
.gpop.gpop--mittel { width: min(30rem, calc(100% - 1.5rem)); }
/* Sechs Spuren: Ansicht+Vorgehen · Phasen · Szenarien · Module (zwei
   Reihen) · Elemente+Verbindungen · Darstellung. */
.gaf-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 2.9fr) minmax(0, 1.3fr) minmax(0, 1.3fr);
  gap: 14px 20px;
  align-items: start;
}
.gaf-spalte { display: grid; gap: 14px; }
.gaf .segment { flex-wrap: wrap; }
.gs-liste--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.gs-liste--zwei > .gs-schalter:nth-child(2) { border-top: 0; }
.gaf .gs-schalter__extra { white-space: nowrap; }
@media (max-width: 1400px) {
  .gaf-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .gaf-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-liste--zwei { grid-template-columns: minmax(0, 1fr); }
  .gs-liste--zwei > .gs-schalter:nth-child(2) { border-top: 1px solid var(--rand-fein); }
}
/* «Alle Filter» liegt im Überblick neben der Inhaltsseite und ist dort
   deutlich schmaler als das Fenster: die Spalten richten sich nach der
   Breite des Popovers, nicht des Fensters. Unter 1250 px drei Spuren, die
   Module über zwei davon. */
.gpop.gpop--breit { container-type: inline-size; }
@container (max-width: 1250px) {
  .gaf-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gaf-raster > .gaf--module { grid-column: span 2; }
}
@container (max-width: 640px) {
  .gaf-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gaf { display: grid; gap: 4px; min-width: 0; }
.gaf__kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gaf__titel { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); }
/* Kasten links vom Titel für alle Häkchen darunter — gleicher Abstand wie in
   den Zeilen, damit er über ihren Kästen steht. */
.gaf__haupt { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.gaf__haupt:hover { color: var(--text); }
.gaf .gs-schalter { min-height: 30px; }
.gaf .gswatch { width: 18px; height: 18px; flex: 0 0 auto; }
.gaf .glinie { flex: 0 0 auto; }
.gaf__szenario {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--rand-fein);
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.gs-liste > .gaf__szenario:first-child { border-top: 0; }
.gaf__szenario-haken { width: 16px; text-align: center; color: var(--text-leise); font-size: 12px; flex: 0 0 auto; }
.gaf__szenario[aria-pressed="true"] .gaf__szenario-haken { color: var(--akzent); }
.gaf__szenario[aria-pressed="true"] .gaf__szenario-titel { font-weight: 700; }
.gaf__szenario:hover .gaf__szenario-titel { color: var(--akzent-text); }
.gaf__szenario-titel { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.gaf__fuss { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-top: 8px; border-top: 1px solid var(--rand-fein); }
.gaf__fuss-hinweis { margin-right: auto; }
.gaf .gs-schalter__label { overflow-wrap: break-word; }
.gauswahl__reset { color: var(--akzent-text); padding: 0 4px; }

/* Suchfeld in der Leiste mit Trefferliste als Ausklappmenü darunter. */
.gleiste-suche { position: relative; width: 100%; }
.gleiste-suche__ikone {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--text-leise); pointer-events: none;
}
.gleiste-suche__ikone svg { width: 16px; height: 16px; }
.gleiste-suche__feld {
  box-sizing: border-box;
  width: 100%;
  min-height: 34px; height: 34px;
  border: 1px solid var(--rand);
  color: var(--text);
  padding: 0 14px 0 36px;
  border-radius: 999px;
  border-color: var(--rand);
  background: var(--flaeche-2);
  font-size: 14px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.gleiste-suche__feld:hover { border-color: var(--rand-stark); }
.gleiste-suche__feld:focus {
  outline: none;
  background: var(--bg);
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-schwach);
}
.gleiste-suche__treffer {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  z-index: 7;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--rand);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}
.gleiste-suche__treffer .gs-treffer__knopf { border-radius: 8px; padding: 7px 8px; }
.gleiste-suche__treffer[hidden] { display: none; }
.gs-treffer__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-treffer__art { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise); }

/* Gewählte Module und Phasen als Chips neben dem Suchfeld. */
.gumfang { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.gumfang[hidden] { display: none; }
.gfokus--umfang { margin-left: 0; border-color: var(--rand-stark); background: var(--flaeche-2); color: var(--text); }
.gfokus--umfang:hover { background: var(--flaeche-3, var(--flaeche-2)); border-color: var(--text); }

/* Fokus-Chip in der Leiste: das Element, auf das der Graph eingeschränkt
   ist; Klick hebt den Fokus auf. */
.gfokus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  margin-left: 8px;
  padding: 0 6px 0 8px;
  border: 1px solid var(--akzent);
  background: var(--akzent-schwach);
  color: var(--akzent-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.gfokus[hidden] { display: none; }
.gfokus:hover { background: var(--akzent-schwach-2); }
.gfokus .gswatch svg { width: 13px; height: 13px; }
.gfokus__x { font-size: 15px; font-weight: 400; margin-left: 2px; }
.graph-werkzeug.ist-aktiv { color: var(--akzent-text); }

.gauswahl__reset:hover { color: var(--akzent); }

/* --- Werkzeugknöpfe in der Leiste ---------------------------------------- */
.graph-werkzeug {
  display: grid;
  place-items: center;
  width: 28px;
  padding: 0;
  flex: 0 0 auto;
}
/* Offener Popover: Icon in Akzentfarbe auf zartem Grund, kein Strich. */
.graph-werkzeug[aria-expanded="true"] { color: var(--akzent-text); background: var(--akzent-schwach); border-radius: 4px; }

/* --- Icon-Leiste auf der Fläche ------------------------------------------ */
.graph-flaeche-huelle { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.grail {
  position: absolute;
  left: .75rem; top: .75rem;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: 4px;
  background: var(--graph-bg);
  border: 1px solid var(--rand);
}
.grail__gruppe { display: flex; flex-direction: column; gap: .1rem; }
.grail__trenner { height: 1px; background: var(--rand); margin: 4px 6px; }
.grail__knopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  width: 48px;
  min-height: 44px;
  padding: .2rem 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.grail__knopf:hover { background: var(--flaeche-2); }
.grail__knopf[aria-pressed="true"] { background: transparent; }
.grail__knopf[aria-pressed="false"] { opacity: .55; }
.grail__knopf[aria-pressed="false"] .gswatch { filter: grayscale(1); }
.grail__knopf[aria-pressed="false"] .glinie { filter: grayscale(1); }
.grail__knopf .gswatch { width: 22px; height: 22px; }
.grail__zahl { font-size: 10px; font-weight: 700; line-height: 1; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.grail__knopf--linie { min-height: 28px; }
/* Oben: Auswahl nach Phasen, Szenarien, Modulen — jeder Knopf öffnet neben
   sich den Popover mit der Auswahl (offen: Akzent auf zartem Grund). Ein
   Punkt sagt, dass in dieser Dimension etwas eingeschränkt ist. */
.grail__knopf--umfang { position: relative; min-height: 34px; color: var(--text-leise); border-radius: 4px; }
.grail__knopf--umfang svg { width: 18px; height: 18px; }
.grail__knopf--umfang:hover { color: var(--text); }
.grail__knopf--umfang[aria-expanded="true"] { color: var(--akzent); background: var(--akzent-schwach); }
.grail__punkt { position: absolute; right: 7px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--akzent); display: none; }
.grail__knopf--eingeschraenkt .grail__punkt { display: block; }

/* Rechte Leiste: Werkzeuge und Zoom, gleiche Kachel wie links. */
.grail--rechts { left: auto; right: .75rem; }
.grail--rechts .graph-werkzeug,
.grail--rechts .graph-zoom__knopf { width: 44px; height: 40px; }
.grail--rechts .graph-zoom { display: flex; flex-direction: column; gap: .1rem; margin: 0; padding: 0; }
.grail--rechts .graph-zoom::before { display: none; }
.grail--rechts .graph-werkzeug:hover,
.grail--rechts .graph-zoom__knopf:hover { background: var(--flaeche-2); }

/* --- Leerer Zustand auf der Fläche --------------------------------------- */
.graph-leer {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: .6rem;
  width: min(30rem, calc(100% - 2rem));
  text-align: center;
}
.graph-leer[hidden] { display: none; }

/* --- Popover: Auswahl, Szenario, Darstellung, Legende -------------------- */
.gpop {
  position: absolute;
  right: calc(1.5rem + 54px); top: .75rem;   /* rechts bleibt die Werkzeugleiste frei */
  z-index: 6;
  width: min(23rem, calc(100% - 1.5rem));
  max-height: calc(100% - 1.5rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  border: 1px solid var(--rand-stark);
  box-shadow: var(--schatten-stark);
}
.gpop[hidden] { display: none; }
/* Die Suche liegt im Popover; die Trefferliste steht dort im Fluss. */
.gpop .suche__feld--klein { width: 100%; }
.gpop .gs-treffer { margin-top: 6px; max-height: 15rem; }
.gpop__kopf {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--rand);
}
.gpop__titel { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); }
.gpop__inhalt { padding: 14px 16px 16px; display: grid; gap: 12px; }
.gpop__hinweis { margin: 0; font-size: 12.5px; color: var(--text-leise); text-wrap: pretty; }
.gpop .chips--klein { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.graph-schliessen { width: 28px; padding: 0; display: grid; place-items: center; font-size: 14px; }

.btn--graph { gap: 6px; }

@media (max-width: 699px) {
  .graph-buehne { min-height: 60vh; }
  /* Icon-Leiste liegend, damit die Fläche in der Breite frei bleibt. */
  .grail { flex-direction: row; left: .5rem; right: .5rem; top: .5rem; overflow-x: auto; scrollbar-width: none; }
  /* Werkzeuge auf dem Telefon als zweite Reihe unten, der Zoom liegend. */
  .grail--rechts { top: auto; bottom: .5rem; left: .5rem; right: .5rem; justify-content: flex-end; }
  .grail--rechts .graph-zoom { flex-direction: row; }
  .grail--rechts .graph-werkzeug, .grail--rechts .graph-zoom__knopf { width: 40px; height: 40px; }
  .grail__gruppe { flex-direction: row; }
  .grail__trenner { width: 1px; height: auto; margin: .3rem; }
  .grail__knopf--linie { min-height: 44px; width: 34px; }
  .gpop { left: .5rem; right: .5rem; top: auto; bottom: .5rem; width: auto; max-height: 70%; }
  .gpop.gpop--links, .gpop.gpop--mittel { left: .5rem; right: .5rem; width: auto; }
  /* Zoomstufen weg: auf dem Touchgerät zoomt man mit zwei Fingern.
     «Einpassen» bleibt — dafür gibt es keine Geste. */
  .graph-zoom__knopf--stufe { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gk__form, .gkante { transition: none; }
}

@media print {
  .grail, .gpop { display: none !important; }
}

/* Im Überblick teilt sich der Graph die Höhe mit der Abbildung: keine
   Mindesthöhe der Fläche, sie folgt ihrem Behälter (unter 700 px hält die
   Bühne selbst eine Mindesthöhe). */
@media (min-width: 700px) {
  .ub-sichten .graph-flaeche { min-height: 0; }
}