/* ============================================================
   Konzernstruktur — Ventega Group
   Nur auf konzernstruktur.html geladen.

   Zwei Beziehungsarten werden konsequent unterschieden:
     durchgezogene Champagner-Linie = Konzernzugehoerigkeit
     gestrichelte Violett-Linie     = Zusammenarbeit ohne Beteiligung

   Die Markenkacheln tragen die Farben ihrer eigenen Marke. Dadurch sehen
   sie im hellen wie im dunklen Ventega-Design identisch aus — so, wie die
   Marke auf ihrer eigenen Website auftritt.
   ============================================================ */

.ks{
  --ks-own:#C9B48D;                      /* Konzernlinie */
  --ks-net:#A78BFA;                      /* Netzwerklinie */
  --ks-frame:rgba(201,180,141,.34);
  --ks-frame-bg:rgba(201,180,141,.045);
  --ks-gap:clamp(12px,2.2vw,22px);
  --ks-stem:38px;                        /* Abstand Gruppe -> Ventega AI */
}
html[data-theme="light"] .ks{
  --ks-own:#9A7B4F;
  --ks-net:#6D3FE0;
  --ks-frame:rgba(154,123,79,.34);
  --ks-frame-bg:rgba(154,123,79,.05);
}

/* ---------- Markenpaletten (in beiden Designs gleich) ---------- */
.ks [data-brand="group"]    {--tile:#0B0714;--edge:rgba(201,180,141,.44);--ink:#F7F3FC;--sub:#B9AECB}
.ks [data-brand="ai"]       {--tile:#150E22;--edge:rgba(139,92,246,.46);--ink:#EFEAFA;--sub:#9C90BE}
.ks [data-brand="solve"]    {--tile:#641B2B;--edge:rgba(224,168,92,.42);--ink:#F5EFE7;--sub:#CBAA9F}
.ks [data-brand="launchpad"]{--tile:#FFFFFF;--edge:rgba(16,12,26,.18);--ink:#100C1A;--sub:#6B6478}
.ks [data-brand="network"]  {--tile:#07070A;--edge:rgba(180,92,245,.44);--ink:#F3F0EA;--sub:#9B978F}

/* ============================================================
   1 · Strukturbild
   ============================================================ */

/* Drei Spalten, aussen gleich breit: der Konzernrahmen steht dadurch exakt
   in der Seitenmitte, das Netzwerk haengt rechts daneben. */
.ks-chart{
  position:relative;
  display:grid;
  grid-template-columns:minmax(250px,1fr) minmax(0,660px) minmax(250px,1fr);
  grid-template-rows:auto auto auto;
  margin:0 auto;
  padding-top:14px;
  --ks-bridge:clamp(28px,3vw,48px);
}

/* Der Rahmen liegt hinter Spalte 2 und markiert, was zur Gruppe gehoert. */
.ks-frame{
  position:relative;
  grid-column:2;grid-row:1 / 4;
  border:1px dashed var(--ks-frame);
  border-radius:20px;
  background:var(--ks-frame-bg);
  pointer-events:none;
}
.ks-frame-tag{
  position:absolute;top:-8px;left:22px;
  padding:2px 10px;border-radius:99px;
  background:var(--bg);border:1px solid var(--ks-frame);
  font-family:'Sora',sans-serif;font-weight:600;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ks-own);
}

.ks-tier{grid-column:2;position:relative;z-index:1;padding-inline:clamp(16px,3vw,30px)}
.ks-tier-group{grid-row:1;padding-top:34px}
.ks-tier-ai{grid-row:2;padding-top:var(--ks-stem)}
.ks-tier-kids{grid-row:3;padding-bottom:32px;display:grid;grid-template-columns:1fr 1fr;gap:var(--ks-gap)}

/* Stamm zwischen Gruppe und Ventega AI */
.ks-tier-ai::before{
  content:"";position:absolute;left:50%;top:0;width:1px;height:var(--ks-stem);
  background:var(--ks-own);
}
/* Waagrechter Anschluss von der Ventega-AI-Kachel bis zum Rahmenrand. */
.ks-tier-ai::after{
  content:"";position:absolute;right:0;left:calc(50% + 170px);
  bottom:calc(50% - var(--ks-stem) / 2);
  border-top:1px dashed var(--ks-net);
}

/* Gabel auf die beiden Untermarken — die Gabel benutzt dasselbe
   Spaltenraster wie die Kacheln, dadurch treffen die Beine exakt mittig. */
.ks-fork{
  grid-column:1 / -1;height:54px;position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--ks-gap);
}
.ks-fork::before{                        /* Stamm von oben bis zum Querbalken */
  content:"";position:absolute;left:50%;top:0;width:1px;height:26px;background:var(--ks-own);
}
.ks-fork::after{                         /* Querbalken, Mitte links bis Mitte rechts */
  content:"";position:absolute;top:26px;height:1px;background:var(--ks-own);
  left:calc(25% - var(--ks-gap) / 4);right:calc(25% - var(--ks-gap) / 4);
}
.ks-fork i{position:relative}
.ks-fork i::after{                       /* Bein hinunter zur Kachel */
  content:"";position:absolute;left:50%;top:26px;bottom:calc(-1 * var(--ks-gap));width:1px;background:var(--ks-own);
}

/* Netzwerk rechts neben dem Rahmen. Die gestrichelte Bruecke ist Teil dieses
   Elements und liegt auf 50 % seiner Hoehe - also exakt auf der Mitte der
   Netzwerkkachel. align-self:center mittet die Margin-Box; der obere Rand
   von --ks-stem schiebt das Element um --ks-stem/2 nach unten, auf die
   Mitte der Ventega-AI-Kachel. Beide Enden der Linie liegen damit auf einer
   Hoehe. */
.ks-outside{
  grid-column:3;grid-row:2;align-self:center;justify-self:start;
  position:relative;padding-left:var(--ks-bridge);
  /* Ein Transform statt Rand: verschiebt um --ks-stem/2 auf die Mitte der
     Ventega-AI-Kachel, ohne die Zeilenhoehe des Rasters zu veraendern. */
  transform:translateY(calc(var(--ks-stem) / 2));
  width:min(100%,calc(var(--ks-bridge) + 224px));
}
.ks-outside::before{
  content:"";position:absolute;left:0;width:calc(var(--ks-bridge) - 10px);top:50%;
  border-top:1px dashed var(--ks-net);
}
.ks-outside::after{
  content:"";position:absolute;left:calc(var(--ks-bridge) - 13px);top:50%;
  transform:translateY(-50%);width:9px;height:9px;border-radius:50%;
  border:1px solid var(--ks-net);background:var(--bg);
}
/* Der Hinweis haengt unter der Kachel, ohne ihre Mitte zu verschieben. */
.ks-outside-note{
  position:absolute;left:var(--ks-bridge);right:0;top:100%;
  margin:12px 0 0;text-align:center;
  font-family:'Sora',sans-serif;font-weight:600;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}

/* ---------- Kacheln ---------- */
.ks-node{
  background:var(--tile);
  border:1px solid var(--edge);
  border-radius:13px;
  padding:16px 16px 14px;
  text-align:center;
  min-width:0;
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,.24);
}
.ks-node-lead{max-width:340px;margin-inline:auto}
.ks-node-mark{display:flex;align-items:center;justify-content:center;min-height:30px;margin-bottom:11px}
/* Die Hoehe wird je Marke gesetzt, damit alle Wortmarken optisch gleich gross
   wirken - die gelieferten Sperrungen haben sehr unterschiedliche Seitenverhaeltnisse. */
.ks-node-mark img{display:block;width:auto;height:24px;max-width:100%}
.ks-node[data-brand="solve"] .ks-node-mark img{height:32px}
.ks-node[data-brand="launchpad"] .ks-node-mark img{height:16px}
.ks-node-role{
  font-family:'Sora',sans-serif;font-weight:600;font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--sub);
}
.ks-node-url{
  display:block;margin-top:5px;font-family:'Inter',sans-serif;font-size:11.5px;
  color:var(--sub);opacity:.82;word-break:break-word;
}
.ks-node[data-brand="network"] .ks-node-role{color:#B45CF5}

/* Der Gruppenknoten traegt das Logo etwas groesser. */
.ks-node-group .ks-node-mark{min-height:40px;margin-bottom:13px}

/* ---------- Wortmarken in Reinform ---------- */
/* Ventega AI: identisch zur Wortmarke der Website. */
.ks-wm-ai{
  font-family:'Sora',sans-serif;font-weight:800;font-size:15px;
  letter-spacing:.26em;color:#EFEAFA;white-space:nowrap;
}
.ks-wm-ai span{
  background:linear-gradient(92deg,#A78BFA,#D946EF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Business Network: identische Schriftfolge wie auf der Netzwerkseite. */
.ks-wm-net{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,"Segoe UI",system-ui,sans-serif;
  font-weight:500;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;
  color:#F3F0EA;white-space:nowrap;
}
.ks-wm-net span{color:#B45CF5}

/* ---------- Legende ---------- */
.ks-legend{
  list-style:none;margin:26px auto 0;padding:0;max-width:720px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;
}
.ks-legend li{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--muted);line-height:1.5;
}
.ks-key{flex:0 0 auto;width:26px;height:0;border-top:1px solid var(--ks-own)}
.ks-key-net{border-top:1px dashed var(--ks-net)}

.ks-chart-note{
  max-width:720px;margin:20px auto 0;text-align:center;
  font-size:13.5px;line-height:1.7;color:var(--faint);
}

/* ============================================================
   2 · Markenabschnitte
   ============================================================ */

.ks-brand{overflow:hidden;margin-top:0}
.ks-brand-head{
  background:var(--tile);
  border-bottom:1px solid var(--edge);
  padding:clamp(22px,3.4vw,32px) clamp(20px,3.4vw,34px);
}
.ks-brand-logo{display:flex;align-items:center;min-height:34px}
.ks-brand-logo img{display:block;width:auto;height:40px;max-width:100%}
.ks-brand[data-brand="solve"] .ks-brand-logo img{height:46px}
.ks-brand[data-brand="launchpad"] .ks-brand-logo img{height:28px}
.ks-brand-claim{
  margin:13px 0 0;color:var(--sub);font-size:14.5px;line-height:1.65;max-width:56ch;
}
.ks-brand-body{padding:clamp(22px,3.4vw,32px) clamp(20px,3.4vw,34px)}
.ks-brand-body>p{color:var(--muted);font-size:15px;line-height:1.78;max-width:70ch}
.ks-brand-body>p+p{margin-top:14px}

.ks-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:1px;background:var(--border-soft);
  border:1px solid var(--border-soft);border-radius:11px;overflow:hidden;
  margin:0 0 22px;
}
.ks-facts div{background:var(--surface);padding:13px 15px}
.ks-facts b{
  display:block;font-family:'Sora',sans-serif;font-weight:600;font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin-bottom:5px;
}
.ks-facts span{display:block;font-size:14px;color:var(--text);line-height:1.5}
.ks-facts a{color:var(--violet-bright);text-decoration:none}
.ks-facts a:hover{text-decoration:underline}

.ks-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ks-chips span{
  font-family:'Sora',sans-serif;font-weight:600;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--border);border-radius:99px;padding:5px 13px;
}

.ks-sub{margin-top:22px}
.ks-sub h3{
  font-family:'Sora',sans-serif;font-weight:600;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:12px;
}
.ks-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ks-list li{
  position:relative;padding-left:20px;color:var(--muted);font-size:14.5px;line-height:1.65;
}
.ks-list li::before{
  content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--violet-bright);
}
.ks-list b{color:var(--text);font-weight:600}

/* Produktzeile bei Launchpad */
.ks-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:6px}
.ks-product{
  background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:11px;padding:15px 16px;
}
.ks-product b{
  display:block;font-family:'Sora',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-bottom:4px;
}
.ks-product span{display:block;font-size:13.5px;line-height:1.6;color:var(--muted)}

/* Hinweiskasten fuer die Netzwerk-Abgrenzung */
.ks-note{
  margin-top:22px;border:1px solid var(--border);
  border-left:3px solid var(--ks-net);border-radius:11px;
  background:var(--surface-2);padding:16px 19px;
}
.ks-note>b{
  display:block;font-family:'Sora',sans-serif;font-weight:600;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--violet-bright);margin-bottom:7px;
}
.ks-note p{color:var(--muted);font-size:14.5px;line-height:1.72}
.ks-note p+p{margin-top:9px}
/* Hervorhebung im Fliesstext bleibt Fliesstext. */
.ks-note p b{
  display:inline;font-family:inherit;font-size:inherit;font-weight:600;
  letter-spacing:normal;text-transform:none;color:var(--text);margin:0;
}

/* ============================================================
   3 · Zuordnungstabelle
   ============================================================ */

.ks-matrix{width:100%;border-collapse:collapse;font-size:14.5px}
.ks-matrix caption{
  caption-side:top;text-align:left;padding:0 0 14px;
  font-size:13.5px;line-height:1.7;color:var(--faint);
}
.ks-matrix th,.ks-matrix td{
  text-align:left;padding:13px 16px;border-bottom:1px solid var(--border-soft);
  vertical-align:top;
}
.ks-matrix thead th{
  font-family:'Sora',sans-serif;font-weight:600;font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--border);
}
.ks-matrix tbody th{font-weight:500;color:var(--text);width:44%}
.ks-matrix td{color:var(--muted)}
.ks-matrix tbody tr:last-child th,.ks-matrix tbody tr:last-child td{border-bottom:0}
.ks-matrix-brand{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:'Sora',sans-serif;font-weight:600;font-size:11.5px;
  letter-spacing:.08em;color:var(--text);
}
.ks-matrix-brand::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--dot,var(--violet));flex:0 0 auto;
}
.ks-matrix-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.ks-legalnote{
  max-width:820px;margin:34px auto 0;padding:15px 20px;
  border:1px solid var(--border-soft);border-radius:11px;background:var(--surface);
  font-size:13.5px;line-height:1.72;color:var(--faint);
}

/* ============================================================
   4 · Schmale Ansichten
   ============================================================ */

/* Ab hier steht das Netzwerk unter dem Rahmen statt daneben. Die Bruecke
   wird dabei zur senkrechten Linie; der waagrechte Anschluss entfaellt. */
@media(max-width:1020px){
  .ks-chart{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto}
  .ks-frame{grid-row:1 / 4;grid-column:1}
  .ks-tier{grid-column:1}
  .ks-tier-ai::after{display:none}
  .ks-outside{
    grid-column:1;grid-row:4;justify-self:center;
    width:min(100%,290px);transform:none;padding-left:0;padding-top:44px;
  }
  .ks-outside::before{
    left:50%;width:0;top:0;height:30px;
    border-top:0;border-left:1px dashed var(--ks-net);
  }
  .ks-outside::after{left:50%;top:30px;transform:translate(-50%,0)}
  .ks-outside-note{position:static;margin-top:12px}
}

/* Einspaltig wird aus der Gabel eine durchgehende Schiene mit zwei
   Abzweigungen. Schiene, Stamm und Abzweigungen liegen auf derselben
   senkrechten Achse --ks-rail, damit die Linie nirgends abreisst. */
@media(max-width:560px){
  .ks{--ks-rail:30px;--ks-branch:24px;--ks-kids-gap:16px;--ks-drop:30px}
  .ks-tier{padding-inline:16px}

  .ks-tier-ai::before{left:var(--ks-rail)}
  .ks-node-lead{max-width:none}

  .ks-fork{display:none}
  .ks-tier-kids{
    grid-template-columns:minmax(0,1fr);gap:var(--ks-kids-gap);
    position:relative;padding-top:var(--ks-drop);
    padding-left:calc(var(--ks-rail) + var(--ks-branch));
  }
  /* Stamm von der Ventega-AI-Kachel bis zur ersten Abzweigung */
  .ks-tier-kids::before{
    content:"";position:absolute;left:var(--ks-rail);top:0;
    width:1px;height:var(--ks-drop);background:var(--ks-own);
  }
  .ks-tier-kids>.ks-node{position:relative}
  /* Abzweigung in die Kachel */
  .ks-tier-kids>.ks-node::before{
    content:"";position:absolute;left:calc(-1 * var(--ks-branch));top:var(--ks-drop);
    width:var(--ks-branch);height:1px;background:var(--ks-own);
  }
  /* Schienenstueck: bis zur eigenen Abzweigung, bei allen ausser der letzten
     Kachel weiter bis zur naechsten. */
  .ks-tier-kids>.ks-node::after{
    content:"";position:absolute;left:calc(-1 * var(--ks-branch));top:0;
    width:1px;height:var(--ks-drop);background:var(--ks-own);
  }
  .ks-tier-kids>.ks-node:not(:last-child)::after{
    height:calc(100% + var(--ks-kids-gap));
  }

  .ks-node{text-align:left}
  .ks-node-mark{justify-content:flex-start}
  .ks-facts{grid-template-columns:minmax(0,1fr)}

  /* Die Zuordnung wird gestapelt statt seitlich gescrollt - dieselbe
     Aufloesung wie bei der Impressumstabelle. Die Kopfzeile bleibt fuer
     Screenreader erhalten, sie wird nur optisch entfernt. */
  .ks-matrix caption{padding-bottom:8px}
  .ks-matrix thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ks-matrix tbody th{display:block;width:auto;padding:15px 0 7px;border-bottom:0}
  .ks-matrix tbody td{display:block;padding:0 0 15px;border-bottom:1px solid var(--border-soft)}
  .ks-matrix tbody tr:first-child th{padding-top:0}
  .ks-matrix tbody tr:last-child td{border-bottom:0}
  .ks-matrix-brand{white-space:normal;display:flex;align-items:flex-start}
  .ks-matrix-brand::before{margin-top:.42em}
}

/* ---------- Helles Design: Kacheln bleiben Markenflaechen ---------- */
html[data-theme="light"] .ks-node{box-shadow:0 10px 26px rgba(40,25,90,.14)}
html[data-theme="light"] .ks-frame-tag{background:var(--bg)}
html[data-theme="light"] .ks-outside::after{background:var(--bg)}
html[data-theme="light"] .ks-product{background:var(--surface-2)}
html[data-theme="light"] .ks-note{background:var(--surface-2)}

/* ---------- Kontrastmodus ---------- */
html.contrast-high .ks{--ks-own:#E7D6B4;--ks-net:#C9B4FF;--ks-frame:rgba(231,214,180,.6)}
html.contrast-high[data-theme="light"] .ks{--ks-own:#6F5326;--ks-net:#4A22B0;--ks-frame:rgba(111,83,38,.6)}