/* Holzbach Ventures, Szene M2 Plattform (#plattform, Nacht-2).
   Schaltbild: Für uns, Kern KI / Plattform, Für die Betriebe. Leitungen als Bündel aus Haarlinien (SVG),
   Impulse im Canvas darüber. Präfix .pf-, keine globalen Element-Selektoren. Zeitfunktion nur ease-in-out. */

.pf {
  --pf-draht: #46538e;          /* Haarlinie der Leitungen: gedämpftes Ultramarin auf Nacht-2 */
  --pf-bus: #5d6ab8;            /* Bus im Kern, etwas heller */
  --pf-draht-aktiv: var(--signal-nacht);
  --pf-haar: 1px;               /* setzt das Skript auf 1 Gerätepixel */
  position: relative;
  background: var(--nacht-2);
  color: var(--auf-nacht);
  border-top: 1px solid var(--nacht-linie);
  padding-block: var(--sektion);
  overflow-x: clip;
}

/* Kopf */
.pf-kopf { display: grid; gap: 20px; }
.pf-h2 {
  margin: 0;
  font-size: var(--s-h2-groesse, var(--gr-h2));
  font-weight: var(--s-h2-gewicht, 600);
  line-height: var(--s-h2-zeilenabstand, 1.04);
  letter-spacing: var(--s-h2-laufweite, -0.032em);
  text-wrap: balance;
}
.pf-intro {
  margin: 0;
  max-width: 28em;
  font-size: var(--gr-lead);
  line-height: 1.55;
  color: var(--auf-nacht-2);
  text-wrap: pretty;
}
@media (min-width: 960px) {
  .pf-kopf {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spalte-abstand);
    align-items: end;
  }
  .pf-h2 { grid-column: 1 / span 6; }
  .pf-intro { grid-column: 8 / span 5; padding-bottom: 0.3em; }
}

/* Abbildung */
.pf-abb { margin: clamp(56px, 8vh, 104px) 0 0; }
.pf-schema { position: relative; }

.pf-leitungen, .pf-impulse {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  pointer-events: none;
}
.pf-leitungen { z-index: 1; overflow: visible; }
.pf-impulse { z-index: 2; }

/* Leitungen (vom Skript gebaut) */
.pf-strang {
  fill: none;
  stroke: var(--pf-draht);
  stroke-width: var(--pf-haar);
  transition: stroke var(--t-ui) ease-in-out, stroke-opacity var(--t-ui) ease-in-out;
}
.pf-route--bus .pf-strang { stroke: var(--pf-bus); }
.pf-route.ist-aktiv .pf-strang { stroke: var(--pf-draht-aktiv); }
.pf-strang { stroke-opacity: 1; }
.pf.hat-aktiv .pf-route:not(.ist-aktiv) .pf-strang { stroke-opacity: 0.45; }
.pf-port { fill: var(--signal-nacht); opacity: 0.55; transition: opacity var(--t-ui) ease-in-out; }
.pf-port--kern { opacity: 0.9; }
.pf-port.ist-aktiv { opacity: 1; }

/* Einmaliges Aufzeichnen beim Eintritt */
.pf-js .pf-strang {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--t-draw) ease-in-out var(--pf-v, 0ms), stroke var(--t-ui) ease-in-out, stroke-opacity var(--t-ui) ease-in-out;
}
.pf-js.pf-an .pf-strang { stroke-dashoffset: 0; }
.pf-js.pf-an .pf-strang--d1 { stroke-dashoffset: 1; }
.pf-js.pf-an .pf-strang--d2 { stroke-dashoffset: 1; }
.pf-js.pf-an.pf-dicht-1 .pf-strang--d1 { stroke-dashoffset: 0; }
.pf-js.pf-an.pf-dicht-2 .pf-strang--d2 { stroke-dashoffset: 0; }
.pf-js .pf-port { opacity: 0; transition: opacity var(--t-reveal) ease-in-out var(--pf-v, 0ms); }
.pf-js.pf-an .pf-port { opacity: 0.55; }
.pf-js.pf-an .pf-port--kern { opacity: 0.9; }
.pf-js.pf-an .pf-port.ist-aktiv { opacity: 1; transition-delay: 0ms; }
.pf-ohne-uebergang .pf-strang, .pf-ohne-uebergang .pf-port { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .pf-strang, .pf-port { transition-delay: 0ms !important; }
}

/* Gruppen und Module */
.pf-gruppe { position: relative; z-index: 3; }
.pf-gruppe-titel {
  margin: 0 0 14px;
  font-size: var(--gr-klein);
  font-weight: 600;
  line-height: 1.3;
  color: var(--auf-nacht-2);
}
.pf-module {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--nacht-linie);
}
.pf-modul {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 14px 0;
  border-bottom: 1px solid var(--nacht-linie);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--auf-nacht);
  cursor: default;
  transition: color var(--t-ui) ease-in-out;
}
.pf-modul:focus-visible { outline-offset: -2px; }

/* Kern: KI / Plattform, Eckwinkel wie in B */
.pf-kern {
  position: relative;
  z-index: 0;
  margin: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  background: var(--nacht);
  border: 1px solid var(--nacht-linie);
  text-align: center;
}
.pf-kern::before, .pf-kern::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--auf-nacht-2);
  pointer-events: none;
}
.pf-kern::before { left: -1px; top: -1px; border-width: 1.5px 0 0 1.5px; }
.pf-kern::after { right: -1px; bottom: -1px; border-width: 0 1.5px 1.5px 0; }
.pf-kern-ki {
  display: block;
  font-size: clamp(3rem, 2rem + 2.6vw, 4.5rem);
  font-weight: 780;
  font-stretch: 125%;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--auf-nacht);
}
.pf-kern-zusatz {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--auf-nacht-2);
}

/* Unterschrift */
.pf-unterschrift {
  margin-top: clamp(40px, 6vh, 64px);
  padding-top: 14px;
  border-top: 1px solid var(--nacht-linie);
  color: var(--auf-nacht-2);
}
.pf-unterschrift-nr { color: var(--auf-nacht); }

/* Mobil und Tablet: vertikale Wirbelsäule links */
@media (max-width: 1099px) {
  .pf { --pf-draht: #53609f; --pf-bus: #6874c4; }
  .pf-schema { padding-left: 60px; }
  .pf-gruppe-titel { margin-bottom: 10px; }
  .pf-modul { min-height: 56px; padding: 12px 0; }
  /* Der Kern sitzt als Wirbel auf der Säule: er reicht nach links über das Bündel */
  .pf-kern {
    height: 148px;
    margin: 32px 0 32px -60px;
    padding-left: 60px;
    max-width: 620px;
  }
  .pf-kern::before, .pf-kern::after { width: 14px; height: 14px; }
  .pf-kern-ki { font-size: 3rem; }
}

/* Desktop: drei Spalten, Leitungen in den Zwischenräumen. Erste Zeile: beide Gruppentitel auf einer Linie. */
@media (min-width: 1100px) {
  .pf-schema {
    --pf-luecke: clamp(104px, 9.6vw, 148px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(220px, 20vw, 296px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--pf-luecke);
    align-items: center;
  }
  .pf-gruppe { display: contents; }
  .pf-gruppe-titel { grid-row: 1; align-self: end; margin: 0 0 14px; }
  .pf-gruppe--ein .pf-gruppe-titel { grid-column: 1; }
  .pf-gruppe--aus .pf-gruppe-titel { grid-column: 3; padding-left: 28px; }
  /* Beide Listen beginnen oben, 14 px unter ihrem Titel. Die rechte Liste reicht so hoch wie die linke,
     ihre drei Zeilen teilen sich die Höhe: die Mitte liegt auf dem Bus, die Leitungen bleiben symmetrisch. */
  .pf-gruppe--ein .pf-module { grid-column: 1; grid-row: 2; align-self: start; }
  .pf-kern { grid-column: 2; grid-row: 2; }
  .pf-gruppe--aus .pf-module { grid-column: 3; grid-row: 2; align-self: stretch; display: flex; flex-direction: column; }
  .pf-gruppe--aus .pf-modul { flex: 1 1 0; }
  .pf-gruppe--ein .pf-modul { padding-right: 28px; }
  .pf-gruppe--aus .pf-modul { padding-left: 28px; }
  .pf-kern { display: block; height: clamp(196px, 15.5vw, 228px); }
  /* Der Bus läuft durch den Kern und teilt das Schild: KI darüber, Plattform darunter */
  .pf-kern-ki, .pf-kern-zusatz { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; }
  .pf-kern-ki { top: 0; height: var(--pf-bus-y, 50%); padding-top: 4px; }
  .pf-kern-zusatz { top: var(--pf-bus-y, 50%); bottom: 0; padding-bottom: 6px; }
}
/* Schmale Desktops: Modulnamen in Textgröße, damit keiner zweizeilig bricht */
@media (min-width: 1100px) and (max-width: 1279px) {
  .pf-modul { font-size: var(--gr-text); }
}

@media (hover: hover) {
  .pf-modul:hover { color: var(--weiss); }
}
.pf-modul.ist-aktiv { color: var(--weiss); }

/* Ohne Skript: Leitungen als einfache Haarlinien-Bündel aus CSS (gerade, mit Bus), damit das Schaltbild lesbar bleibt */
.pf:not(.pf-skript) .pf-modul::before,
.pf:not(.pf-skript) .pf-modul::after,
.pf:not(.pf-skript) .pf-module::before,
.pf:not(.pf-skript) .pf-module::after,
.pf:not(.pf-skript) .pf-schema::before {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 0 solid var(--pf-draht);
}
@media (min-width: 1100px) {
  .pf:not(.pf-skript) .pf-module { position: relative; }
  .pf:not(.pf-skript) .pf-modul::after { top: 50%; height: 7px; margin-top: -3px; width: calc(var(--pf-luecke) / 2); border-width: 1px 0; }
  .pf:not(.pf-skript) .pf-modul::before { top: 50%; height: 1px; width: calc(var(--pf-luecke) / 2); border-width: 1px 0 0; }
  .pf:not(.pf-skript) .pf-gruppe--ein .pf-modul::after, .pf:not(.pf-skript) .pf-gruppe--ein .pf-modul::before { left: 100%; }
  .pf:not(.pf-skript) .pf-gruppe--aus .pf-modul::after, .pf:not(.pf-skript) .pf-gruppe--aus .pf-modul::before { right: 100%; }
  .pf:not(.pf-skript) .pf-module::after { top: 32px; bottom: 32px; width: 7px; border-width: 0 1px; }
  .pf:not(.pf-skript) .pf-module::before { top: 50%; height: 7px; margin-top: -3px; width: calc(var(--pf-luecke) / 2); border-width: 1px 0; }
  .pf:not(.pf-skript) .pf-gruppe--ein .pf-module::after { left: calc(100% + var(--pf-luecke) / 2 - 3px); }
  .pf:not(.pf-skript) .pf-gruppe--ein .pf-module::before { left: calc(100% + var(--pf-luecke) / 2); }
  .pf:not(.pf-skript) .pf-gruppe--aus .pf-module::after { right: calc(100% + var(--pf-luecke) / 2 - 3px); top: calc(100% / 6); bottom: calc(100% / 6); }
  .pf:not(.pf-skript) .pf-gruppe--aus .pf-module::before { right: calc(100% + var(--pf-luecke) / 2); }
}
@media (max-width: 1099px) {
  .pf:not(.pf-skript) .pf-modul::after { top: 50%; left: -33px; width: 33px; height: 7px; margin-top: -3px; border-width: 1px 0; }
  .pf:not(.pf-skript) .pf-schema::before { left: 27px; top: 0; bottom: 0; width: 7px; border-width: 0 1px; }
}