/* ==========================================================================
   kyb-prinzipien — Baustein „Unsere Prinzipien"
   Ab 1000 px zwei Spalten: links mitlaufend Kopf und Regelkreis (sechs Knoten,
   der aktive leuchtet, in der Mitte sein Icon), rechts die Prinzipien als
   Kette mit feinen Leitungen zwischen den Icons. Darunter einspaltig.

   Icons wie im Profil: helle Kontur + versetzte Neon-Fläche.
   Bewegung nur mit .kyb-prinz--anim (setzt kyb-prinzipien.js, wenn Bewegung
   erlaubt ist); den aktiven Knoten markiert .kyb-prinz--live. Ohne JS ist
   alles sofort sichtbar, der Regelkreis steht dann ruhig.
   ========================================================================== */

.kyb-prinz {
  --kyb-prinz-line: rgba(238, 240, 244, .92);
  --kyb-prinz-grund: var(--kyb-stage);
  --kyb-prinz-icon: 64px;
  --kyb-prinz-abstand: var(--s7);
  position: relative;
  padding-block: clamp(var(--s6), 5vw, var(--s8));
}
.kyb-prinz.k-set--stage_2 { --kyb-prinz-grund: var(--kyb-stage-2); }
.kyb-prinz.k-set--surface { --kyb-prinz-grund: var(--kyb-surface); }

/* --- Raster ------------------------------------------------------------- */
.kyb-prinz__raster {
  display: grid;
  gap: var(--s7);
}
@media (min-width: 1000px) {
  .kyb-prinz__raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(var(--s6), 4.5vw, var(--s8));
    align-items: start;
  }
  .kyb-prinz__seite {
    position: sticky;
    top: calc(72px + var(--s6));
  }
}

/* --- Kopf --------------------------------------------------------------- */
.kyb-prinz__kopf .kyb-kicker { margin-bottom: var(--s2); }
.kyb-prinz__h {
  color: var(--kyb-white);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.kyb-prinz__anfang { display: block; }
.kyb-prinz__wort {
  display: block;
  margin-top: .06em;
  font-weight: 600;
  font-size: clamp(2.7rem, 4.6vw, 4rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.kyb-prinz__zeichen { color: var(--kyb-neon); letter-spacing: 0; }

/* --- Regelkreis --------------------------------------------------------- */
.kyb-prinz__kreis {
  position: relative;
  width: min(100%, 420px);
  margin-top: var(--s6);
  margin-left: calc(min(100%, 420px) * -.1);   /* Außenkreis optisch an der Textkante */
}
@media (max-width: 999px) {
  .kyb-prinz__kreis { display: none; }   /* ohne mitlaufende Spalte ohne Aussage */
}
.kyb-prinz__regel { display: block; width: 100%; height: auto; overflow: visible; }

.kyb-prinz__netz path {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  opacity: .09;
}
.kyb-prinz__nabe {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  stroke-dasharray: 2 6;
  opacity: .16;
}
.kyb-prinz__boegen path {
  fill: none;
  stroke: rgba(255, 255, 255, .26);
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: stroke .5s ease;
}
.kyb-prinz__boegen path.is-weg { stroke: rgba(15, 255, 155, .6); }
.kyb-prinz__pfeil path {
  fill: none;
  stroke: rgba(255, 255, 255, .45);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kyb-prinz__puls circle {
  fill: var(--kyb-neon);
  filter: drop-shadow(0 0 5px rgba(15, 255, 155, .8));
}
.kyb-prinz__puls {
  transform-box: view-box;
  transform-origin: 200px 200px;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .kyb-prinz__puls { opacity: 1; animation: kybPrinzUmlauf 16s linear infinite; }
}
@keyframes kybPrinzUmlauf { to { transform: rotate(360deg); } }

/* Knoten */
.kyb-prinz__k { cursor: pointer; }
.kyb-prinz__kg { transform-box: view-box; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.kyb-prinz__punkt {
  fill: var(--kyb-prinz-grund);
  stroke: rgba(238, 240, 244, .55);
  stroke-width: 1.4;
  transition: fill .4s ease, stroke .4s ease;
}
.kyb-prinz__halo {
  fill: none;
  stroke: var(--kyb-neon);
  stroke-width: 1;
  opacity: 0;
  transition: opacity .4s ease;
}
.kyb-prinz__k text {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-anchor: middle;
  fill: var(--kyb-text-2);
  transition: fill .4s ease;
}
.kyb-prinz__k:hover .kyb-prinz__punkt { stroke: var(--kyb-neon); }
.kyb-prinz__k.is-aktiv .kyb-prinz__punkt { fill: var(--kyb-neon); stroke: var(--kyb-neon); }
.kyb-prinz__k.is-aktiv .kyb-prinz__halo { opacity: .4; }
.kyb-prinz__k.is-aktiv text { fill: var(--kyb-stage); font-weight: 600; }
.kyb-prinz__k.is-aktiv .kyb-prinz__kg { transform: scale(1.08); }

/* Mitte: Icon des aktiven Prinzips (nur mit JS) */
.kyb-prinz__mitte {
  position: absolute;
  left: 50%; top: 50%;
  width: 25%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.kyb-prinz__mi {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .35s ease;
  --kyb-prinz-icon: 100%;
}
.kyb-prinz--live .kyb-prinz__mi.is-aktiv { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .kyb-prinz--live .kyb-prinz__mi.is-aktiv .kyb-prinz__line > * {
    stroke-dasharray: 1;
    animation: kybPrinzZug 1.1s cubic-bezier(.45, 0, .2, 1) backwards;
  }
  .kyb-prinz--live .kyb-prinz__mi.is-aktiv .kyb-prinz__fill { animation: kybPrinzFlaeche .7s cubic-bezier(.2, .7, .2, 1) .6s backwards; }
  .kyb-prinz--live .kyb-prinz__mi.is-aktiv .kyb-prinz__ink  { animation: kybPrinzTinte .6s ease .8s backwards; }
}

/* --- Liste -------------------------------------------------------------- */
.kyb-prinz__liste {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: var(--kyb-prinz-abstand);
}
@media (min-width: 1000px) {
  .kyb-prinz__liste { padding-top: var(--s2); }
}
.kyb-prinz__p {
  position: relative;
  display: grid;
  grid-template-columns: var(--kyb-prinz-icon) minmax(0, 1fr);
  column-gap: var(--s5);
  align-items: start;
}
.kyb-prinz__ikon { position: relative; z-index: 1; }

/* Leitung zum nächsten Icon, darauf wandert ein Signal nach unten */
.kyb-prinz__p:not(:last-child)::before,
.kyb-prinz__p:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--kyb-prinz-icon) / 2 - .5px);
  top: calc(var(--kyb-prinz-icon) + 14px);
  bottom: calc(-1 * var(--kyb-prinz-abstand) + 14px);
  width: 1px;
  pointer-events: none;
}
.kyb-prinz__p:not(:last-child)::before {
  background: var(--kyb-line-strong);
  transform-origin: top;
  transition: transform 1s cubic-bezier(.45, 0, .2, 1) .5s;
}
.kyb-prinz__p:not(:last-child)::after {
  width: 3px;
  left: calc(var(--kyb-prinz-icon) / 2 - 1.5px);
  background: linear-gradient(to bottom, transparent, var(--kyb-neon), transparent) no-repeat;
  background-size: 100% 56px;
  background-position: 0 -56px;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .kyb-prinz__p:not(:last-child)::after {
    opacity: .75;
    animation: kybPrinzSignal 9s cubic-bezier(.45, 0, .55, 1) infinite;
    animation-delay: calc(var(--i, 0) * 1.4s);
  }
}
@keyframes kybPrinzSignal {
  0%   { background-position: 0 -56px; }
  16%, 100% { background-position: 0 calc(100% + 56px); }
}

.kyb-prinz__koerper { min-width: 0; padding-top: 2px; }
.kyb-prinz__nr {
  display: block;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--kyb-neon);
  line-height: 1;
}
.kyb-prinz__t {
  margin-top: var(--s1);
  color: var(--kyb-white);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.8vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -.014em;
}
.kyb-prinz__x {
  margin-top: var(--s2);
  max-width: 28em;                /* rund 60–65 Zeichen je Zeile */
  color: var(--kyb-text-2);
  font-size: 1.04rem;
  line-height: 1.62;
  text-wrap: pretty;
}

/* --- Icons -------------------------------------------------------------- */
.kyb-prinz__icon {
  display: block;
  width: var(--kyb-prinz-icon);
  height: var(--kyb-prinz-icon);
  overflow: visible;
  color: var(--kyb-prinz-line);
}
.kyb-prinz__mi .kyb-prinz__icon { width: 100%; height: 100%; }
.kyb-prinz__fill {
  fill: var(--kyb-neon);
  transform-box: view-box;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.kyb-prinz__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kyb-prinz__ink { color: var(--kyb-prinz-grund); }
.kyb-prinz__p:hover .kyb-prinz__fill,
.kyb-prinz__p.is-aktiv .kyb-prinz__ikon .kyb-prinz__fill { transform: translate(-3px, -3px); }

/* --- Schmal ------------------------------------------------------------- */
@media (max-width: 759px) {
  .kyb-prinz { --kyb-prinz-icon: 42px; --kyb-prinz-abstand: var(--s6); }
  .kyb-prinz__raster { gap: var(--s6); }
  .kyb-prinz__p { column-gap: var(--s2); }
  .kyb-prinz__koerper { padding-top: 0; }
  .kyb-prinz__t { font-size: 1.2rem; }
  .kyb-prinz__x { font-size: 1rem; line-height: 1.58; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; }
  .kyb-prinz__wort { font-size: clamp(2.5rem, 12vw, 3.2rem); }
}
/* Tablet: einspaltig, Text nicht über die ganze Breite laufen lassen */
@media (min-width: 760px) and (max-width: 999px) {
  .kyb-prinz__liste { max-width: 760px; }
}

/* --- Einblenden (nur mit JS) ------------------------------------------- */
.kyb-prinz--anim [data-prinz-reveal] { opacity: 0; }
.kyb-prinz--anim [data-prinz-reveal].is-in {
  opacity: 1;
  animation: kybPrinzRein .9s cubic-bezier(.2, .7, .2, 1) backwards;
  animation-delay: calc(var(--d, 0) * 140ms);
}
/* Icons der Liste zeichnen sich nach */
.kyb-prinz--anim .kyb-prinz__p.is-in .kyb-prinz__ikon .kyb-prinz__line > * {
  stroke-dasharray: 1;
  animation: kybPrinzZug 1.3s cubic-bezier(.45, 0, .2, 1) .15s backwards;
}
.kyb-prinz--anim .kyb-prinz__p.is-in .kyb-prinz__ikon .kyb-prinz__fill { animation: kybPrinzFlaeche .8s cubic-bezier(.2, .7, .2, 1) .85s backwards; }
.kyb-prinz--anim .kyb-prinz__p.is-in .kyb-prinz__ikon .kyb-prinz__ink  { animation: kybPrinzTinte .8s ease 1.05s backwards; }
/* Leitungen wachsen nach unten */
.kyb-prinz--anim .kyb-prinz__p:not(.is-in)::before { transform: scaleY(0); }

/* Regelkreis: Bögen ziehen sich nacheinander, Knoten setzen auf */
.kyb-prinz--anim .kyb-prinz__kreis.is-in .kyb-prinz__boegen path {
  stroke-dasharray: 1;
  animation: kybPrinzZug .7s cubic-bezier(.45, 0, .2, 1) backwards;
  animation-delay: calc(300ms + var(--k) * 160ms);
}
.kyb-prinz--anim .kyb-prinz__kreis.is-in .kyb-prinz__k {
  animation: kybPrinzKnoten .6s cubic-bezier(.2, .7, .2, 1) backwards;
  animation-delay: calc(220ms + var(--k) * 160ms);
}
.kyb-prinz--anim .kyb-prinz__kreis.is-in .kyb-prinz__netz path {
  stroke-dasharray: 1;
  animation: kybPrinzZug 1.6s ease 1.2s backwards;
}
.kyb-prinz--anim .kyb-prinz__kreis.is-in .kyb-prinz__nabe { animation: kybPrinzTinte 1s ease 1.4s backwards; }
.kyb-prinz--anim .kyb-prinz__kreis:not(.is-in) .kyb-prinz__puls { opacity: 0; }

@keyframes kybPrinzRein    { from { opacity: 0; transform: translateY(18px); } }
@keyframes kybPrinzZug     { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes kybPrinzFlaeche { from { opacity: 0; transform: translate(-6px, -6px); } }
@keyframes kybPrinzTinte   { from { opacity: 0; } }
@keyframes kybPrinzKnoten  { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .kyb-prinz--anim [data-prinz-reveal] { opacity: 1; }
  .kyb-prinz *, .kyb-prinz *::before, .kyb-prinz *::after { animation: none !important; transition: none !important; }
}
@media print {
  .kyb-prinz__seite { position: static; }
  .kyb-prinz [data-prinz-reveal] { opacity: 1 !important; }
}