/* ==========================================================================
   Hero, Variante 2 – die Bausteine liegen am Boden, die Lösung schwebt darüber
   Das ist der Standard. Die frühere Variante 1 (hero-pro.css) bleibt unverändert
   erhalten und ist mit ?hero=1 sichtbar (Umschalter im Kopf von index.html). Die Geometrie (Boden in Perspektive,
   Position und Größe der Bausteine, Verlauf der Verbindungen) berechnet
   hero-kit2.js und setzt sie als Variablen: --hz --hp --persp --tilt --cell auf
   .k2-floor, --x --y --w --h --t --pt --l auf jedem .k2-block. Die Klasse .is-compact
   (schmale Bühne) setzt ebenfalls das Skript.
   ========================================================================== */
.hp-kit2 { display: block; margin: 0; padding: 0; min-width: 0; }
.hp-kit { display: none; }
html[data-hero="1"] .hp-kit { display: block; }
html[data-hero="1"] .hp-kit2 { display: none; }

.k2-stage { position: relative; }

/* ---------- Lösung: schwebende Karte (das Schweben steuert hero-kit2.js, damit die Verbindungen mitgehen) ---------- */
.k2-sol { position: relative; z-index: 3; will-change: transform; }
.k2-sol-bar { display: flex; align-items: center; gap: 12px; padding: 0 4px 10px; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.k2-card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 38px 48px -30px rgba(11, 11, 12, .45), 0 14px 26px -18px rgba(11, 11, 12, .22);
}
.k2-card-main {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); grid-template-rows: auto 1fr; column-gap: 24px;
  padding: 18px 18px 18px; transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.k2-card-main.is-out { opacity: 0; transform: translateY(6px); }
.k2-head { grid-column: 1; min-width: 0; }
.k2-kicker { font-size: .6875rem; font-weight: 600; letter-spacing: .02em; color: var(--accent); }
.k2-title { margin-top: 4px; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.k2-fact { grid-column: 2; grid-row: 1; align-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: 17rem; font-size: .75rem; line-height: 1.35; text-align: right; }
.k2-fact span { font-size: .6875rem; color: var(--muted); }
.k2-fact b { color: var(--ink); font-weight: 600; }

/* Die Schritte stehen als Boxen nebeneinander an der Unterkante der Karte – jede Box nimmt die Verbindung ihres Bausteins auf */
.k2-stack { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.k2-stack li {
  display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 12px 12px 16px;
  border-radius: 12px; background: #F7F7F4; border: 1px solid #EDEDE8;
  opacity: 0; transform: translateY(8px); animation: k2-in .7s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: calc(var(--i) * 120ms + 60ms);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.k2-stack.is-still li { opacity: 1; transform: none; animation: none; }
.k2-stack li.is-focus { border-color: rgba(255, 91, 31, .55); background: #fff; box-shadow: 0 0 0 3px rgba(255, 91, 31, .1); }
@keyframes k2-in { to { opacity: 1; transform: none; } }
.k2-li-tile { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; --tile-bg: #1C1C20; --acc: var(--brand-hi); color: #EDEDEA; background: #17171A; }
.k2-li-tile .node-glyph { width: 18px; height: 18px; }
.k2-step { font-size: .8125rem; font-weight: 500; line-height: 1.4; color: var(--ink); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }

/* Schmale Bühne (Handy, kleines Fenster): Schritte als Liste, das Ergebnis darunter */
.hp-kit2.is-compact .k2-card-main { display: flex; flex-direction: column; padding: 16px; }
.hp-kit2.is-compact .k2-stack { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px; margin: 14px 0; }
.hp-kit2.is-compact .k2-stack li { flex-direction: row; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; }
.hp-kit2.is-compact .k2-fact { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; max-width: none; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.hp-kit2.is-compact .k2-fact span { font-size: .75rem; }

/* ---------- Verbindungen (SVG, von hero-kit2.js gezeichnet): vom Baustein direkt in seine Box ---------- */
.k2-beams { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.k2-wire path { fill: none; stroke: var(--brand); stroke-linecap: round; stroke-linejoin: round; }
.k2-wire-line { stroke-width: 1.6; transition: stroke-width .25s var(--ease); }
.k2-wire-glow { stroke-width: 6; opacity: .12; transition: opacity .25s var(--ease); }
.k2-wire-start { fill: var(--brand); }
.k2-wire-end { fill: #fff; stroke: var(--brand); stroke-width: 2; }
.k2-wire-pulse circle:first-child { fill: rgba(255, 91, 31, .3); }
.k2-wire-pulse circle:last-child { fill: #FFE7DC; }
.k2-wire.is-focus .k2-wire-line { stroke-width: 2.4; }
.k2-wire.is-focus .k2-wire-glow { opacity: .28; }
.k2-wire.is-gone { opacity: 0; transition: opacity .3s var(--ease); }

/* ---------- Boden: offen, ohne Rahmen – nur ein feines Raster, das nach allen Seiten ausläuft ----------
   Der Boden liegt über den Verbindungen: jedes Objekt verdeckt den Anfang seiner Verbindung, sie kommt hinter ihm hervor. */
.k2-floor { position: relative; z-index: 5; height: var(--hz, 250px); margin-top: 100px; pointer-events: none; }
.hp-kit2.is-compact .k2-floor { margin-top: 46px; }
.k2-plate {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--hp, 540px);
  transform-origin: 50% 100%; transform: perspective(var(--persp, 2100px)) rotateX(var(--tilt, 58deg));
}
.k2-plate::before {
  content: ""; position: absolute; inset: -4% -10%;
  background:
    linear-gradient(rgba(11, 11, 12, .075) 1px, transparent 1px) 50% 0 / var(--cell, 56px) var(--cell, 56px),
    linear-gradient(90deg, rgba(11, 11, 12, .075) 1px, transparent 1px) 50% 0 / var(--cell, 56px) var(--cell, 56px);
  -webkit-mask-image: radial-gradient(58% 56% at 50% 54%, #000 18%, transparent 100%);
  mask-image: radial-gradient(58% 56% at 50% 54%, #000 18%, transparent 100%);
}
/* Lichtschein unter beteiligten Bausteinen und der Schatten der schwebenden Karte (beide liegen in der Bodenebene) */
.k2-glow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 91, 31, .3), rgba(255, 91, 31, .08) 55%, transparent); opacity: 0; transition: opacity .6s var(--ease); }
.k2-glow.is-on { opacity: 1; }
.k2-glow::before { content: ""; position: absolute; inset: 26%; border-radius: 50%; border: 1.5px solid rgba(255, 91, 31, .34); opacity: 0; }
.k2-glow.is-on::before { animation: k2-welle 3.6s ease-out infinite; }
@keyframes k2-welle { 0% { transform: scale(.85); opacity: 0; } 20% { opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
.k2-shadow {
  position: absolute; left: 12%; right: 12%; top: 26%; height: 44%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11, 11, 12, .3), rgba(11, 11, 12, .1) 58%, transparent); filter: blur(10px);
}

/* ---------- Bausteine ----------
   Aufbau je Baustein: Schatten am Boden (.k2-ground), eine flache, breitere Fußplatte (.k2-body::before), darauf der Sockel
   aus Vorderseite (.k2-slab) und Deckfläche (.k2-top), darauf das Objekt. --t ist die Höhe des Sockels, --pt die der
   Fußplatte, --l die Schwebehöhe beteiligter Bausteine. */
.k2-blocks { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.k2-block {
  position: absolute; inset: 0; z-index: var(--z, 1);
  --rx: calc(var(--w) * .2); --ry: calc(var(--h) * .2);
  opacity: 0; transition: opacity .2s linear;
}
.hp-kit2.is-ready .k2-block { opacity: 1; }
.k2-ground {
  position: absolute; left: calc(var(--x) - var(--w) * .7); top: calc(var(--y) - var(--h) * .56); width: calc(var(--w) * 1.4); height: calc(var(--h) * 1.34);
  border-radius: 50%; background: radial-gradient(closest-side, var(--b-schatten, rgba(11, 11, 12, .26)), transparent); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.k2-block.is-on .k2-ground { opacity: var(--b-schatten-an, .7); transform: scale(1.08); }
/* Jeder Baustein ist ein Link zu seiner Beschreibung im Abschnitt „Leistungen“ */
.k2-body { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; outline: none; transition: transform .45s var(--ease); }
.k2-body .k2-slab, .k2-body .k2-top, .k2-body .k2-lab { cursor: pointer; }
.k2-body:hover { transform: translateY(-4px); }
.k2-body:hover .k2-lab { color: var(--ink); }
.k2-body:focus-visible .k2-top { outline: 2px solid var(--brand); outline-offset: 3px; }
.k2-block.is-focus .k2-body { transform: translateY(-4px); }
.hp-kit2:not(.is-in) .k2-body { opacity: 0; }
.hp-kit2.is-in .k2-body { animation: k2-drop .9s cubic-bezier(.2, .9, .25, 1.12) backwards; animation-delay: calc(var(--n, 0) * 90ms + 300ms); }
@keyframes k2-drop { from { opacity: 0; transform: translateY(-58px); } 60% { opacity: 1; } }

/* Fußplatte: eine Fläche, ihre Dicke entsteht durch einen harten Schatten nach unten */
.k2-body::before {
  content: ""; position: absolute; left: calc(var(--x) - var(--w) * .575); width: calc(var(--w) * 1.15); height: calc(var(--h) * 1.15);
  top: calc(var(--y) - var(--h) * .575 - var(--pt, 0px) - var(--l, 0px));
  border-radius: calc(var(--w) * .23) / calc(var(--h) * .23);
  background: var(--p-deck); box-shadow: 0 var(--pt, 0px) 0 var(--p-vorn), inset 0 -1px 0 var(--p-kante);
  transition: top .55s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease);
}
/* Sockel = Vorderseite (.k2-slab) + Deckfläche (.k2-top) mit denselben Rundungen */
.k2-slab, .k2-top {
  position: absolute; left: calc(var(--x) - var(--w) / 2); width: var(--w);
  top: calc(var(--y) - var(--h) / 2 - var(--t, 14px) - var(--pt, 0px) - var(--l, 0px)); border-radius: var(--rx) / var(--ry);
  transition: top .55s var(--ease), height .55s var(--ease), box-shadow .5s var(--ease);
  pointer-events: auto;
}
.k2-slab { height: calc(var(--h) + var(--t, 14px)); background: var(--s-vorn); box-shadow: inset 0 -1.5px 0 var(--s-fuss); overflow: hidden; }
.k2-top { height: var(--h); background: var(--s-deck); box-shadow: inset 0 -1.5px 0 var(--s-kante), inset 0 0 0 1px var(--s-rand); }
/* zweite Farbschicht für den Zustand „beteiligt“, damit der Wechsel weich überblendet */
.k2-slab::before, .k2-top::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .5s var(--ease); }
.k2-slab::before { background: var(--s-vorn-an); box-shadow: inset 0 -1.5px 0 var(--s-fuss-an); }
.k2-top::before { background: var(--s-deck-an); box-shadow: inset 0 -1.5px 0 var(--s-kante-an), inset 0 0 0 1px var(--s-rand-an); }
.k2-block.is-on .k2-slab::before, .k2-block.is-on .k2-top::before { opacity: 1; }
.k2-block.is-on .k2-body::before { background: var(--p-deck-an); box-shadow: 0 var(--pt, 0px) 0 var(--p-vorn-an), inset 0 -1px 0 var(--p-kante-an), var(--p-schein-an, 0 0 0 transparent); }

/* Farben („Porzellan“): alles bleibt hell; beteiligte Bausteine schweben, ihre Fußplatte leuchtet orange */
.k2-block {
  --p-deck: #F6F6F3; --p-vorn: #DADAD3; --p-kante: rgba(255, 255, 255, .95);
  --s-deck: linear-gradient(180deg, #F7F7F4 0%, #FFFFFF 100%); --s-vorn: linear-gradient(180deg, #EFEFEA 0%, #DBDBD4 100%);
  --s-kante: #FFFFFF; --s-rand: rgba(11, 11, 12, .045); --s-fuss: rgba(11, 11, 12, .07);
  --p-deck-an: #FFB896; --p-vorn-an: #FF5B1F; --p-kante-an: rgba(255, 255, 255, .7); --p-schein-an: 0 6px 22px rgba(255, 91, 31, .5);
  --s-deck-an: linear-gradient(180deg, #F7F7F4 0%, #FFFFFF 100%); --s-vorn-an: linear-gradient(180deg, #F6F6F2 0%, #E4E4DD 100%);
  --s-kante-an: #FFFFFF; --s-rand-an: rgba(11, 11, 12, .05); --s-fuss-an: rgba(255, 91, 31, .55);
  --b-schatten-an: .55;
}

/* ---------- Objekte auf den Bausteinen: 3D-Körper auf einem Canvas (hero-kit2-3d.js) ---------- */
.k2-glyph { position: absolute; inset: 0; display: block; }
.k2-c3d { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.k2-lab {
  position: absolute; left: calc(var(--x) - 80px); width: 160px; top: calc(var(--y) + var(--h) / 2 + 8px); text-align: center;
  font-size: .8125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: var(--muted); transition: color .5s var(--ease); pointer-events: none;
}
.k2-lab > span { pointer-events: auto; }
.k2-block.is-on .k2-lab { color: var(--ink); }

/* Ziel im Abschnitt „Leistungen“ kurz hervorheben, wenn man über einen Baustein dorthin springt */
.bento-card[id^="baustein-"]:target { animation: k2-ziel 2.2s ease-out .5s both; }
@keyframes k2-ziel { 0%, 60% { box-shadow: 0 0 0 2px var(--brand), 0 0 0 8px rgba(255, 91, 31, .14); } 100% { box-shadow: 0 0 0 2px rgba(255, 91, 31, 0), 0 0 0 8px rgba(255, 91, 31, 0); } }

/* ---------- Projekte (wie in Variante 1) ---------- */
.k2-tabs { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 18px; height: 44px; margin-top: 22px; border-top: 1px solid var(--line); }
.k2-tabs button {
  position: relative; overflow: hidden; border: 0; background: none; padding: 12px 0 0; font: inherit; font-size: .8125rem; font-weight: 500;
  color: var(--muted); cursor: pointer; white-space: nowrap; transition: color .25s var(--ease);
}
.k2-tabs button:hover, .k2-tabs button[aria-selected="true"] { color: var(--ink); }
.k2-tabs button i { position: absolute; left: 0; right: 0; top: -1px; height: 2px; border-radius: 2px; background: var(--brand); transform-origin: left; transform: scaleX(0); }
.k2-tabs button[aria-selected="true"] i { animation: kit-progress var(--kit-dur, 6.5s) linear forwards; }
.hp-kit2.is-paused .k2-tabs button i { animation-play-state: paused; }
.k2-tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------- Tablet und Handy ---------- */
@media (max-width: 1080px) {
  .hp-kit2 { max-width: 720px; width: 100%; margin: 12px auto 0; }
}
@media (max-width: 640px) {
  .hp-kit2 { margin-top: 30px; }
  .k2-title { font-size: 1.3125rem; }
  .k2-lab { font-size: .625rem; letter-spacing: -0.015em; left: calc(var(--x) - 48px); width: 96px; }
  .k2-tabs { display: flex; height: auto; gap: 20px; margin-top: 18px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .k2-tabs::-webkit-scrollbar { display: none; }
  .k2-tabs button { flex: none; padding-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .k2-stack li { opacity: 1; transform: none; animation: none; }
  .hp-kit2.is-in .k2-body { animation: none; }
  .k2-tabs button i { display: none; }
  .k2-glow.is-on::before { animation: none; }
}

/* ---------- Vorschau-Umschalter (nur sichtbar, solange ?hero= im Spiel ist) ---------- */
.hp-switch {
  position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: 4px; padding: 5px;
  border-radius: 999px; background: rgba(17, 17, 19, .92); color: #fff; font-size: .75rem; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
}
.hp-switch span { padding: 0 8px 0 10px; color: rgba(255, 255, 255, .6); }
.hp-switch a { padding: 6px 12px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600; }
.hp-switch a[aria-current="true"] { background: var(--brand); color: #0B0B0C; }
.hp-switch a.is-end { color: rgba(255, 255, 255, .6); font-weight: 500; }

/* ---------- Farbe in der Grafik, dosiert ----------
   Linien, aktive Sockel und kleine Details sind orange, aber leiser als zuvor (dünner Schein, kein Pulsieren unter den Bausteinen).
   Rubrik und Markierungen in der Lösungskarte bleiben grau – die Textspalte links führt mit Aussage und Knopf. */
.k2-kicker { color: var(--muted); }
.k2-stack li.is-focus { border-color: rgba(255, 91, 31, .45); box-shadow: 0 0 0 3px rgba(255, 91, 31, .07); }
.k2-wire-glow { opacity: .07; }
.k2-wire.is-focus .k2-wire-glow { opacity: .18; }
.k2-glow { background: radial-gradient(closest-side, rgba(255, 91, 31, .18), rgba(255, 91, 31, .05) 55%, transparent); }
.k2-glow.is-on::before { animation: none; }
.k2-block { --p-schein-an: 0 6px 18px rgba(255, 91, 31, .3); --s-fuss-an: rgba(255, 91, 31, .4); }