/* obs-mk3-system.css -- die drei Schaubilder des Gesamtsystems auf /gesamtsystem.
   15.09.2026. Geladen NACH obs-mk2.css in der Huelle openbistudio-marketing.

   NACHGEBAUT, NICHT FOTOGRAFIERT: dieselbe Regel wie beim Chat-Nachbau der Startseite.
   Ein Bild dieser Dichte waere auf dem Telefon unlesbar; als Markup bleibt es
   durchsuchbar, uebersetzbar und bricht um.

   KEINE ZWEITE PALETTE: Farben aus den Variablen der Grunddatei und den sechs
   Zielgruppentoenen (.ist-agentur usw.) aus obs-mk2.css. Eigene Werte hier sind nur
   die Bildflaeche (--sys-grund) und die Ampel der Agentenschritte. */

.sys { --sys-grund: #0f1a23; --sys-linie: rgba(255, 255, 255, .16); --sys-hell: #eaf0f4; --sys-gruen: #7cb342; --sys-gruen-hell: #c5e1a5; --sys-blau-hell: #8fc7e5; }

.sys-bild {
    position: relative;
    margin-top: 34px;
    padding: 28px 30px 26px;
    border: 1px solid var(--sys-linie);
    border-radius: 18px;
    background: var(--sys-grund);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}

.sys-bild.ist-system   { background: radial-gradient(900px 420px at 88% -10%, rgba(31, 143, 206, .30), transparent 60%), var(--sys-grund); }
.sys-bild.ist-agenten  { background: radial-gradient(900px 420px at 10% -10%, rgba(124, 179, 66, .22), transparent 60%), var(--sys-grund); }
.sys-bild.ist-werkstatt { background: radial-gradient(900px 420px at 50% -10%, rgba(109, 63, 201, .22), transparent 60%), var(--sys-grund); }

/* Kopf eines Bildes */
.sys-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 32px; flex-wrap: wrap; }
.sys-marke { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.sys-marke i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--color-accent); }
.sys-lbl { font-size: .69rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin: 0; }
.sys-marke .sys-lbl { color: rgba(255, 255, 255, .75); }
.sys-kopf h3 { font-family: var(--font-heading); font-size: clamp(1.4rem, 2.4vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; margin: 0; color: #fff; text-wrap: balance; }
.sys-kopf p.sys-lead { margin: 0 0 4px; max-width: 34em; font-size: .95rem; line-height: 1.45; color: rgba(255, 255, 255, .78); text-align: right; }

/* Zeilenkopf: Beschriftung links, Satz, Linie */
.sys-reihenkopf { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sys-reihenkopf .sys-lbl { width: 120px; flex: none; }
.sys-reihenkopf .sys-satz { font-size: .78rem; color: rgba(255, 255, 255, .6); margin: 0; }
.sys-strich { flex: 1; height: 1px; min-width: 40px; background: rgba(255, 255, 255, .14); }

/* Pillen (Zielgruppen, Objektarten) */
.sys-pillen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sys-pill { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; font-size: .81rem; font-weight: 600; color: #fff; white-space: nowrap; background: var(--mk2-ton, var(--color-accent)); }
.sys-pill.ist-konzern { border: 1px solid rgba(255, 255, 255, .25); }
.sys-trenner { width: 1px; height: 26px; background: rgba(255, 255, 255, .2); }
.sys-reihenkopf .sys-pillen .sys-lbl { width: auto; color: rgba(255, 255, 255, .4); }

/* Die Apps */
.sys-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sys-app { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 16px; border-radius: 14px; background: var(--sys-hell); color: var(--color-text); border: 1px solid var(--color-divider); border-top: 4px solid var(--color-accent); }
.sys-app.ist-crm { border-top-color: var(--color-accent-600); }
.sys-app.ist-hub { border-top-color: var(--color-accent-2-500); }
.sys-app.ist-monitoring { border-top-color: var(--color-accent-2-700); }
.sys-app-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sys-app-kopf h4 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--color-text); }
.sys-host { font-family: var(--font-mono, ui-monospace, monospace); font-size: .69rem; color: var(--color-neutral-700); }
.sys-app p { margin: 0; font-size: .78rem; line-height: 1.4; color: var(--color-neutral-700); }
.sys-mods { display: flex; flex-wrap: wrap; gap: 6px; }
.sys-mod { padding: 4px 9px; border-radius: 6px; background: #fff; border: 1px solid var(--color-divider); font-size: .72rem; font-weight: 500; color: var(--color-text); white-space: nowrap; }
.sys-mod.ist-ki { border-color: var(--color-accent); color: var(--color-accent-700); font-weight: 600; }

/* Erweitern: Quellen -> Instanz */
.sys-erw { display: grid; grid-template-columns: 236px 34px minmax(0, 1fr); align-items: stretch; }
.sys-quellen { display: flex; flex-direction: column; gap: 8px; }
.sys-quelle { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); }
.sys-quelle b { font-size: .84rem; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.sys-quelle span { font-size: .72rem; line-height: 1.4; color: rgba(255, 255, 255, .7); }
.sys-quelle.ist-markt { border-color: var(--color-accent); background: rgba(31, 143, 206, .16); }
.sys-pfeil { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .5); }
.sys-pfeil svg { display: block; }
.sys-instanz { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); }
.sys-instanz-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sys-instanz-kopf b { font-family: var(--font-heading); font-size: .95rem; font-weight: 800; letter-spacing: -.02em; }
.sys-instanz-kopf span { font-size: .72rem; color: rgba(255, 255, 255, .6); }
.sys-zeile { display: grid; grid-template-columns: 104px 22px minmax(0, 1fr); gap: 0 8px; align-items: center; }
.sys-zeile .sys-pill { justify-content: center; padding: 5px 10px; font-size: .75rem; }
.sys-zeile-inhalt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sys-zeile-inhalt b { font-size: .75rem; font-weight: 600; margin-right: 4px; }
.sys-zeile-inhalt .sys-mod { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
.sys-zeile-inhalt .sys-mod.ist-ki { background: rgba(31, 143, 206, .18); border-color: var(--color-accent); color: var(--sys-blau-hell); }
.sys-zeile-inhalt .sys-mod.ist-gruen { background: rgba(124, 179, 66, .2); border-color: var(--sys-gruen); color: var(--sys-gruen-hell); }

/* Datenbestand als Graph */
.sys-graph { display: block; width: 100%; height: auto; overflow: visible; }
.sys-graph text { font-family: var(--font-heading); font-size: 13px; font-weight: 600; fill: #fff; }
.sys-graph .ist-kunde text { font-weight: 800; }
.sys-graph .ist-agent text { fill: var(--sys-gruen-hell); }
.sys-graph .sys-hinweis { font-size: 11.5px; font-weight: 500; fill: rgba(255, 255, 255, .55); }
.sys-graph .sys-kanten { stroke: rgba(255, 255, 255, .32); stroke-width: 1.5; fill: none; }
.sys-graph .sys-kanten.ist-agent { stroke: var(--sys-gruen); stroke-dasharray: 4 4; }
.sys-graph rect { fill: rgba(255, 255, 255, .08); stroke: rgba(255, 255, 255, .3); }
.sys-graph .ist-kunde rect { fill: var(--color-accent); stroke: var(--color-accent); }
.sys-graph .ist-agent rect { fill: rgba(124, 179, 66, .18); stroke: var(--sys-gruen); }

/* Fundament */
.sys-fund { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 12px 18px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.sys-fund .sys-lbl { width: 84px; flex: none; }
.sys-fund span { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 500; color: rgba(255, 255, 255, .85); white-space: nowrap; }
.sys-fund span i { width: 7px; height: 7px; border-radius: 50%; background: var(--sys-gruen); flex: none; }
.sys-fund a { margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--sys-blau-hell); text-decoration: none; }
.sys-fund a:hover { color: #fff; }

/* Ketten: fuenf Schritte (Agenten, Werkstatt) */
.sys-reihe { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .04); }
.sys-reihe.ist-markt { border-color: var(--color-accent); background: rgba(31, 143, 206, .12); }
.sys-kettenkopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sys-kettenkopf b { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.sys-kettenkopf .sys-satz { font-size: .81rem; color: rgba(255, 255, 255, .62); margin: 0; }
.sys-modus { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; border: 1px solid rgba(255, 255, 255, .3); white-space: nowrap; }
.sys-modus.ist-auto { border-color: var(--sys-gruen); color: var(--sys-gruen-hell); }
.sys-modus.ist-vorschlag { border-color: var(--color-accent); color: var(--sys-blau-hell); }
.sys-modus.ist-skill { border-color: #6d3fc9; color: #c9b3f5; }
.sys-modus.ist-plugin { border-color: #c2410c; color: #f5b79a; }
.sys-modus.ist-ziel { border-color: var(--sys-blau-hell); color: var(--sys-blau-hell); }
.sys-kette { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.sys-schritt { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 15px; border-radius: 12px; background: var(--sys-hell); color: var(--color-text); border: 1px solid var(--color-divider); border-top: 3px solid var(--color-neutral-700); }
.sys-schritt-art { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-700); margin: 0; }
.sys-schritt b { font-family: var(--font-heading); font-size: .97rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.sys-schritt p { margin: 0; font-size: .81rem; line-height: 1.45; color: var(--color-neutral-700); }
.sys-schritt p strong { color: var(--color-text); }
.sys-schritt .sys-mods .sys-mod { font-size: .75rem; }
/* Ampel der Schritte */
.sys-schritt.ist-wenn      { border-top-color: var(--color-neutral-700); }
.sys-schritt.ist-verstehe  { border-top-color: var(--color-accent); }
.sys-schritt.ist-verstehe .sys-schritt-art { color: var(--color-accent); }
.sys-schritt.ist-schau     { border-top-color: var(--color-accent-600); }
.sys-schritt.ist-schau .sys-schritt-art { color: var(--color-accent-600); }
.sys-schritt.ist-entscheide { border-top-color: #c2410c; }
.sys-schritt.ist-entscheide .sys-schritt-art { color: #c2410c; }
.sys-schritt.ist-tu        { border-top-color: var(--color-accent-2-500); }
.sys-schritt.ist-tu .sys-schritt-art { color: var(--color-accent-2-700); }
.sys-schritt.ist-skill     { border-top-color: #6d3fc9; }
.sys-schritt.ist-plugin    { border-top-color: #c2410c; }
.sys-schritt.ist-markt     { border-top-color: var(--color-accent); }

/* Zwei Modi */
.sys-modi { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 4px; }
.sys-modi .sys-satz { font-size: .78rem; color: rgba(255, 255, 255, .7); margin: 0; max-width: 34em; }

/* Agenten: Beispiele links, Wo rechts */
.sys-agenten { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; }
.sys-beispiele { display: flex; flex-direction: column; gap: 14px; }
.sys-wo-spalte { display: flex; flex-direction: column; gap: 8px; }
.sys-wo { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); flex: 1; justify-content: center; }
.sys-wo.ist-markt { border-color: var(--color-accent); background: rgba(31, 143, 206, .16); }
.sys-wo b { font-size: .88rem; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.sys-wo .sys-mods .sys-mod { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; font-size: .78rem; }
.sys-wo .sys-satz { font-size: .78rem; line-height: 1.4; color: rgba(255, 255, 255, .7); margin: 0; }

/* Schmale Fenster: eine Bruchstelle je Raster */
@media (max-width: 1100px) {
    .sys-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sys-kette { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sys-agenten { grid-template-columns: 1fr; }
    .sys-kopf p.sys-lead { text-align: left; }
}

@media (max-width: 900px) {
    .sys-bild { padding: 20px 18px 18px; }
    .sys-erw { grid-template-columns: 1fr; gap: 10px; }
    .sys-pfeil { transform: rotate(90deg); height: 30px; }
    .sys-reihenkopf .sys-lbl { width: 100%; }
    .sys-trenner { display: none; }
    .sys-fund a { margin-left: 0; }
}

@media (max-width: 640px) {
    .sys-apps, .sys-kette { grid-template-columns: 1fr; }
    .sys-zeile { grid-template-columns: 1fr; gap: 6px; }
    .sys-zeile .sys-pfeil { display: none; }
    .sys-zeile .sys-pill { justify-self: start; }
    .sys-graph { display: none; }
    .sys .sys-graph-liste { display: flex; }
    .sys-fund span { white-space: normal; }
}

/* Marke im Bildkopf: Ton der Zielgruppenklasse oder Gruen */
.sys-marke i.ist-saas, .sys-marke i.ist-agentur, .sys-marke i.ist-betreiber { background: var(--mk2-ton); }
.sys-marke i.ist-gruen { background: var(--sys-gruen); }

/* Helle Karten im Nachtband: .mk2-band.ist-nacht faerbt p, b und strong weiss --
   auf den hellen Karten stuende Weiss auf Weiss. Dieselbe Falle wie bei .mk2-kachel,
   deshalb hier mit hoeherer Spezifitaet zurueckgeholt. */
.sys .sys-app p, .sys .sys-schritt p { color: var(--color-neutral-700); }
.sys .sys-app h4, .sys .sys-schritt b, .sys .sys-schritt p strong, .sys .sys-mod { color: var(--color-text); }
.sys .sys-mod.ist-ki { color: var(--color-accent-700); }
.sys .sys-zeile-inhalt .sys-mod, .sys .sys-wo .sys-mods .sys-mod { color: #fff; }
.sys .sys-zeile-inhalt .sys-mod.ist-ki { color: var(--sys-blau-hell); }
.sys .sys-zeile-inhalt .sys-mod.ist-gruen { color: var(--sys-gruen-hell); }
.sys .sys-schritt-art { color: var(--color-neutral-700); }
.sys .sys-schritt.ist-verstehe .sys-schritt-art { color: var(--color-accent); }
.sys .sys-schritt.ist-schau .sys-schritt-art { color: var(--color-accent-600); }
.sys .sys-schritt.ist-entscheide .sys-schritt-art { color: #c2410c; }
.sys .sys-schritt.ist-tu .sys-schritt-art { color: var(--color-accent-2-700); }
.sys .sys-host { color: var(--color-neutral-700); }
.sys .sys-schritt .sys-mod, .sys .sys-wo .sys-mod { white-space: normal; }
.sys-kopf p.sys-lead { text-align: left; }

/* Der Graph ist unter 640 px unlesbar; dort steht die Liste der Objekte. */
.sys-graph-liste { display: none; }
.sys .sys-graph-liste .sys-mod { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; white-space: normal; }
.sys .sys-graph-liste .sys-mod.ist-kunde { background: var(--color-accent); border-color: var(--color-accent); font-weight: 700; }
.sys .sys-graph-liste .sys-mod.ist-agent { background: rgba(124, 179, 66, .2); border-color: var(--sys-gruen); color: var(--sys-gruen-hell); }