/* Hero "Kabel": freigestelltes Kabel, fliegende Mantelstücke (nach dem KRaL-Hero) */
.hk {
  --hk-ink: #151515;
  --hk-ink-2: #55585e;
  --hk-ink-3: #8a8d93;
  --hk-red: var(--thm-primary, #b70f1e);
  --hk-ground: #fcfcfc;
  --hk-header: 192px;
  --hk-h: max(780px, 100svh);
  --hk-out: cubic-bezier(0.23, 1, 0.32, 1);
  --hk-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  position: relative;
  min-height: var(--hk-h);
  overflow: hidden;
  background: var(--hk-ground);
  color: var(--hk-ink);
}

/* Kabel rechts, etwas eingerückt; das abgeschnittene Ende blendet weich aus */
.hk__visual { position: absolute; top: var(--hk-header); right: 0; bottom: 0; width: 52%; pointer-events: none; }
.hk__figure {
  position: absolute; right: 6vw; top: 50%; margin: 0;
  width: min(100%, calc((var(--hk-h) - var(--hk-header)) * 0.9)); aspect-ratio: 876 / 935;
  transform: translateY(-50%);
}
.hk__figure picture, .hk__figure img { display: block; width: 100%; height: 100%; }
.hk__figure picture { -webkit-mask-image: linear-gradient(to right, #000 84%, transparent 99%); mask-image: linear-gradient(to right, #000 84%, transparent 99%); }
.hk__figure img { object-fit: contain; }

/* Text links */
.hk__inner {
  position: relative; z-index: 2; min-height: var(--hk-h);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--hk-header) + 40px); padding-bottom: 120px;
}
.hk__kicker {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin: 0 0 26px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hk-ink-2);
}
.hk__kicker::before { content: ""; width: 34px; height: 2px; background: var(--hk-red); transform-origin: left; }
.hk__title {
  position: relative; z-index: 1; margin: 0; max-width: 64%;
  font-family: var(--thm-font); font-weight: 800; color: var(--hk-ink);
  font-size: clamp(40px, 4.4vw, 64px); line-height: 1.06; letter-spacing: -0.02em;
}
.hk__title em { font-style: normal; color: var(--hk-red); }
.hk .line { display: block; overflow: hidden; padding-top: 0.2em; margin-top: -0.2em; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hk .line > span { display: block; }
.hk__sub { position: relative; z-index: 1; margin: 28px 0 0; max-width: 38ch; font-size: 17px; line-height: 1.65; color: var(--hk-ink-2); }
.hk__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; margin-top: 38px; }
.hk__actions .thm-btn:hover { background-color: var(--hk-ink); color: #fff; }
.hk-call { display: inline-flex; align-items: center; gap: 14px; color: var(--hk-ink); text-decoration: none; }
.hk-call:hover { color: var(--hk-ink); text-decoration: none; }
.hk-call__ring { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--hk-ink); border-radius: 50%; font-size: 18px; transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease; }
.hk-call__text { display: grid; line-height: 1.3; }
.hk-call__text span { font-size: 13px; color: var(--hk-ink-2); }
.hk-call__text strong { font-size: 16px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .hk-call:hover .hk-call__ring { background: var(--hk-red); border-color: var(--hk-red); color: #fff; }
  .hk-call:hover .hk-call__ring span { animation: hk-ring 700ms ease-in-out; }
}
.hk__services {
  position: absolute; left: 15px; bottom: 40px; display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hk-ink-2);
}
.hk__services li + li::before { content: "/"; margin: 0 14px; color: var(--hk-red); }
.hk__services a { color: inherit; }
.hk__services a:hover { color: var(--hk-red); }

/* Fliegende Mantelstücke: Tiefe über Größe und Unschärfe */
.hk__debris { position: absolute; inset: var(--hk-header) 0 0; z-index: 0; pointer-events: none; }
.hk-debris { position: absolute; display: block; height: auto; max-width: none; rotate: var(--rot, 0deg); filter: blur(var(--blur, 0px)) drop-shadow(0 14px 14px rgb(21 21 21 / 0.14)); }
.hk-debris--1 { left: 44%; top: 40%; width: clamp(60px, 5.6vw, 84px); --rot: 12deg; --blur: 0.4px; }
.hk-debris--2 { left: 52%; top: 4%; width: clamp(70px, 6.2vw, 90px); --rot: -16deg; --blur: 3px; }
.hk-debris--3 { left: 41%; top: 63%; width: clamp(44px, 3.8vw, 56px); --rot: 40deg; --blur: 0.8px; }
.hk-debris--4 { left: 62%; top: 18%; width: clamp(22px, 2vw, 30px); --rot: -30deg; --blur: 1.6px; }
.hk-debris--5 { left: 38%; top: 54%; width: clamp(44px, 4vw, 60px); --rot: 24deg; }
.hk-debris--6 { left: 22%; top: 4%; width: clamp(26px, 2.2vw, 34px); --rot: 70deg; --blur: 2.4px; }
@media (max-width: 1199.98px) { .hk__debris { display: none; } }

/* Bewegung: läuft erst, wenn der Preloader weg ist */
@media (prefers-reduced-motion: no-preference) {
  .hk-js .hk .line > span { animation: hk-line-up 1000ms var(--hk-out) backwards; }
  .hk-js .hk .line:nth-child(1) > span { animation-delay: 260ms; }
  .hk-js .hk .line:nth-child(2) > span { animation-delay: 350ms; }
  .hk-js .hk .line:nth-child(3) > span { animation-delay: 440ms; }
  .hk-js .hk__kicker { animation: hk-soft-in 700ms var(--hk-out) 150ms backwards; }
  .hk-js .hk__kicker::before { animation: hk-draw-x 900ms var(--hk-in-out) 250ms backwards; }
  .hk-js .hk__sub { animation: hk-soft-in 800ms var(--hk-out) 640ms backwards; }
  .hk-js .hk__actions { animation: hk-soft-in 800ms var(--hk-out) 720ms backwards; }
  .hk-js .hk__services { animation: hk-soft-in 800ms var(--hk-out) 860ms backwards; }
  .hk-js .hk__figure picture { animation: hk-object-in 1400ms var(--hk-out) 120ms backwards; }
  .hk-js .hk__figure { animation: hk-float 4200ms ease-in-out 1600ms infinite alternate; }
  .hk-js .hk-debris { animation: hk-debris-in 1300ms var(--hk-out) backwards, hk-drift var(--dur, 5s) ease-in-out 1500ms infinite alternate; }
  .hk-js .hk-debris--1 { animation-delay: 500ms, 1600ms; --dur: 5.6s; }
  .hk-js .hk-debris--2 { animation-delay: 650ms, 1800ms; --dur: 4.8s; }
  .hk-js .hk-debris--3 { animation-delay: 800ms, 2000ms; --dur: 6.4s; }
  .hk-js .hk-debris--4 { animation-delay: 700ms, 1700ms; --dur: 4.2s; }
  .hk-js .hk-debris--5 { animation-delay: 900ms, 2100ms; --dur: 7s; }
  .hk-js .hk-debris--6 { animation-delay: 600ms, 1900ms; --dur: 5.2s; }
  /* Bis der Preloader verschwindet und solange der Hero nicht sichtbar ist: anhalten */
  .hk-js .hk:not(.is-ready) *, .hk-js .hk:not(.is-ready) *::before,
  .hk-js .hk.is-paused .hk__figure, .hk-js .hk.is-paused .hk-debris { animation-play-state: paused; }
}

@keyframes hk-soft-in { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes hk-line-up { from { transform: translateY(140%); } to { transform: none; } }
@keyframes hk-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hk-object-in { from { opacity: 0; transform: translateX(80px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes hk-float { from { translate: 0 0; } to { translate: 0 -14px; } }
@keyframes hk-drift { from { translate: 0 0; } to { translate: 6px -18px; } }
@keyframes hk-debris-in { from { opacity: 0; transform: translate(60px, 30px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes hk-pop { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes hk-ring {
  0%, 100% { transform: rotate(0); } 12% { transform: rotate(-16deg); } 26% { transform: rotate(13deg); }
  40% { transform: rotate(-10deg); } 54% { transform: rotate(7deg); } 68% { transform: rotate(-4deg); } 82% { transform: rotate(2deg); }
}

/* Responsive: unter 992px Text oben, Kabel darunter */
@media (max-width: 991.98px) {
  .hk { display: flex; flex-direction: column; min-height: 0; }
  .hk__inner { min-height: 0; padding-bottom: 0; order: 1; }
  .hk__title { max-width: none; font-size: clamp(34px, 8.6vw, 60px); }
  .hk__services { position: static; margin-top: 36px; }
  .hk__visual { position: relative; order: 2; inset: auto; width: 100%; padding: 24px 0 40px; }
  .hk__figure { position: relative; right: auto; top: auto; transform: none; width: min(86%, 560px); margin: 0 6vw 0 auto; }
}
@media (max-width: 575.98px) {
  .hk__figure { width: 90%; }
}
@media (max-width: 767.98px) {
  .hk__services { flex-direction: column; gap: 10px; }
  .hk__services li::before, .hk__services li + li::before { content: ""; display: inline-block; width: 14px; height: 2px; margin: 0 10px 3px 0; vertical-align: middle; background: var(--hk-red); }
}
@media (prefers-reduced-motion: reduce) {
  .hk-call:hover .hk-call__ring span { animation: none; }
}