/* =========================================================================
   Hatzi & Kekzi – Chaos Edition
   Sticker-/Zettelwand-Optik mit Chaos-Regler.

   Aufbau:
   01 Grundlagen & Variablen
   02 Chaos-Stufen
   03 Buttons & Bausteine
   04 Kopfbereich
   05 Sticker-Album
   06 Hero
   07 Laufband
   08 Sektionen
   09 Figuren & Sprechblasen
   10 Spiele
   11 Instagram
   12 Fotos, Karten, Zahlen
   13 Formular
   14 Fussbereich
   15 Hund, Toast, Konfetti
   16 Mobil
   ====================================================================== */

/* ---------------------------------------------------------- 01 GRUNDLAGEN */

:root {
  --hk-hatzi: #00c2c7;
  --hk-kekzi: #ff2e88;
  --hk-kaffee: #6b3f1d;
  --hk-signal: #ffd400;
  --hk-paper: #f6f1e6;
  --hk-ink: #141210;
  --hk-dog: #caa06a;

  --hk-line: 4px;
  --hk-shadow: 7px 7px 0 var(--hk-ink);
  --hk-shadow-sm: 4px 4px 0 var(--hk-ink);
  --hk-radius: 18px;

  --hk-tilt: 1;      /* Chaos steuert Schraeglagen */
  --hk-move: 1;      /* Chaos steuert Bewegung     */
  --hk-wrap: 1180px;

  --hk-f-display: "Bricolage Grotesque", "Archivo Black", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hk-f-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body.hk {
  margin: 0;
  background: var(--hk-paper);
  color: var(--hk-ink);
  font-family: var(--hk-f-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Papierkorn */
body.hk-grain::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

body.hk > * { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--hk-f-display);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }

.hk-wrap { width: min(100% - 2.5rem, var(--hk-wrap)); margin-inline: auto; }
.hk-wrap--narrow { width: min(100% - 2.5rem, 760px); }

.hk-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--hk-signal); color: var(--hk-ink);
  padding: .8rem 1.2rem; font-weight: 800;
  border: var(--hk-line) solid var(--hk-ink);
}
.hk-skip:focus { left: .5rem; top: .5rem; }

:focus-visible { outline: 4px solid var(--hk-kekzi); outline-offset: 3px; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------ 02 CHAOS-STUFEN */

/* Stufe 1: bürotauglich – alles ruhig und gerade */
body.hk-chaos-1 { --hk-tilt: 0; --hk-move: 0; }
body.hk-chaos-1 .hk-blob,
body.hk-chaos-1 .hk-foot__egg { display: none; }
body.hk-chaos-1 .hk-ticker { opacity: .45; }

/* Stufe 2: normal */
body.hk-chaos-2 { --hk-tilt: 1; --hk-move: 1; }

/* Stufe 3: vollbekloppt */
body.hk-chaos-3 { --hk-tilt: 2.1; --hk-move: 1.6; }
body.hk-chaos-3 .hk-sec { --hk-shadow: 10px 10px 0 var(--hk-ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.hk { --hk-move: 0; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------- 03 BUTTONS & BASICS */

.hk-btn {
  --btn-bg: #fff;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .78rem 1.35rem;
  background: var(--btn-bg);
  color: var(--hk-ink);
  border: var(--hk-line) solid var(--hk-ink);
  border-radius: 999px;
  font-weight: 800;
  font-size: .98rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--hk-shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.hk-btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--hk-ink); }
.hk-btn:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--hk-ink); }

.hk-btn--big { padding: 1rem 1.8rem; font-size: 1.06rem; }
.hk-btn--yt { --btn-bg: #ff3b30; color: #fff; }
.hk-btn--ig { --btn-bg: var(--hk-kekzi); color: #fff; }
.hk-btn--signal { --btn-bg: var(--hk-signal); }
.hk-btn--ghost { --btn-bg: transparent; }

.hk-kicker {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .38rem .9rem;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 3px solid var(--hk-ink);
  box-shadow: var(--hk-shadow-sm);
  transform: rotate(calc(-2deg * var(--hk-tilt)));
}
.hk-kicker--kekzi { background: var(--hk-kekzi); color: #fff; }
.hk-kicker--hatzi { background: var(--hk-hatzi); }
.hk-kicker--signal { background: var(--hk-signal); }

.hk-lead { font-size: 1.14rem; max-width: 62ch; margin: 0 0 1.6rem; }
.hk-lead--s { font-size: 1rem; }
.hk-lead--c { margin-inline: auto; text-align: center; }
.hk-fineprint { font-size: .86rem; opacity: .75; max-width: 52ch; }

/* Wackel-Überschriften */
.hk-wobble__w { display: inline-block; }
body.hk-chaos-3 .hk-wobble__w {
  animation: hk-wob 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * .09s);
}
@keyframes hk-wob {
  0%,100% { transform: translateY(0) rotate(0); }
  35%     { transform: translateY(-6px) rotate(-2.5deg); }
  70%     { transform: translateY(3px) rotate(1.8deg); }
}

/* ------------------------------------------------------- 04 KOPFBEREICH */

.hk-head {
  position: sticky; top: 0; z-index: 60;
  background: var(--hk-paper);
  border-bottom: var(--hk-line) solid var(--hk-ink);
}
.hk-head__in {
  width: min(100% - 1.6rem, 1440px);
  margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 0;
}

.hk-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.hk-brand img, .hk-brand .custom-logo { width: 48px; height: 48px; object-fit: contain; }
.hk-brand__mark {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: var(--hk-signal);
  border: 3px solid var(--hk-ink);
  border-radius: 14px;
  font-family: var(--hk-f-display); font-weight: 900; font-size: 1.05rem;
  transform: rotate(calc(-4deg * var(--hk-tilt)));
}
.hk-brand__mark span { color: var(--hk-kekzi); }
.hk-brand__txt { display: flex; flex-direction: column; line-height: 1.1; }
.hk-brand__txt strong { font-family: var(--hk-f-display); font-size: 1.02rem; }
.hk-brand__txt em { font-size: .74rem; font-style: normal; opacity: .7; }

.hk-nav { margin-left: auto; }
.hk-nav__list { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.hk-nav__list a {
  display: block; padding: .5rem .8rem;
  font-weight: 700; font-size: .95rem; text-decoration: none;
  border: 3px solid transparent; border-radius: 999px;
}
.hk-nav__list a:hover { border-color: var(--hk-ink); background: #fff; }

.hk-head__tools { display: flex; align-items: center; gap: .55rem; }

/* Chaos-Regler */
.hk-chaos {
  display: flex; align-items: center; gap: .45rem;
  padding: .3rem .55rem;
  background: #fff;
  border: 3px solid var(--hk-ink);
  border-radius: 999px;
}
.hk-chaos__lbl { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.hk-chaos__btns { display: flex; gap: 2px; }
.hk-chaos__b {
  width: 26px; height: 26px;
  border: 2px solid var(--hk-ink); border-radius: 50%;
  background: var(--hk-paper); cursor: pointer;
  font-weight: 800; font-size: .8rem; line-height: 1;
}
.hk-chaos__b[aria-pressed="true"] { background: var(--hk-signal); }
.hk-chaos__b:nth-child(3)[aria-pressed="true"] { background: var(--hk-kekzi); color: #fff; }
.hk-chaos__out { font-size: .7rem; font-weight: 700; min-width: 6ch; opacity: .8; }

.hk-album__open {
  display: flex; align-items: center; gap: .3rem;
  padding: .42rem .8rem;
  background: var(--hk-hatzi);
  border: 3px solid var(--hk-ink); border-radius: 999px;
  font-weight: 800; font-size: .84rem; cursor: pointer;
}
.hk-album__icon { font-size: .95rem; }

.hk-burger { display: none; flex-direction: column; gap: 4px; padding: .6rem; background: #fff;
  border: 3px solid var(--hk-ink); border-radius: 12px; cursor: pointer; }
.hk-burger span:not(.screen-reader-text) { display: block; width: 20px; height: 3px; background: var(--hk-ink); }

.hk-mobilenav { display: none; padding: 1rem; border-top: 3px solid var(--hk-ink); background: #fff; }
.hk-mobilenav__list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .3rem; }
.hk-mobilenav__list a { display: block; padding: .7rem; font-weight: 800; text-decoration: none;
  border-bottom: 2px dashed rgba(0,0,0,.2); }

/* ----------------------------------------------------- 05 STICKER-ALBUM */

.hk-album {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20,18,16,.72);
  display: grid; place-items: center;
  padding: 1.5rem;
}
.hk-album[hidden] { display: none; }
.hk-album__inner {
  position: relative;
  width: min(100%, 620px);
  max-height: 86vh; overflow: auto;
  background: var(--hk-paper);
  border: var(--hk-line) solid var(--hk-ink);
  border-radius: var(--hk-radius);
  box-shadow: var(--hk-shadow);
  padding: 2rem;
}
.hk-album__close {
  position: absolute; top: .8rem; right: .9rem;
  width: 38px; height: 38px; font-size: 1.4rem; line-height: 1;
  background: #fff; border: 3px solid var(--hk-ink); border-radius: 50%; cursor: pointer;
}
.hk-album__sub { font-size: .92rem; opacity: .8; }
.hk-album__grid { list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: .8rem; }
.hk-album__grid li {
  padding: .9rem .7rem; text-align: center;
  background: #fff;
  border: 3px dashed rgba(20,18,16,.3);
  border-radius: 14px;
  font-size: .8rem; font-weight: 700;
  opacity: .5;
}
.hk-album__grid li.is-got {
  opacity: 1; border-style: solid; border-color: var(--hk-ink);
  background: var(--hk-signal);
  box-shadow: var(--hk-shadow-sm);
  transform: rotate(calc(-3deg * var(--hk-tilt)));
}
.hk-album__grid li b { display: block; font-size: 1.5rem; margin-bottom: .2rem; }
.hk-album__grid li span { display: block; font-weight: 500; font-size: .7rem; opacity: .75; margin-top: .25rem; }
.hk-album__done { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 3px solid var(--hk-ink); }

/* -------------------------------------------------------------- 06 HERO */

.hk-hero { position: relative; padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(1.5rem,3vw,3rem); overflow: hidden; }
.hk-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hk-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; }
.hk-blob--1 { width: 420px; height: 420px; background: var(--hk-hatzi); top: -80px; left: -80px; }
.hk-blob--2 { width: 380px; height: 380px; background: var(--hk-kekzi); bottom: -120px; right: -60px; }

.hk-hero__in {
  position: relative;
  width: min(100% - 2rem, 1340px); margin-inline: auto;
  display: grid; grid-template-columns: 1fr minmax(320px, 1.5fr) 1fr;
  align-items: center; gap: 1rem;
}
.hk-hero__in--biz { grid-template-columns: 1.6fr 1fr; }
.hk-hero__mid { text-align: center; }
.hk-hero__in--biz .hk-hero__mid { text-align: left; }
.hk-hero__title { margin-bottom: .35em; }
.hk-hero__text { font-size: 1.16rem; max-width: 46ch; margin-inline: auto; }
.hk-hero__in--biz .hk-hero__text { margin-inline: 0; }
.hk-hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin: 1.6rem 0 0; }
.hk-hero__in--biz .hk-hero__cta { justify-content: flex-start; }
.hk-hero__hint { margin-top: 1.4rem; font-size: .86rem; opacity: .7; }

.hk-hero__fig { position: relative; }
.hk-hero__fig--l { transform: rotate(calc(-3deg * var(--hk-tilt))); }
.hk-hero__fig--r { transform: rotate(calc(3deg * var(--hk-tilt))); }

/* ----------------------------------------------------------- 07 LAUFBAND */

.hk-ticker {
  border-block: var(--hk-line) solid var(--hk-ink);
  background: var(--hk-signal);
  overflow: hidden;
  padding: .55rem 0;
  transform: rotate(calc(-1deg * var(--hk-tilt)));
  margin: 1.5rem 0 3rem;
}
.hk-ticker__track {
  display: flex; gap: 1.4rem; width: max-content;
  animation: hk-marq calc(38s / max(var(--hk-move), .35)) linear infinite;
}

.hk-ticker__i { font-family: var(--hk-f-display); font-weight: 900; font-size: 1.15rem; text-transform: uppercase; white-space: nowrap; }
.hk-ticker__d { opacity: .5; }
@keyframes hk-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------- 08 SEKTIONEN */

.hk-sec { padding: clamp(2.5rem, 6vw, 5.5rem) 0; }
.hk-sec--games { background: #fff; border-block: var(--hk-line) solid var(--hk-ink); }
.hk-sec--biz { background: color-mix(in srgb, var(--hk-hatzi) 14%, var(--hk-paper)); border-block: var(--hk-line) solid var(--hk-ink); }
.hk-sec--ig { background: color-mix(in srgb, var(--hk-kekzi) 8%, var(--hk-paper)); }
.hk-sec--shop { background: #fff; border-block: var(--hk-line) solid var(--hk-ink); }

.hk-split { display: grid; grid-template-columns: 1.35fr .65fr; align-items: center; gap: 2.5rem; }
.hk-split--rev { grid-template-columns: .65fr 1.35fr; }
.hk-split--rev .hk-split__text { order: 2; }
.hk-split--rev .hk-split__fig { order: 1; }

.hk-vidlist { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.hk-vidlist a { font-weight: 700; text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* ------------------------------------------------- 09 FIGUREN & BLASEN */

.hk-fig { display: block; }
.hk-fig img { width: 100%; }
.hk-fig--hero { max-width: 340px; margin-inline: auto; filter: drop-shadow(6px 8px 0 rgba(20,18,16,.16)); }
.hk-fig--lean { max-width: 260px; margin-inline: auto; filter: drop-shadow(5px 6px 0 rgba(20,18,16,.14)); }
.hk-fig--mini { max-width: 90px; margin-inline: auto; }

body:not(.hk-chaos-1) .hk-fig--hero,
body:not(.hk-chaos-1) .hk-fig--lean {
  animation: hk-float calc(6s / max(var(--hk-move), .4)) ease-in-out infinite;
}
.hk-hero__fig--r .hk-fig--hero { animation-delay: -2.4s; }
@keyframes hk-float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(calc(-14px * var(--hk-move))) rotate(calc(1.5deg * var(--hk-tilt))); }
}

.hk-bubble {
  position: relative;
  margin: .8rem auto 0;
  max-width: 230px;
  padding: .75rem 1rem;
  background: #fff;
  border: 3px solid var(--hk-ink);
  border-radius: 16px;
  box-shadow: var(--hk-shadow-sm);
  font-size: .9rem; font-weight: 600; text-align: center;
}
.hk-bubble::after {
  content: ""; position: absolute; top: -13px;
  border: 8px solid transparent; border-bottom-color: var(--hk-ink);
}
.hk-bubble--left::after { left: 26px; }
.hk-bubble--right::after { right: 26px; }

/* --------------------------------------------------------- 10 SPIELE */

.hk-gametabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.8rem 0 1.4rem; }
.hk-gametab {
  padding: .65rem 1.15rem;
  background: var(--hk-paper);
  border: 3px solid var(--hk-ink); border-radius: 999px;
  font-weight: 800; font-size: .92rem; cursor: pointer;
}
.hk-gametab.is-on { background: var(--hk-signal); box-shadow: var(--hk-shadow-sm); }

.hk-game__stage { position: relative; border: var(--hk-line) solid var(--hk-ink); border-radius: var(--hk-radius);
  overflow: hidden; background: linear-gradient(180deg, #fffdf6, #ffeccb); box-shadow: var(--hk-shadow); }
.hk-game__stage canvas { display: block; width: 100%; height: auto; touch-action: none; }
.hk-game__overlay {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .5rem;
  padding: 1.5rem; background: rgba(246,241,230,.94);
}
.hk-game__overlay[hidden] { display: none; }
.hk-game__overlay h3 { margin: 0; }
.hk-game__overlay p { margin: 0 0 .8rem; max-width: 40ch; }
.hk-game__bar { display: flex; gap: 1.4rem; margin-top: .9rem; font-weight: 700; font-size: .95rem; flex-wrap: wrap; }

.hk-quiz { border: var(--hk-line) solid var(--hk-ink); border-radius: var(--hk-radius);
  background: var(--hk-paper); box-shadow: var(--hk-shadow); padding: clamp(1.2rem,3vw,2rem); }
.hk-quiz__head { display: flex; justify-content: space-between; font-weight: 700; font-size: .9rem; margin-bottom: 1rem; }
.hk-quiz__q {
  margin: 0 0 1.4rem; padding: 1.2rem 1.4rem;
  background: #fff; border: 3px solid var(--hk-ink); border-radius: 14px;
  font-family: var(--hk-f-display); font-size: clamp(1.1rem, 2.4vw, 1.7rem); line-height: 1.25;
  transform: rotate(calc(-1deg * var(--hk-tilt)));
}
.hk-quiz__answers { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hk-quiz__a {
  display: grid; justify-items: center; gap: .5rem;
  padding: 1rem; cursor: pointer;
  background: #fff; border: 3px solid var(--hk-ink); border-radius: 16px;
  font-weight: 800; box-shadow: var(--hk-shadow-sm);
  transition: transform .12s ease;
}
.hk-quiz__a:hover { transform: translate(-2px,-2px); }
.hk-quiz__a--hatzi:hover { background: color-mix(in srgb, var(--hk-hatzi) 30%, #fff); }
.hk-quiz__a--kekzi:hover { background: color-mix(in srgb, var(--hk-kekzi) 22%, #fff); }
.hk-quiz__a.is-right { background: #b9f5c0; }
.hk-quiz__a.is-wrong { background: #ffc2c2; }
.hk-quiz__note { margin: 1.1rem 0 0; padding: .9rem 1.1rem; background: var(--hk-signal);
  border: 3px solid var(--hk-ink); border-radius: 12px; font-weight: 600; }
.hk-quiz__end { text-align: center; }
.hk-quiz__end .hk-btn { margin: .3rem; }

.hk-bingo { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; max-width: 640px; margin: 0 auto; }
.hk-bingo__cell {
  aspect-ratio: 1; padding: .35rem;
  display: grid; place-items: center; text-align: center;
  background: #fff; border: 3px solid var(--hk-ink); border-radius: 10px;
  font-size: .64rem; font-weight: 700; line-height: 1.15; cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.hk-bingo__cell:hover { transform: scale(1.04); }
.hk-bingo__cell.is-on { background: var(--hk-kekzi); color: #fff; }
.hk-bingo__cell.is-free { background: var(--hk-signal); }
.hk-bingo__cell.is-win { background: #7ee787; color: var(--hk-ink); }
.hk-bingo__tools { display: flex; gap: .6rem; justify-content: center; margin-top: 1.2rem; flex-wrap: wrap; }

.hk-check__opts { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.2rem; }
.hk-check__out {
  padding: 1.1rem 1.3rem; background: #fff;
  border: 3px solid var(--hk-ink); border-radius: 14px;
  font-weight: 600; max-width: 60ch;
  box-shadow: var(--hk-shadow-sm);
}

/* ------------------------------------------------------- 11 INSTAGRAM */

.hk-igwrap { display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: center; }
.hk-phone {
  width: min(100%, 380px);
  padding: 12px 10px 18px;
  background: var(--hk-ink);
  border-radius: 38px;
  box-shadow: var(--hk-shadow);
  transform: rotate(calc(-2deg * var(--hk-tilt)));
}
.hk-phone__notch { width: 90px; height: 8px; margin: 0 auto 10px; background: #555; border-radius: 99px; }
.hk-phone__screen { background: #fff; border-radius: 24px; overflow: hidden; padding: 6px; }
.hk-phone__screen #sb_instagram { padding-bottom: 0 !important; }
.hk-phone__screen #sb_instagram .sbi_photo { border-radius: 8px; }
.hk-igside { display: grid; gap: 1rem; justify-items: center; }
.hk-ig-fallback { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.hk-ig-tile img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; }

/* ------------------------------------------- 12 FOTOS, KARTEN, ZAHLEN */

.hk-album__strip { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center; }
.hk-polaroid {
  margin: 0; width: min(100%, 260px);
  background: #fff; padding: 10px 10px 0;
  border: 3px solid var(--hk-ink); box-shadow: var(--hk-shadow);
  transition: transform .18s ease;
}
.hk-polaroid img { aspect-ratio: 4/5; object-fit: cover; }
.hk-polaroid figcaption { padding: .7rem .3rem; font-size: .8rem; font-weight: 600; text-align: center; }
.hk-polaroid.r-3 { transform: rotate(calc(-3deg * var(--hk-tilt))); }
.hk-polaroid.r-2 { transform: rotate(calc(-2deg * var(--hk-tilt))); }
.hk-polaroid.r-1 { transform: rotate(calc(-1deg * var(--hk-tilt))); }
.hk-polaroid.r2  { transform: rotate(calc(2deg * var(--hk-tilt))); }
.hk-polaroid.r3  { transform: rotate(calc(3deg * var(--hk-tilt))); }
.hk-polaroid:hover { transform: rotate(0) scale(1.04); z-index: 2; }

.hk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1.4rem; }
.hk-card {
  background: #fff; padding: 1.5rem;
  border: var(--hk-line) solid var(--hk-ink); border-radius: var(--hk-radius);
  box-shadow: var(--hk-shadow-sm);
}
.hk-card h3 { margin-top: 0; }
.hk-card p { margin: 0; }
.hk-card--post { padding: 0; overflow: hidden; }
.hk-card--post h3, .hk-card--post p { padding-inline: 1.2rem; }
.hk-card--post p { padding-bottom: 1.2rem; }
.hk-card__img img { aspect-ratio: 16/10; object-fit: cover; border-bottom: 3px solid var(--hk-ink); }

.hk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1rem; margin: 1.8rem 0 .8rem; }
.hk-stat {
  text-align: center; padding: 1.3rem .8rem;
  background: #fff; border: var(--hk-line) solid var(--hk-ink); border-radius: var(--hk-radius);
  box-shadow: var(--hk-shadow-sm);
}
.hk-stat:nth-child(odd) { transform: rotate(calc(-1.5deg * var(--hk-tilt))); }
.hk-stat:nth-child(even) { transform: rotate(calc(1.5deg * var(--hk-tilt))); }
.hk-stat strong { display: block; font-family: var(--hk-f-display); font-size: clamp(1.9rem,4vw,2.9rem); line-height: 1; }
.hk-stat span { font-size: .82rem; font-weight: 600; opacity: .8; }
.hk-stats__note { font-size: .85rem; opacity: .75; margin-bottom: 2.4rem; }

.hk-honest { margin-top: 2.4rem; padding: 1.6rem 1.8rem; background: #fff;
  border: var(--hk-line) solid var(--hk-ink); border-radius: var(--hk-radius); box-shadow: var(--hk-shadow-sm); }
.hk-honest h3 { margin-top: 0; }
.hk-honest ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .7rem; }

.hk-bizcta { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: 2.6rem;
  padding: 1.6rem; background: var(--hk-signal);
  border: var(--hk-line) solid var(--hk-ink); border-radius: var(--hk-radius); box-shadow: var(--hk-shadow); }
.hk-bizcta .hk-fig { max-width: 150px; }
.hk-bizcta__t { font-family: var(--hk-f-display); font-size: clamp(1.2rem,2.6vw,1.8rem); margin: 0 0 1rem; }

.hk-logos { display: flex; flex-wrap: wrap; gap: 2.2rem; align-items: center; justify-content: center; margin-bottom: 2rem; }
.hk-logos img { max-height: 62px; width: auto; filter: grayscale(1); opacity: .75; transition: .2s; }
.hk-logos img:hover { filter: none; opacity: 1; transform: scale(1.06); }

/* Beitragstext */
.hk-prose { font-size: 1.06rem; }
.hk-prose h2, .hk-prose h3 { margin-top: 2rem; }
.hk-prose img { border: 3px solid var(--hk-ink); border-radius: 12px; }
.hk-prose blockquote { margin: 1.6rem 0; padding: 1rem 1.4rem; border-left: 6px solid var(--hk-kekzi); background: #fff; }
.hk-page__thumb img { border: var(--hk-line) solid var(--hk-ink); border-radius: var(--hk-radius); margin-bottom: 2rem; }
.hk-404 { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }

/* --------------------------------------------------------- 13 FORMULAR */

.hk-form { display: grid; gap: 1rem; }
.hk-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hk-form label { display: grid; gap: .35rem; font-weight: 700; font-size: .9rem; }
.hk-form input, .hk-form select, .hk-form textarea {
  font: inherit; font-weight: 500;
  padding: .8rem .9rem;
  background: #fff;
  border: 3px solid var(--hk-ink); border-radius: 12px;
}
.hk-form textarea { resize: vertical; }
.hk-form__legal { font-size: .82rem; opacity: .75; }
.hk-hp { position: absolute; left: -9999px; }
.hk-notice { padding: 1rem 1.2rem; border: 3px solid var(--hk-ink); border-radius: 12px; margin-bottom: 1.5rem; }
.hk-notice--ok { background: #b9f5c0; }
.hk-notice--bad { background: #ffc2c2; }

/* ------------------------------------------------------ 14 FUSSBEREICH */

.hk-foot { background: var(--hk-ink); color: var(--hk-paper); padding: clamp(2.5rem,5vw,4rem) 0 1.5rem; margin-top: 3rem; }
.hk-foot__top { width: min(100% - 2.5rem, var(--hk-wrap)); margin-inline: auto;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: center; }
.hk-foot__big { font-family: var(--hk-f-display); font-size: clamp(1.8rem,4.5vw,3rem); line-height: 1.05; margin: 0; }
.hk-foot__big span { color: var(--hk-signal); }
.hk-foot__small { opacity: .7; font-size: .92rem; }
.hk-foot__links { display: flex; flex-wrap: wrap; gap: .6rem; }
.hk-foot .hk-btn--ghost { color: var(--hk-paper); border-color: var(--hk-paper); box-shadow: 4px 4px 0 rgba(246,241,230,.35); }
.hk-foot__bottom { width: min(100% - 2.5rem, var(--hk-wrap)); margin: 2.5rem auto 0; padding-top: 1.2rem;
  border-top: 2px solid rgba(246,241,230,.25);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }
.hk-foot__menu { list-style: none; display: flex; gap: 1.2rem; margin: 0; padding: 0; }
.hk-foot__copy { margin: 0; opacity: .7; }
.hk-foot__egg { width: min(100% - 2.5rem, var(--hk-wrap)); margin: 2rem auto 0; text-align: center; opacity: .55; }
.hk-foot__egg .hk-dog { width: 150px; margin: 0 auto; cursor: pointer; }
.hk-foot__egg p { font-size: .82rem; }

/* --------------------------------------------- 15 HUND, TOAST, KONFETTI */

.hk-dog { display: block; }
.hk-dogrun {
  position: fixed; bottom: 0; left: -240px; z-index: 55;
  width: 190px; pointer-events: none;
}
.hk-dogrun.is-running { animation: hk-run 9s linear; }
.hk-dogrun .hk-dog { pointer-events: auto; cursor: pointer; }
@keyframes hk-run { to { transform: translateX(calc(100vw + 260px)); } }
.hk-dogrun .hk-dog__legs { animation: hk-legs .28s steps(2) infinite; transform-origin: 50% 100%; }
@keyframes hk-legs { to { transform: scaleY(.86); } }

.hk-toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 95;
  transform: translateX(-50%);
  padding: .9rem 1.3rem;
  background: var(--hk-signal); color: var(--hk-ink);
  border: var(--hk-line) solid var(--hk-ink); border-radius: 999px;
  font-weight: 800; box-shadow: var(--hk-shadow-sm);
  animation: hk-pop .35s ease;
}
.hk-toast[hidden] { display: none; }
@keyframes hk-pop { from { transform: translate(-50%, 30px); opacity: 0; } }

.hk-confetti { position: fixed; inset: 0; z-index: 94; pointer-events: none; }
.hk-confetti i {
  position: absolute; width: 11px; height: 15px; top: -20px;
  animation: hk-fall linear forwards;
}
@keyframes hk-fall { to { transform: translateY(105vh) rotate(720deg); opacity: .1; } }

/* ------------------------------------------------------------ 16 MOBIL */

@media (max-width: 1080px) {
  .hk-hero__in { grid-template-columns: 1fr; }
  .hk-hero__fig { display: none; }
  .hk-hero__in--biz { grid-template-columns: 1fr; }
  .hk-hero__in--biz .hk-hero__mid { text-align: center; }
  .hk-hero__in--biz .hk-hero__cta { justify-content: center; }
  .hk-hero__in--biz .hk-hero__text { margin-inline: auto; }
  .hk-split, .hk-split--rev { grid-template-columns: 1fr; }
  .hk-split--rev .hk-split__text, .hk-split--rev .hk-split__fig { order: initial; }
  .hk-igwrap { grid-template-columns: 1fr; justify-items: center; }
  .hk-foot__top { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .hk-nav, .hk-head__yt, .hk-chaos__lbl, .hk-chaos__out { display: none; }
  .hk-burger { display: flex; }
  .hk-mobilenav { display: block; }
  .hk-mobilenav[hidden] { display: none; }
  .hk-split__fig { display: none; }
  .hk-quiz__answers { grid-template-columns: 1fr; }
  .hk-bingo { grid-template-columns: repeat(5,1fr); gap: .3rem; }
  .hk-bingo__cell { font-size: .5rem; border-width: 2px; }
  .hk-404 { justify-content: center; text-align: center; }
  .hk-404 .hk-fig { max-width: 160px; }
}

@media (max-width: 560px) {
  body.hk { font-size: 16px; }
  .hk-form__row { grid-template-columns: 1fr; }
  .hk-polaroid { width: 100%; max-width: 320px; }
  .hk-bizcta { flex-direction: column; text-align: center; }
}

/* Druck: alles ruhig */
@media print {
  .hk-head, .hk-album, .hk-dogrun, .hk-ticker, .hk-sec--games, .hk-toast { display: none !important; }
  body.hk { --hk-tilt: 0; background: #fff; }
}

/* =========================================================================
   TEIL 2 – Version 1.1
   Logos · 15 Illustrationen · Song · Katzen · Chaos-Stufen · Warnung
   Steht bewusst am Ende: was hier steht, gewinnt gegen Teil 1.
   ====================================================================== */

/* ------------------------------------------------------------- LOGOS */

.hk-logo { width: auto; height: 46px; color: var(--hk-ink); flex: 0 0 auto; }
.hk-logo--foot { height: 74px; color: var(--hk-paper); margin-bottom: 1rem; }
.hk-brand { gap: .7rem; }
.hk-tm { width: auto; height: 26px; }
.hk-nav__tm { display: inline-flex; align-items: center; margin-left: .9rem; padding-left: .9rem;
  border-left: 2px solid rgba(20,18,16,.18); opacity: .8; }
.hk-nav__tm:hover { opacity: 1; }
.hk-foot__tm { display: inline-flex; align-items: center; gap: .4rem; margin-left: .4rem; }
.hk-foot__tm .hk-tm { height: 20px; }
.hk-logos__tm { display: inline-flex; }
.hk-logos__tm .hk-tm { height: 54px; }

/* -------------------------------------------- DIE 15 ILLUSTRATIONEN */

.hk-cast { display: block; line-height: 0; }
.hk-cast img { width: 100%; height: auto; filter: drop-shadow(6px 8px 0 rgba(20,18,16,.13)); }

.hk-cast--solo { max-width: 320px; }
.hk-cast--duo  { max-width: 520px; }
.hk-cast--xl   { max-width: 620px; }
.hk-cast--sm   { max-width: 230px; }
.hk-cast--card { max-width: 260px; margin-inline: auto; }

.hk-cast--tilt-l { transform: rotate(calc(-3deg * var(--hk-tilt))); }
.hk-cast--tilt-r { transform: rotate(calc(3deg * var(--hk-tilt))); }

body:not(.hk-chaos-1) .hk-cast--xl,
body:not(.hk-chaos-1) .hk-cast--duo {
  animation: hk-float calc(7s / max(var(--hk-move), .4)) ease-in-out infinite;
}
body:not(.hk-chaos-1) .hk-cast--solo,
body:not(.hk-chaos-1) .hk-cast--sm {
  animation: hk-float calc(5.5s / max(var(--hk-move), .4)) ease-in-out infinite;
  animation-delay: -1.7s;
}

/* Hero neu: Text links, Duo rechts */
.hk-hero__in { grid-template-columns: 1.1fr .9fr; align-items: center; }
.hk-hero__mid { text-align: left; }
.hk-hero__text { margin-inline: 0; }
.hk-hero__cta { justify-content: flex-start; }
.hk-hero__art { display: flex; justify-content: center; }
.hk-hero--biz .hk-hero__in { grid-template-columns: 1.6fr 1fr; }

/* Achtung-Irre: Figur, Text, Figur */
.hk-irre { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; }
.hk-irre .hk-cast--left { max-width: 400px; }
.hk-irre .hk-cast--right { max-width: 210px; }
.hk-title--xl { font-size: clamp(2.6rem, 8vw, 5.5rem); }

/* Abo-Block */
.hk-abo { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: 3rem;
  padding: 1.6rem 2rem; background: #fff;
  border: var(--hk-line) solid var(--hk-ink); border-radius: var(--hk-radius); box-shadow: var(--hk-shadow); }
.hk-abo__t { font-family: var(--hk-f-display); font-size: clamp(1.2rem,2.6vw,1.8rem); margin: 0 0 .4rem; }
.hk-abo__s { margin: 0 0 1rem; max-width: 54ch; }
.hk-split__art { display: flex; justify-content: center; }

/* Ruhiger Kaffee-Block */
.hk-quiet { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; justify-content: center; }
.hk-quiet > div { max-width: 46ch; }

/* Fotos */
.hk-fotorow { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; }
.hk-news { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; }
.hk-news > div { flex: 1 1 380px; }

/* Downloads & Shop */
.hk-stuff { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 1.6rem; }
.hk-card--stuff { text-align: center; }
.hk-soon { display: inline-block; margin-top: .8rem; padding: .3rem .8rem;
  background: var(--hk-signal); border: 3px solid var(--hk-ink); border-radius: 999px;
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }

/* Community */
.hk-love { display: grid; grid-template-columns: auto 1fr; gap: 2.5rem; align-items: center; }
.hk-join { display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: center;
  margin-top: 3.5rem; padding-top: 3rem; border-top: var(--hk-line) dashed rgba(20,18,16,.25); }
.hk-sec--love { background: color-mix(in srgb, var(--hk-kekzi) 10%, var(--hk-paper)); }

/* ------------------------------------------------------------- SONG */

.hk-sec--song { background: var(--hk-ink); color: var(--hk-paper);
  border-block: var(--hk-line) solid var(--hk-ink); }
.hk-song { display: grid; grid-template-columns: auto 1fr; gap: 3rem; align-items: center; }
.hk-song .hk-fineprint { color: rgba(246,241,230,.65); }
.hk-song .hk-lead { color: rgba(246,241,230,.92); }

.hk-song__disc {
  position: relative; width: 260px; height: 260px; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, #1c1a18 0 2px, #232120 2px 4px),
    #1c1a18;
  border: 6px solid #000;
  box-shadow: 0 0 0 4px var(--hk-signal), 10px 12px 0 rgba(0,0,0,.45);
  display: grid; place-items: center;
}
.hk-song__disc::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  background: var(--hk-paper); border-radius: 50%;
}
.hk-song__label {
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--hk-kekzi);
  display: grid; place-items: center;
  border: 4px solid #000;
}
.hk-song__label .hk-logo { height: 56px; color: #fff; }
.hk-song__disc.is-spinning { animation: hk-spin 3.2s linear infinite; }
@keyframes hk-spin { to { transform: rotate(360deg); } }
.hk-song__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1rem; }
.hk-sec--song .hk-btn--ghost { color: var(--hk-paper); border-color: var(--hk-paper);
  box-shadow: 4px 4px 0 rgba(246,241,230,.4); }

/* Player unten links */
.hk-player {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 70;
  display: flex; align-items: center; gap: .7rem;
  max-width: min(92vw, 350px);
  padding: .55rem .9rem .55rem .55rem;
  background: var(--hk-ink); color: var(--hk-paper);
  border: 3px solid var(--hk-ink); border-radius: 999px;
  box-shadow: var(--hk-shadow-sm);
}
.hk-player[hidden] { display: none; }
.hk-player__play {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  background: var(--hk-signal); border: 3px solid #000; cursor: pointer;
  font-size: .95rem; line-height: 1; display: grid; place-items: center;
}
.hk-player__meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.hk-player__meta strong { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-player__meta span { font-size: .7rem; opacity: .75; }
.hk-player__meta a { color: var(--hk-signal); }
.hk-player__bars { display: flex; align-items: flex-end; gap: 2px; height: 20px; }
.hk-player__bars i { width: 3px; height: 5px; background: var(--hk-signal); display: block; }
.hk-player.is-playing .hk-player__bars i { animation: hk-eq .7s ease-in-out infinite alternate; }
.hk-player.is-playing .hk-player__bars i:nth-child(2) { animation-delay: .12s; }
.hk-player.is-playing .hk-player__bars i:nth-child(3) { animation-delay: .24s; }
.hk-player.is-playing .hk-player__bars i:nth-child(4) { animation-delay: .06s; }
.hk-player.is-playing .hk-player__bars i:nth-child(5) { animation-delay: .3s; }
@keyframes hk-eq { to { height: 20px; } }
.hk-player__close { background: none; border: 0; color: rgba(246,241,230,.6);
  font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }

/* ----------------------------------------------------------- KATZEN */

.hk-cat { display: block; width: 100%; }
.hk-catrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 1.2rem; margin: 2rem 0 1.2rem; }
.hk-catcard {
  margin: 0; padding: 1rem .8rem;
  background: #fff; border: var(--hk-line) solid var(--hk-ink); border-radius: var(--hk-radius);
  box-shadow: var(--hk-shadow-sm); text-align: center;
  transition: transform .18s ease;
}
.hk-catcard:nth-child(odd) { transform: rotate(calc(-2deg * var(--hk-tilt))); }
.hk-catcard:nth-child(even) { transform: rotate(calc(2deg * var(--hk-tilt))); }
.hk-catcard:hover { transform: rotate(0) translateY(-6px); }
.hk-catcard figcaption strong { display: block; font-family: var(--hk-f-display); font-size: 1.25rem; }
.hk-catcard figcaption span { font-size: .78rem; opacity: .8; }
.hk-cat--card { max-width: 150px; margin: 0 auto .4rem; }
.hk-cat--sit { width: 150px; margin: 0 auto; cursor: pointer; }

.hk-catrun { position: fixed; bottom: 0; left: -240px; z-index: 55; width: 180px; pointer-events: none; }
.hk-catrun.is-running { animation: hk-run 8s linear; }
.hk-catrun .hk-cat { pointer-events: auto; cursor: pointer; }
.hk-catrun .hk-cat__legs { animation: hk-legs .22s steps(2) infinite; transform-origin: 50% 100%; }
.hk-cat__tail { transform-origin: 30% 84%; }
body:not(.hk-chaos-1) .hk-cat__tail { animation: hk-tail 2.4s ease-in-out infinite; }
@keyframes hk-tail { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }

/* --------------------------------------------------- WARNUNG STUFE 3 */

.hk-warn { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  padding: 1.5rem; background: rgba(60,0,0,.78); backdrop-filter: blur(3px); }
.hk-warn[hidden] { display: none; }
.hk-warn__box {
  position: relative; overflow: hidden;
  width: min(100%, 560px); text-align: center;
  padding: 2.5rem 2rem 2rem;
  background: #fff; color: var(--hk-ink);
  border: 6px solid #d81f1f; border-radius: 14px;
  box-shadow: 0 0 0 6px #ffd400, 14px 14px 0 rgba(0,0,0,.5);
  animation: hk-warnin .3s ease;
}
@keyframes hk-warnin { from { transform: scale(.85) rotate(-3deg); opacity: 0; } }
.hk-warn__stripes { position: absolute; inset: 0 0 auto; height: 16px;
  background: repeating-linear-gradient(45deg, #d81f1f 0 14px, #ffd400 14px 28px); }
.hk-warn__sign { font-size: 3.4rem; margin: .4rem 0 0; line-height: 1;
  animation: hk-blink 1s steps(2) infinite; }
@keyframes hk-blink { 50% { opacity: .25; } }
.hk-warn__box h2 { color: #d81f1f; margin-bottom: .5rem; }
.hk-warn__small { font-size: .85rem; opacity: .7; }
.hk-warn__btns { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.hk-btn--danger { --btn-bg: #d81f1f; color: #fff; }
.hk-chaos__b--danger[aria-pressed="true"] { background: #d81f1f; color: #fff; }

/* --------------------------------------- INSTAGRAM, auch auf dem Handy */

.hk-igwrap { grid-template-columns: minmax(0, 1fr) auto; }
.hk-phone { width: 100%; max-width: 380px; }
.hk-phone__screen { max-width: 100%; overflow: hidden; }

/* Smash Balloon baendigen: es setzt eigene Breiten und Paddings inline. */
.hk-phone__screen #sb_instagram,
.hk-phone__screen .sb_instagram_header,
.hk-phone__screen #sbi_images {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
.hk-phone__screen #sbi_images {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
}
.hk-phone__screen #sbi_images .sbi_item,
.hk-phone__screen .sbi_item {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
.hk-phone__screen .sbi_photo_wrap,
.hk-phone__screen .sbi_photo {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 8px;
  display: block;
}
.hk-phone__screen .sbi_photo img { width: 100%; height: 100%; object-fit: cover; }
.hk-phone__screen #sbi_load,
.hk-phone__screen .sbi_follow_btn { display: none !important; }

/* ----------------------------------------------------------- MOBIL */

@media (max-width: 1080px) {
  .hk-hero__in { grid-template-columns: 1fr; }
  .hk-hero__mid { text-align: center; }
  .hk-hero__text { margin-inline: auto; }
  .hk-hero__cta { justify-content: center; }
  .hk-hero__art { display: flex; margin-top: 1.5rem; }
  .hk-cast--xl { max-width: 340px; }
  .hk-irre { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hk-irre .hk-cast--left { max-width: 300px; }
  .hk-irre .hk-cast--right { max-width: 180px; }
  .hk-song { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hk-song__cta { justify-content: center; }
  .hk-fotorow, .hk-love, .hk-join { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hk-split__art { display: flex; }
  .hk-igwrap { grid-template-columns: 1fr; justify-items: center; }
}

@media (max-width: 860px) {
  .hk-nav__tm { display: none; }
  .hk-logo { height: 38px; }
  .hk-brand__txt { display: none; }
  .hk-split__art { display: flex; }
  .hk-cast--duo, .hk-cast--xl { max-width: 320px; }
  .hk-cast--solo { max-width: 240px; }
  .hk-cast--sm { max-width: 180px; }
  .hk-song__disc { width: 200px; height: 200px; }
  .hk-abo, .hk-quiet, .hk-news { flex-direction: column; text-align: center; }
  .hk-catrow { grid-template-columns: repeat(2, 1fr); }
  .hk-player { left: .5rem; right: .5rem; bottom: .5rem; max-width: none; }
  /* Instagram: im Handyrahmen bleibt es ein sauberes 3er-Raster */
  .hk-phone { max-width: 320px; padding: 8px 6px 12px; border-radius: 28px; }
  .hk-phone__screen #sbi_images { gap: 3px !important; }
}

@media (max-width: 560px) {
  .hk-catrow { grid-template-columns: 1fr 1fr; }
  .hk-cast--duo, .hk-cast--xl { max-width: 280px; }
  .hk-warn__box { padding: 2rem 1.2rem 1.5rem; }
  .hk-title--xl { font-size: clamp(2rem, 13vw, 3rem); }
}

/* =========================================================================
   DIE DREI STUFEN – Neufassung
   1 = hell und freundlich, alles bewegt sich langsam
   2 = Nachtmodus
   3 = ausser Kontrolle
   ====================================================================== */

/* ------------------------------------------------- STUFE 1 · HELL & RUHIG */

body.hk-chaos-1 { --hk-tilt: 1; --hk-move: .55; }


/* ---------------------------------------------------- STUFE 2 · NACHTMODUS */

body.hk-chaos-2 {
  --hk-paper: #14161a;
  --hk-ink:   #f2efe8;
  --hk-tilt: 1;
  --hk-move: 1;
  --hk-shadow: 7px 7px 0 #000;
  --hk-shadow-sm: 4px 4px 0 #000;
  background: #14161a;
  color: #f2efe8;
}
body.hk-chaos-2 .hk-head { background: #14161a; border-bottom-color: #f2efe8; }
body.hk-chaos-2 .hk-nav__list a:hover { background: #22262d; border-color: #f2efe8; }
body.hk-chaos-2 .hk-logo { color: #f2efe8; }
body.hk-chaos-2 .hk-chaos,
body.hk-chaos-2 .hk-card,
body.hk-chaos-2 .hk-stat,
body.hk-chaos-2 .hk-catcard,
body.hk-chaos-2 .hk-abo,
body.hk-chaos-2 .hk-honest,
body.hk-chaos-2 .hk-quiz,
body.hk-chaos-2 .hk-quiz__q,
body.hk-chaos-2 .hk-check__out,
body.hk-chaos-2 .hk-bubble,
body.hk-chaos-2 .hk-album__inner,
body.hk-chaos-2 .hk-mobilenav {
  background: #1c2027;
  color: #f2efe8;
  border-color: #f2efe8;
}
body.hk-chaos-2 .hk-chaos__b { background: #14161a; border-color: #f2efe8; color: #f2efe8; }
body.hk-chaos-2 .hk-chaos__b[aria-pressed="true"] { background: var(--hk-signal); color: #14161a; }
body.hk-chaos-2 .hk-btn { --btn-bg: #1c2027; color: #f2efe8; border-color: #f2efe8; }
body.hk-chaos-2 .hk-btn--yt { --btn-bg: #ff3b30; color: #fff; }
body.hk-chaos-2 .hk-btn--ig { --btn-bg: var(--hk-kekzi); color: #fff; }
body.hk-chaos-2 .hk-btn--wa { --btn-bg: #25d366; color: #06301a; }
body.hk-chaos-2 .hk-btn--tw { --btn-bg: #9146ff; color: #fff; }
body.hk-chaos-2 .hk-btn--tt { --btn-bg: #000; color: #fff; }
body.hk-chaos-2 .hk-btn--signal { --btn-bg: var(--hk-signal); color: #14161a; }
body.hk-chaos-2 .hk-btn:hover { box-shadow: 7px 7px 0 #000; }
body.hk-chaos-2 .hk-kicker--hatzi { color: #14161a; }
body.hk-chaos-2 .hk-sec--games { background: #191d23; border-block-color: #f2efe8; }
body.hk-chaos-2 .hk-sec--biz { background: #101c1e; border-block-color: #f2efe8; }
body.hk-chaos-2 .hk-sec--ig { background: #1a141a; }
body.hk-chaos-2 .hk-sec--love { background: #1e1419; }
body.hk-chaos-2 .hk-sec--shop { background: #191d23; border-block-color: #f2efe8; }
body.hk-chaos-2 .hk-sec--song { background: #000; }
body.hk-chaos-2 .hk-foot { background: #000; }
body.hk-chaos-2 .hk-game__stage { background: linear-gradient(180deg, #1c2027, #262b34); }
body.hk-chaos-2 .hk-game__overlay { background: rgba(20,22,26,.94); }
body.hk-chaos-2 .hk-polaroid { background: #1c2027; border-color: #f2efe8; }
body.hk-chaos-2 .hk-bingo__cell { background: #1c2027; border-color: #f2efe8; color: #f2efe8; }
body.hk-chaos-2 .hk-form input,
body.hk-chaos-2 .hk-form select,
body.hk-chaos-2 .hk-form textarea { background: #1c2027; color: #f2efe8; border-color: #f2efe8; }
body.hk-chaos-2 .hk-logos img { filter: grayscale(1) invert(1) brightness(1.6); }
body.hk-chaos-2.hk-grain::before { opacity: .22; mix-blend-mode: screen; }
body.hk-chaos-2 .hk-cast img { filter: drop-shadow(6px 8px 0 rgba(0,0,0,.55)); }

/* ------------------------------------------------ STUFE 3 · AUSSER KONTROLLE */

body.hk-chaos-3 {
  --hk-tilt: 2.6;
  --hk-move: 2;
  --hk-line: 6px;
  --hk-shadow: 12px 12px 0 var(--hk-ink);
  --hk-shadow-sm: 7px 7px 0 var(--hk-ink);
  animation: hk-bgflicker 6s steps(1) infinite;
}
@keyframes hk-bgflicker {
  0%   { background: #f6f1e6; }
  14%  { background: #ffe8f4; }
  28%  { background: #e2fbfc; }
  42%  { background: #fff6cc; }
  56%  { background: #ffe0e0; }
  70%  { background: #e8ffe8; }
  84%  { background: #f0e6ff; }
  100% { background: #f6f1e6; }
}
body.hk-chaos-3 .hk-sec {
  transform: translate(var(--rx, 0px), var(--ry, 0px)) rotate(var(--rr, 0deg));
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
  animation: hk-secspin 14s ease-in-out infinite;
}
@keyframes hk-secspin {
  0%,100% { rotate: 0deg; }
  25%     { rotate: -1.6deg; }
  75%     { rotate: 1.6deg; }
}
body.hk-chaos-3 .hk-sec:nth-child(odd) { animation-duration: 11s; animation-direction: reverse; }
body.hk-chaos-3 .hk-sec--irre  { background: var(--hk-signal); }
body.hk-chaos-3 .hk-sec--games { background: var(--hk-hatzi); }
body.hk-chaos-3 .hk-sec--ig    { background: var(--hk-kekzi); }
body.hk-chaos-3 .hk-sec--biz   { animation: hk-bgflicker 4s steps(1) infinite reverse; }

body.hk-chaos-3 .hk-card,
body.hk-chaos-3 .hk-stat,
body.hk-chaos-3 .hk-catcard,
body.hk-chaos-3 .hk-polaroid {
  transform: rotate(var(--rr, 0deg)) translateY(var(--ry, 0px));
}

/* Buchstaben, die abhauen und zurueckkommen */
body.hk-chaos-3 .hk-wobble__w {
  animation: hk-escape 5.5s cubic-bezier(.68,-.55,.27,1.55) infinite;
  animation-delay: calc(var(--i) * .13s);
}
@keyframes hk-escape {
  0%, 55%, 100% { transform: translate(0,0) rotate(0) scale(1); opacity: 1; }
  20% { transform: translate(-40px, -22px) rotate(-24deg) scale(.7); opacity: .25; }
  35% { transform: translate(34px, 18px) rotate(19deg) scale(1.25); opacity: .8; }
}
body.hk-chaos-3 .hk-wobble__w:nth-child(2n) { animation-duration: 4.2s; }
body.hk-chaos-3 .hk-wobble__w:nth-child(3n) { animation-duration: 6.8s; color: var(--hk-kekzi); }
body.hk-chaos-3 .hk-wobble__w:nth-child(5n) { color: var(--hk-hatzi); }

body.hk-chaos-3 .hk-ticker { animation: hk-tickershake .35s ease-in-out infinite alternate; }
@keyframes hk-tickershake { to { transform: rotate(2deg) scale(1.03); } }
body.hk-chaos-3 .hk-cast img { filter: drop-shadow(10px 12px 0 rgba(20,18,16,.2)) saturate(1.4) hue-rotate(0deg);
  animation: hk-hue 7s linear infinite; }
@keyframes hk-hue { to { filter: drop-shadow(10px 12px 0 rgba(20,18,16,.2)) saturate(1.4) hue-rotate(360deg); } }
body.hk-chaos-3 .hk-btn { animation: hk-btnjig 1.8s ease-in-out infinite; }
@keyframes hk-btnjig { 0%,100% { rotate: 0deg; } 25% { rotate: -4deg; } 75% { rotate: 4deg; } }
body.hk-chaos-3 .hk-head { animation: hk-headwave 3s ease-in-out infinite; }
@keyframes hk-headwave { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(5px) rotate(.6deg); } }
body.hk-chaos-3 .hk-logo { animation: hk-hue 4s linear infinite; }

/* Der Ruck beim Einschalten */
body.hk-quake { animation: hk-quake .7s cubic-bezier(.36,.07,.19,.97); }
@keyframes hk-quake {
  10%, 90% { transform: translate(-3px, 2px) rotate(-.6deg); }
  20%, 80% { transform: translate(6px, -3px) rotate(.9deg); }
  30%, 50%, 70% { transform: translate(-12px, 5px) rotate(-1.2deg); }
  40%, 60% { transform: translate(12px, -5px) rotate(1.2deg); }
}

/* Die Verfolgungsjagd quer über den Bildschirm */
.hk-chase { position: fixed; inset: auto 0 0 0; height: 0; z-index: 58; pointer-events: none; }
.hk-runner {
  position: fixed; left: -260px; z-index: 58;
  width: var(--rw, 150px); pointer-events: auto; cursor: pointer;
  animation: hk-dash var(--rdur, 6s) linear forwards;
}
.hk-runner img { width: 100%; height: auto; animation: hk-bounce .26s ease-in-out infinite alternate; }
.hk-runner.is-back { animation-name: hk-dash-back; }
.hk-runner.is-back img { transform: scaleX(-1); }
@keyframes hk-dash { to { transform: translateX(calc(100vw + 320px)); } }
@keyframes hk-dash-back { from { transform: translateX(calc(100vw + 320px)); } to { transform: translateX(0); } }
@keyframes hk-bounce { to { transform: translateY(-9px); } }
.hk-runner.is-back img { animation: hk-bounce-flip .26s ease-in-out infinite alternate; }
@keyframes hk-bounce-flip { from { transform: scaleX(-1) translateY(0); } to { transform: scaleX(-1) translateY(-9px); } }

/* Kaffeebohnen-Spur */
.hk-bean { position: fixed; z-index: 93; pointer-events: none; width: 12px; height: 12px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--hk-kaffee);
  animation: hk-beanfade .9s ease-out forwards; }
@keyframes hk-beanfade { to { opacity: 0; transform: translateY(26px) rotate(180deg) scale(.5); } }

/* ------------------------------------------- SOCIAL-BUTTONS MIT FARBE */

.hk-btn--wa { --btn-bg: #25d366; color: #06301a; }
.hk-btn--tw { --btn-bg: #9146ff; color: #fff; }
.hk-btn--tt { --btn-bg: #111; color: #fff; }
.hk-btn--am { --btn-bg: #ff9900; color: #1a1a1a; }
.hk-btn__ico { width: 20px; height: 20px; flex: 0 0 auto; }

/* Kanalkacheln */
.hk-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin: 2rem 0; }
.hk-channel {
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-start;
  padding: 1.3rem; text-decoration: none;
  border: var(--hk-line) solid var(--hk-ink); border-radius: var(--hk-radius);
  box-shadow: var(--hk-shadow-sm);
  transition: transform .15s ease;
}
.hk-channel:hover { transform: translate(-3px,-3px); box-shadow: var(--hk-shadow); }
.hk-channel__ico { width: 34px; height: 34px; }
.hk-channel strong { font-family: var(--hk-f-display); font-size: 1.15rem; }
.hk-channel span { font-size: .82rem; opacity: .85; }
.hk-channel--yt { background: #ff3b30; color: #fff; }
.hk-channel--ig { background: var(--hk-kekzi); color: #fff; }
.hk-channel--tt { background: #111; color: #fff; }
.hk-channel--tw { background: #9146ff; color: #fff; }
.hk-channel--wa { background: #25d366; color: #06301a; }

/* Amazon-Block mit mehr Gewicht */
.hk-sec--shop { background: linear-gradient(180deg, #fff6e6, #ffe9c7); }
body.hk-chaos-2 .hk-sec--shop { background: linear-gradient(180deg, #241c0e, #1a1409); }
.hk-shopcta { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  padding: 1.8rem; margin-top: 1.6rem;
  background: #ff9900; border: var(--hk-line) solid var(--hk-ink);
  border-radius: var(--hk-radius); box-shadow: var(--hk-shadow); }
.hk-shopcta__t { font-family: var(--hk-f-display); font-size: clamp(1.3rem,3vw,2rem); margin: 0 0 .6rem; color: #1a1a1a; }
.hk-shopcta p { color: #1a1a1a; }

/* Markenlogos aufgeräumt */
.hk-brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1rem; margin-top: 2.2rem; }
.hk-brand-card {
  display: grid; gap: .6rem; place-items: center; text-align: center;
  padding: 1.4rem 1rem; background: #fff;
  border: var(--hk-line) solid var(--hk-ink); border-radius: var(--hk-radius);
  box-shadow: var(--hk-shadow-sm);
}
body.hk-chaos-2 .hk-brand-card { background: #1c2027; }
.hk-brand-card img { max-height: 54px; width: auto; }
.hk-brand-card .hk-tm { height: 44px; }
.hk-brand-card span { font-size: .82rem; opacity: .8; }

/* Instagram wieder kompakt */
.hk-phone__screen { max-height: 460px; overflow: hidden; position: relative; }
.hk-phone__screen::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 60px;
  background: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
}
body.hk-chaos-2 .hk-phone__screen::after { background: linear-gradient(to bottom, transparent, #1c2027); }
body.hk-chaos-2 .hk-phone__screen { background: #1c2027; }
@media (max-width: 860px) {
  .hk-phone__screen { max-height: 380px; }
}

/* Achievement-Popup */
.hk-ach {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 96;
  display: flex; align-items: center; gap: .9rem;
  max-width: min(92vw, 340px);
  padding: .9rem 1.1rem;
  background: var(--hk-signal); color: #141210;
  border: var(--hk-line) solid #141210; border-radius: 14px;
  box-shadow: var(--hk-shadow);
  animation: hk-achin .45s cubic-bezier(.34,1.56,.64,1);
}
.hk-ach[hidden] { display: none; }
@keyframes hk-achin { from { transform: translateX(120%) rotate(8deg); opacity: 0; } }
.hk-ach__ico { font-size: 1.9rem; line-height: 1; }
.hk-ach__t { font-family: var(--hk-f-display); font-size: 1rem; line-height: 1.1; }
.hk-ach__s { font-size: .78rem; opacity: .8; }

/* =========================================================================
   KORREKTUREN – Lesbarkeit
   Alles, was eine feste Hintergrundfarbe hat, bekommt auch eine feste
   Schriftfarbe. Sonst kippt es im Nachtmodus.
   ====================================================================== */

/* Warndialog: immer dunkle Schrift auf Weiß */
.hk-warn__box { background: #fff !important; color: #141210 !important; }
.hk-warn__box h2 { color: #d81f1f !important; }
.hk-warn__box p, .hk-warn__small { color: #2b2b2b !important; }
.hk-warn__box .hk-btn--ghost { color: #141210 !important; border-color: #141210 !important; }

/* Songsektion: eigene Farben statt der invertierbaren Variablen */
.hk-sec--song { background: #0e0e10 !important; color: #f4f1ea !important; }
.hk-sec--song h2, .hk-sec--song .hk-wobble__w { color: #f4f1ea; }
.hk-sec--song .hk-lead, .hk-sec--song .hk-song__more { color: #f4f1ea !important; }
.hk-sec--song .hk-fineprint { color: rgba(244,241,234,.7) !important; }
.hk-sec--song .hk-btn--ghost { color: #f4f1ea !important; border-color: #f4f1ea !important;
  box-shadow: 4px 4px 0 rgba(244,241,234,.35); }
.hk-song__more { font-weight: 800; margin: 1.4rem 0 .6rem; }

/* Fussbereich ebenso */
.hk-foot { background: #0e0e10 !important; color: #f4f1ea !important; }
.hk-foot .hk-logo { color: #f4f1ea; }
.hk-foot__big span { color: var(--hk-signal); }
.hk-foot .hk-btn--ghost { color: #f4f1ea !important; border-color: #f4f1ea !important; }

/* Farbige Sektionen im Nachtmodus */
body.hk-chaos-2 .hk-sec--ig,
body.hk-chaos-2 .hk-sec--love { color: #f2efe8; }
body.hk-chaos-2 .hk-sec--irre { background: #1d1a10; }
body.hk-chaos-2 .hk-sec--coffee,
body.hk-chaos-2 .hk-sec--news,
body.hk-chaos-2 .hk-sec--fotos,
body.hk-chaos-2 .hk-sec--cats,
body.hk-chaos-2 .hk-sec--moto,
body.hk-chaos-2 .hk-sec--stuff { background: #14161a; color: #f2efe8; }
body.hk-chaos-2 .hk-shopcta { background: #b06d00; }
body.hk-chaos-2 .hk-shopcta__t, body.hk-chaos-2 .hk-shopcta p { color: #fff; }
body.hk-chaos-2 .hk-bizcta { background: #8a7200; }
body.hk-chaos-2 .hk-bizcta__t { color: #fff; }
body.hk-chaos-2 .hk-soon { color: #141210; }

/* Stufe 3: Buchstaben dürfen weghauen, aber müssen lesbar bleiben */
body.hk-chaos-3 .hk-wobble__w {
  animation: hk-escape 6s cubic-bezier(.68,-.4,.27,1.4) infinite;
  animation-delay: calc(var(--i) * .17s);
}
@keyframes hk-escape {
  0%, 62%, 100% { transform: translate(0,0) rotate(0) scale(1); opacity: 1; }
  22%           { transform: translate(-22px,-14px) rotate(-14deg) scale(.88); opacity: .85; }
  42%           { transform: translate(18px,10px) rotate(11deg) scale(1.1); opacity: .95; }
}
body.hk-chaos-3 .hk-wobble__w:nth-child(3n) { color: var(--hk-kekzi); }
body.hk-chaos-3 .hk-wobble__w:nth-child(5n) { color: var(--hk-kaffee); }
body.hk-chaos-3 .hk-wobble { line-height: 1.25; }
/* Auf farbigem Grund keine Farbwörter, sonst verschwinden sie */
body.hk-chaos-3 .hk-sec--games .hk-wobble__w,
body.hk-chaos-3 .hk-sec--ig .hk-wobble__w,
body.hk-chaos-3 .hk-sec--irre .hk-wobble__w { color: #141210 !important; }

/* =========================================================================
   PLATTFORM-KACHELN – mit Logo und Leben
   ====================================================================== */

.hk-channels { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; }
.hk-channel {
  position: relative; overflow: hidden;
  gap: .35rem; padding: 1.5rem 1.3rem;
}
.hk-channel__top { display: flex; align-items: center; gap: .7rem; width: 100%; }
.hk-channel__ico { width: 30px; height: 30px; flex: 0 0 auto; }
.hk-channel__ico svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.hk-channel__num { margin-left: auto; font-size: .8rem; font-weight: 800; opacity: .9;
  padding: .15rem .5rem; border-radius: 999px; background: rgba(255,255,255,.22); }
.hk-channel::after {
  content: "→"; position: absolute; right: 1rem; bottom: .9rem;
  font-size: 1.3rem; font-weight: 800;
  transform: translateX(-6px); opacity: 0; transition: .2s;
}
.hk-channel:hover::after { transform: translateX(0); opacity: 1; }
.hk-channel:hover { transform: translate(-4px,-4px) rotate(-1deg); }
.hk-channel__glow {
  position: absolute; inset: auto -30% -60% auto; width: 180px; height: 180px;
  background: rgba(255,255,255,.18); border-radius: 50%;
  transition: transform .35s ease;
}
.hk-channel:hover .hk-channel__glow { transform: scale(1.6); }

/* Buttons mit Plattform-Logo */
.hk-btn__ico { width: 19px; height: 19px; flex: 0 0 auto; }
.hk-btn__ico svg { width: 100%; height: 100%; fill: currentColor; display: block; }

/* Amazon-Block: Karikatur rennt durch */
.hk-shopcta { position: relative; overflow: hidden; }
.hk-shoprun {
  position: absolute; left: -240px; bottom: 6px; width: 190px;
  pointer-events: none; animation: hk-shoprun 9s linear infinite;
}
.hk-shoprun img { width: 100%; height: auto; }
@keyframes hk-shoprun {
  0%   { transform: translateX(0); }
  55%  { transform: translateX(calc(100% + 100vw)); }
  100% { transform: translateX(calc(100% + 100vw)); }
}
body.hk-chaos-1 .hk-shoprun { animation-duration: 14s; }

/* Markenlogos sichtbar machen */
.hk-brand-card {
  background: #fff; position: relative;
}
.hk-brand-card__logo {
  display: grid; place-items: center; width: 100%; min-height: 70px;
  padding: .5rem .8rem; border-radius: 10px;
  background: #f3f1ec;
  box-shadow: inset 0 0 0 2px rgba(20,18,16,.12);
}
body.hk-chaos-2 .hk-brand-card__logo { background: #2a2f38; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
body.hk-chaos-2 .hk-brand-card__logo img { filter: brightness(1.9) contrast(1.1); }
.hk-brand-card__logo img { max-height: 56px; width: auto; }
.hk-brand-card__logo .hk-tm { height: 46px; }

/* Tierbilder über den Katzenkarten */
.hk-petrow { display: flex; align-items: flex-end; justify-content: center; gap: 2rem;
  flex-wrap: wrap; margin: 1.5rem 0 .5rem; }
.hk-petrow .hk-cast--duo { max-width: 430px; }
.hk-petrow .hk-cast--sm { max-width: 190px; }
.hk-catcard { cursor: pointer; }

/* =========================================================================
   KORREKTUREN v1.4
   ====================================================================== */

/* Laufband läuft auch in Stufe 1, nur gemächlicher */
body.hk-chaos-1 .hk-ticker__track { animation: hk-marq 58s linear infinite !important; }

/* Kanalkacheln behalten IMMER ihre Markenfarbe */
.hk-channel--yt { background: #ff0033 !important; color: #fff !important; border-color: #141210; }
.hk-channel--ig { background: linear-gradient(45deg,#f9ce34,#ee2a7b 45%,#6228d7) !important; color: #fff !important; }
.hk-channel--tt { background: #010101 !important; color: #fff !important; }
.hk-channel--tw { background: #9146ff !important; color: #fff !important; }
.hk-channel--wa { background: #25d366 !important; color: #06301a !important; }
body.hk-chaos-2 .hk-channel { border-color: #f2efe8; box-shadow: 6px 6px 0 #000; }
.hk-channel__num { background: rgba(0,0,0,.28); }
.hk-channel--wa .hk-channel__num { background: rgba(255,255,255,.4); }

/* Buttons im Nachtmodus: Markenfarben durchsetzen */
body.hk-chaos-2 .hk-btn--yt { --btn-bg: #ff0033 !important; color: #fff !important; }
body.hk-chaos-2 .hk-btn--ig { --btn-bg: #ee2a7b !important; color: #fff !important; }
body.hk-chaos-2 .hk-btn--tt { --btn-bg: #010101 !important; color: #fff !important; border-color: #f2efe8; }
body.hk-chaos-2 .hk-btn--tw { --btn-bg: #9146ff !important; color: #fff !important; }
body.hk-chaos-2 .hk-btn--wa { --btn-bg: #25d366 !important; color: #06301a !important; }
body.hk-chaos-2 .hk-btn--am { --btn-bg: #ff9900 !important; color: #1a1a1a !important; }
body.hk-chaos-2 .hk-btn--signal { --btn-bg: var(--hk-signal) !important; color: #141210 !important; }

/* Spiele-Reiter im Nachtmodus lesbar */
body.hk-chaos-2 .hk-gametab { background: #2a2f38; color: #f2efe8; border-color: #f2efe8; }
body.hk-chaos-2 .hk-gametab.is-on { background: var(--hk-signal); color: #141210; }
body.hk-chaos-2 .hk-game__bar { color: #f2efe8; }
body.hk-chaos-2 .hk-quiz__a { background: #1c2027; color: #f2efe8; border-color: #f2efe8; }
body.hk-chaos-2 .hk-quiz__note { color: #141210; }
body.hk-chaos-2 .hk-soon,
body.hk-chaos-2 .hk-kicker--signal,
body.hk-chaos-2 .hk-kicker--hatzi { color: #141210; }

/* Songbutton im Header */
.hk-headsong {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .8rem;
  background: var(--hk-signal); color: #141210;
  border: 3px solid var(--hk-ink); border-radius: 999px;
  cursor: pointer; font-weight: 800; font-size: .85rem;
}
.hk-headsong:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--hk-ink); }
.hk-headsong__bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.hk-headsong__bars i { width: 3px; height: 4px; background: #141210; display: block; }
.hk-headsong.is-playing .hk-headsong__bars i { animation: hk-eq .7s ease-in-out infinite alternate; }
.hk-headsong.is-playing .hk-headsong__bars i:nth-child(2) { animation-delay: .12s; }
.hk-headsong.is-playing .hk-headsong__bars i:nth-child(3) { animation-delay: .24s; }
.hk-headsong.is-playing .hk-headsong__bars i:nth-child(4) { animation-delay: .06s; }

/* Tierkarten mit echten Bildern */
.hk-catcard__img { display: block; width: 100%; }
.hk-catcard__img img {
  width: 100%; max-width: 150px; height: auto; margin: 0 auto .5rem;
  filter: drop-shadow(4px 5px 0 rgba(20,18,16,.14));
}
.hk-catrow { grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }

/* Verfolgungsjagd: größer und deutlicher */
.hk-runner { width: var(--rw, 260px); }
.hk-runner img { filter: drop-shadow(6px 8px 0 rgba(0,0,0,.25)); }

@media (max-width: 860px) {
  .hk-headsong { display: none; }
  .hk-catrow { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   v1.5 – Läufer, Banner, Regler-Hinweis
   ====================================================================== */

/* ---------------------------------------------------- VERFOLGUNGSJAGD */
/* Verteilt über die ganze Seite, nicht im Footer. Nacheinander, nicht alle
   gleichzeitig – das steuert das JavaScript. */

.hk-runner {
  position: fixed; left: -420px; top: auto; z-index: 92;
  width: var(--rw, 300px); pointer-events: auto; cursor: pointer;
  animation: hk-dash var(--rdur, 6s) linear forwards;
  will-change: transform;
}
.hk-runner img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(8px 10px 12px rgba(0,0,0,.35));
  animation: hk-bounce .3s ease-in-out infinite alternate;
}
/* Standard: Vorlage schaut nach links, läuft also nach links */
@keyframes hk-dash {
  from { transform: translateX(calc(100vw + 460px)); }
  to   { transform: translateX(0); }
}
/* Gespiegelt: läuft nach rechts */
.hk-runner.is-flip { animation-name: hk-dash-r; }
.hk-runner.is-flip img { transform: scaleX(-1); animation-name: hk-bounce-flip; }
@keyframes hk-dash-r {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 460px)); }
}
@keyframes hk-bounce { to { translate: 0 -10px; } }
@keyframes hk-bounce-flip { from { transform: scaleX(-1) translateY(0); } to { transform: scaleX(-1) translateY(-10px); } }

/* Frontal: kommt aus der Tiefe direkt auf den Besucher zu */
.hk-runner--front {
  left: auto; width: auto;
  animation: hk-comein var(--rdur, 4s) cubic-bezier(.4,0,.9,1) forwards;
}
.hk-runner--front img { width: 420px; max-width: 60vw; }
@keyframes hk-comein {
  from { transform: scale(.06) translateY(30px); opacity: 0; }
  15%  { opacity: 1; }
  to   { transform: scale(1.5) translateY(-40px); opacity: 0; }
}
.hk-runner.is-caught { animation-play-state: paused; }
.hk-runner.is-caught img { transform: scale(1.2) rotate(8deg); transition: transform .3s; }

/* --------------------------------------------------- AMAZON-BANNER */

.hk-shopcta {
  position: relative; overflow: hidden;
  display: block; padding: 0;
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(135deg, #ffb340, #ff9900 55%, #f08800);
  border: var(--hk-line) solid var(--hk-ink);
  border-radius: var(--hk-radius);
  box-shadow: var(--hk-shadow);
}
.hk-shopcta::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 14px, transparent 14px 28px);
  pointer-events: none;
}
.hk-shopcta__in {
  position: relative; z-index: 2;
  max-width: 640px;
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.hk-shopcta__badge {
  display: inline-grid; place-items: center;
  width: 62px; height: 62px; margin-bottom: .9rem;
  background: #111; border-radius: 16px;
  border: 3px solid var(--hk-ink);
}
.hk-shopcta__badge svg { width: 40px; height: 40px; fill: #ff9900; }
.hk-shopcta__t {
  font-family: var(--hk-f-display); color: #1a1a1a;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem); line-height: 1.05; margin: 0 0 .6rem;
}
.hk-shopcta__s { color: #2a1c05; margin: 0 0 1.4rem; max-width: 52ch; font-weight: 500; }
.hk-shopcta__btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1.05rem 2rem;
  background: #111; color: #fff; text-decoration: none;
  border: 4px solid var(--hk-ink); border-radius: 999px;
  font-weight: 900; font-size: 1.1rem;
  box-shadow: 6px 6px 0 rgba(0,0,0,.45);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.hk-shopcta__btn svg { fill: #ff9900; }
.hk-shopcta__btn:hover { transform: translate(-3px,-3px); box-shadow: 10px 10px 0 rgba(0,0,0,.5); background: #000; }
.hk-shopcta__arrow { transition: transform .15s ease; }
.hk-shopcta__btn:hover .hk-shopcta__arrow { transform: translateX(5px); }
body:not(.hk-chaos-1) .hk-shopcta__btn { animation: hk-pulse 2.6s ease-in-out infinite; }
@keyframes hk-pulse {
  0%,100% { box-shadow: 6px 6px 0 rgba(0,0,0,.45); }
  50%     { box-shadow: 6px 6px 0 rgba(0,0,0,.45), 0 0 0 12px rgba(255,255,255,.22); }
}

/* Einkaufswagen fährt quer durch den ganzen Banner */
.hk-shopcta__run {
  position: absolute; right: -30%; bottom: -6%;
  width: min(46%, 420px); z-index: 1; pointer-events: none;
  animation: hk-cart 13s cubic-bezier(.45,0,.55,1) infinite;
}
.hk-shopcta__run img { width: 100%; height: auto; filter: drop-shadow(6px 8px 0 rgba(0,0,0,.18)); }
@keyframes hk-cart {
  0%      { transform: translateX(0) rotate(0); opacity: 0; }
  6%      { opacity: 1; }
  55%     { transform: translateX(-165%) rotate(-2deg); opacity: 1; }
  62%,100%{ transform: translateX(-185%) rotate(0); opacity: 0; }
}
body.hk-chaos-1 .hk-shopcta__run { animation-duration: 20s; }
@media (max-width: 860px) {
  .hk-shopcta__run { position: relative; right: auto; bottom: auto; width: 70%;
    margin: 1rem auto -1rem; animation: none; opacity: 1 !important; transform: none !important; }
  .hk-shopcta__in { max-width: none; }
}

/* ------------------------------------------------- MEDIAKIT-BANNER */

.hk-bizcta {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center; gap: 2rem;
  background: linear-gradient(135deg, #ffe14d, var(--hk-signal) 60%, #f5c400);
}
.hk-bizcta .hk-cast--sm { max-width: 170px; }
.hk-bizcta__txt { text-align: center; }
.hk-bizcta__t { font-family: var(--hk-f-display); color: #141210;
  font-size: clamp(1.4rem,3.2vw,2.2rem); line-height: 1.05; margin: 0 0 .5rem; }
.hk-bizcta__s { color: #33290a; margin: 0 auto 1.3rem; max-width: 46ch; font-weight: 500; }
.hk-bizcta__btn { --btn-bg: #141210; color: #fff !important; border-color: #141210 !important; }
.hk-bizcta__btn:hover { --btn-bg: #000; }
@media (max-width: 1080px) {
  .hk-bizcta { grid-template-columns: 1fr; justify-items: center; }
  .hk-bizcta__second { display: none; }
}

/* --------------------------------------------- HINWEIS AUF DEN REGLER */

.hk-chaos.is-hinting {
  animation: hk-hint 1.1s ease-in-out 6;
  box-shadow: 0 0 0 0 var(--hk-kekzi);
}
@keyframes hk-hint {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,46,136,.7); }
  50%     { transform: scale(1.07); box-shadow: 0 0 0 12px rgba(255,46,136,0); }
}
.hk-chaos.is-hinting .hk-chaos__b--danger { background: var(--hk-kekzi); color: #fff; }
.hk-chaos.is-hinting::after {
  content: "↑"; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); font-size: 1.4rem; font-weight: 900;
  color: var(--hk-kekzi); animation: hk-hintarrow 1s ease-in-out infinite;
}
.hk-chaos { position: relative; }
@keyframes hk-hintarrow { 0%,100% { translate: -50% 0; } 50% { translate: -50% -6px; } }