/* ==========================================================================
   kyb-staerken — Baustein „Stärken & Benefits" (Karriere: „Viel Raum für
   deine Stärken.")
   Die Vorteile als Räume eines Grundrisses: feine Wände mit Türöffnung und
   Türblatt, gezeichnete Icons (helle Kontur + versetzte Neon-Fläche).
   Die Fuge zwischen den Räumen liest sich als Wandstärke.

   Bewegung nur, wenn kyb-staerken.js die Klasse .kyb-staerken--anim setzt
   (IntersectionObserver vorhanden, keine reduzierte Bewegung): Wände zeichnen
   sich ruhig nach, die Tür schwingt auf, danach das Icon. Ohne JS ist alles
   sofort sichtbar, Türen stehen offen.
   ========================================================================== */

.kyb-staerken {
  --kyb-staerken-wand: rgba(255, 255, 255, .24);
  --kyb-staerken-licht: rgba(15, 255, 155, .085);
  --kyb-staerken-grund: var(--kyb-stage);
  --tx: var(--s5);                 /* Abstand der Tür von der Raumecke */
  --tb: 44px;                      /* Türbreite = Größe des Tür-SVG */
  position: relative;
}
.kyb-staerken.k-set--stage_2 { --kyb-staerken-grund: var(--kyb-stage-2); }
.kyb-staerken.k-set--surface { --kyb-staerken-grund: var(--kyb-surface); }

/* --- Kopf --------------------------------------------------------------- */
.kyb-staerken__kopf { margin-bottom: clamp(var(--s6), 5vw, var(--s8)); }
.kyb-staerken__kopf .kyb-kicker { margin-bottom: var(--s2); }

.kyb-staerken__h {
  color: var(--kyb-white);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.kyb-staerken__anfang { display: block; }
.kyb-staerken__gross {
  display: block;
  margin-top: .06em;
  font-weight: 600;
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.032em;
}

/* --- Grundriss ---------------------------------------------------------- */
.kyb-staerken__plan {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s2);
}
.kyb-staerken__raum {
  position: relative;
  isolation: isolate;
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--s5) var(--s5) calc(var(--tb) + var(--s4));
}

@media (min-width: 700px) {
  .kyb-staerken__raum { grid-column: span 6; }
  .kyb-staerken--n1 .kyb-staerken__raum { grid-column: span 12; }
}
@media (min-width: 1000px) {
  .kyb-staerken--n3 .kyb-staerken__raum,
  .kyb-staerken--n6 .kyb-staerken__raum,
  .kyb-staerken--n5 .kyb-staerken__raum:nth-child(n+3) { grid-column: span 4; }
  /* Vier Räume: versetzt schmal/breit, breit/schmal — wie ein echter Grundriss. */
  .kyb-staerken--n4 .kyb-staerken__raum:nth-child(1),
  .kyb-staerken--n4 .kyb-staerken__raum:nth-child(4) { grid-column: span 5; }
  .kyb-staerken--n4 .kyb-staerken__raum:nth-child(2),
  .kyb-staerken--n4 .kyb-staerken__raum:nth-child(3) { grid-column: span 7; }
  .kyb-staerken__raum { min-height: 330px; padding: var(--s6) var(--s6) calc(var(--tb) + var(--s5)); }
  .kyb-staerken { --tx: var(--s6); }
}

/* Planraster: feine Punkte, zur Tür hin ausgeblendet. */
.kyb-staerken__raum::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.3px);
  background-size: 14px 14px;
  background-position: 7px 7px;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%);
          mask-image: linear-gradient(200deg, #000, transparent 70%);
  pointer-events: none;
}
/* Licht im Raum: folgt dem Zeiger (Position aus kyb-staerken.js). */
.kyb-staerken__raum::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 85%), var(--kyb-staerken-licht), transparent 70%);
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.kyb-staerken__raum:hover::before { opacity: 1; }

/* --- Wände -------------------------------------------------------------- */
.kyb-staerken__wand {
  position: absolute;
  background: var(--kyb-staerken-wand);
  pointer-events: none;
  transition: background-color 1.1s ease;
}
.kyb-staerken__wand--o  { top: 0; left: 0; right: 0; height: 1px; transform-origin: 0 50%; }
.kyb-staerken__wand--r  { top: 0; right: 0; bottom: 0; width: 1px; transform-origin: 50% 0; }
.kyb-staerken__wand--l  { top: 0; left: 0; bottom: 0; width: 1px; transform-origin: 50% 100%; }
.kyb-staerken__wand--ua,
.kyb-staerken__wand--ub { bottom: 0; height: 1px; transform-origin: 100% 50%; }
/* Tür unten links (ungerade Räume) … */
.kyb-staerken__wand--ua { left: 0; width: var(--tx); }
.kyb-staerken__wand--ub { left: calc(var(--tx) + var(--tb)); right: 0; }
/* … und unten rechts (gerade Räume). */
.kyb-staerken__raum:nth-child(even) .kyb-staerken__wand--ua { width: calc(100% - var(--tx) - var(--tb)); }
.kyb-staerken__raum:nth-child(even) .kyb-staerken__wand--ub { left: calc(100% - var(--tx)); }
/* Anschläge an beiden Seiten der Türöffnung */
.kyb-staerken__wand--ua::after,
.kyb-staerken__wand--ub::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 7px;
  background: inherit;
}
.kyb-staerken__wand--ua::after  { right: 0; }
.kyb-staerken__wand--ub::before { left: 0; }

.kyb-staerken__raum:hover .kyb-staerken__wand { background-color: rgba(15, 255, 155, .5); }

/* --- Tür ---------------------------------------------------------------- */
.kyb-staerken__tuer {
  position: absolute;
  bottom: 0;
  left: var(--tx);
  width: var(--tb);
  height: var(--tb);
  overflow: visible;
  pointer-events: none;
}
.kyb-staerken__raum:nth-child(even) .kyb-staerken__tuer { left: auto; right: var(--tx); transform: scaleX(-1); }
.kyb-staerken__bogen {
  fill: none;
  stroke: rgba(255, 255, 255, .2);
  stroke-width: 1;
}
.kyb-staerken__blatt {
  fill: none;
  stroke: rgba(238, 240, 244, .75);
  stroke-width: 1.6;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: 0 100%;
  transition: transform 1.4s cubic-bezier(.3, 0, .2, 1), stroke 1.1s ease;
}
.kyb-staerken__raum:hover .kyb-staerken__blatt { transform: rotate(18deg); stroke: var(--kyb-neon); }

/* --- Inhalt ------------------------------------------------------------- */
.kyb-staerken__oben {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
}
.kyb-staerken__nr {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--kyb-text-3);
  transition: color 1.1s ease;
}
.kyb-staerken__raum:hover .kyb-staerken__nr { color: var(--kyb-neon); }

.kyb-staerken__t {
  margin-top: var(--s4);
  color: var(--kyb-white);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -.014em;
}
.kyb-staerken__x {
  margin-top: var(--s2);
  max-width: 48ch;
  color: var(--kyb-text-2);
  font-size: 1rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.kyb-staerken__tags {
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  max-width: 56ch;
}
.kyb-staerken__tags li {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .02em;
  line-height: 1.3;
  color: var(--kyb-text);
  padding: 6px 10px;
  border: 1px solid var(--kyb-line-strong);
  border-radius: var(--r-1);
  background: rgba(255, 255, 255, .03);
  transition: border-color 1.1s ease;
}
.kyb-staerken__raum:hover .kyb-staerken__tags li { border-color: rgba(15, 255, 155, .35); }

@media (max-width: 699px) {
  .kyb-staerken__raum { padding: var(--s4) var(--s4) calc(var(--tb) + var(--s3)); }
  .kyb-staerken { --tx: var(--s4); }
}

/* --- Icons -------------------------------------------------------------- */
.kyb-staerken__icon {
  width: 68px;
  height: 68px;
  flex: none;
  overflow: visible;
  color: rgba(238, 240, 244, .92);
}
.kyb-staerken__fill {
  fill: var(--kyb-neon);
  transform-box: view-box;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.kyb-staerken__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kyb-staerken__ink { color: var(--kyb-staerken-grund); }
.kyb-staerken__raum:hover .kyb-staerken__fill { transform: translate(-3px, -3px); }

/* --- Einblenden (nur mit JS) ------------------------------------------- */
/* Zeitplan je Raum (ab --t0): Wände 0–2,1 s, Tür ab 2,0 s, Icon ab 0,6 s,
   Text ab 0,4 s. Langsam und ruhig. */
.kyb-staerken--anim [data-staerken-reveal] { opacity: 0; }
.kyb-staerken--anim [data-staerken-reveal].is-in { opacity: 1; }
.kyb-staerken--anim .is-in { --t0: calc(var(--d, 0) * 160ms); }

.kyb-staerken--anim .kyb-staerken__kopf.is-in {
  animation: kybStaerkenRein 1.1s cubic-bezier(.2, .7, .2, 1) backwards;
}

.kyb-staerken--anim .is-in .kyb-staerken__wand { animation: .6s cubic-bezier(.45, 0, .55, 1) backwards; }
.kyb-staerken--anim .is-in .kyb-staerken__wand--o  { animation-name: kybStaerkenWandX; animation-duration: .7s; animation-delay: var(--t0); }
.kyb-staerken--anim .is-in .kyb-staerken__wand--r  { animation-name: kybStaerkenWandY; animation-delay: calc(var(--t0) + .7s); }
.kyb-staerken--anim .is-in .kyb-staerken__wand--ub { animation-name: kybStaerkenWandX; animation-delay: calc(var(--t0) + 1.3s); }
.kyb-staerken--anim .is-in .kyb-staerken__wand--ua { animation-name: kybStaerkenWandX; animation-duration: .35s; animation-delay: calc(var(--t0) + 1.75s); }
.kyb-staerken--anim .is-in .kyb-staerken__wand--l  { animation-name: kybStaerkenWandY; animation-delay: calc(var(--t0) + 2.1s); }
/* Bei geraden Räumen liegt das lange Stück links — Dauern tauschen. */
.kyb-staerken--anim .is-in:nth-child(even) .kyb-staerken__wand--ub { animation-duration: .35s; }
.kyb-staerken--anim .is-in:nth-child(even) .kyb-staerken__wand--ua { animation-duration: .6s; animation-delay: calc(var(--t0) + 1.75s); }

.kyb-staerken--anim .is-in .kyb-staerken__bogen {
  stroke-dasharray: 1;
  animation: kybStaerkenBogen 1.6s cubic-bezier(.45, 0, .2, 1) backwards;
  animation-delay: calc(var(--t0) + 2s);
}
.kyb-staerken--anim .is-in .kyb-staerken__blatt {
  animation: kybStaerkenTuer 1.6s cubic-bezier(.45, 0, .2, 1) backwards;
  animation-delay: calc(var(--t0) + 2s);
}

.kyb-staerken--anim .is-in .kyb-staerken__nr,
.kyb-staerken--anim .is-in .kyb-staerken__t,
.kyb-staerken--anim .is-in .kyb-staerken__x,
.kyb-staerken--anim .is-in .kyb-staerken__tags {
  animation: kybStaerkenRein 1.1s cubic-bezier(.2, .7, .2, 1) backwards;
  animation-delay: calc(var(--t0) + .45s);
}
.kyb-staerken--anim .is-in .kyb-staerken__x    { animation-delay: calc(var(--t0) + .6s); }
.kyb-staerken--anim .is-in .kyb-staerken__tags { animation-delay: calc(var(--t0) + .75s); }

.kyb-staerken--anim .is-in .kyb-staerken__line > * {
  stroke-dasharray: 1;
  animation: kybStaerkenZug 1.6s cubic-bezier(.45, 0, .2, 1) backwards;
  animation-delay: calc(var(--t0) + .5s);
}
.kyb-staerken--anim .is-in .kyb-staerken__fill {
  animation: kybStaerkenFlaeche 1s cubic-bezier(.2, .7, .2, 1) backwards;
  animation-delay: calc(var(--t0) + 1.6s);
}
.kyb-staerken--anim .is-in .kyb-staerken__ink {
  animation: kybStaerkenTinte 1s ease backwards;
  animation-delay: calc(var(--t0) + 1.85s);
}

@keyframes kybStaerkenRein    { from { opacity: 0; transform: translateY(14px); } }
@keyframes kybStaerkenWandX   { from { transform: scaleX(0); } }
@keyframes kybStaerkenWandY   { from { transform: scaleY(0); } }
@keyframes kybStaerkenBogen   { from { stroke-dashoffset: 1; opacity: 0; } 30% { opacity: 1; } }
@keyframes kybStaerkenTuer    { from { transform: rotate(90deg); opacity: 0; } 20% { opacity: 1; } }
@keyframes kybStaerkenZug     { from { stroke-dashoffset: 1; opacity: 0; } 6% { opacity: 1; } to { stroke-dashoffset: 0; } }
@keyframes kybStaerkenFlaeche { from { opacity: 0; transform: translate(-6px, -6px); } }
@keyframes kybStaerkenTinte   { from { opacity: 0; } }

/* Unterhalb des Rasters kommen die Räume einzeln ins Bild — kein Staffelversatz. */
@media (max-width: 699px) {
  .kyb-staerken--anim [data-staerken-reveal] { --d: 0 !important; }
}

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