/* Uebernahme-Inszenierung (19.10.2026): Logik static/blog-hack.js, Texte data/slogans.json */
.hk { position: fixed; z-index: 2147483000; font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace; cursor: pointer;
  transition: opacity .5s, transform .5s; }
.hk.hk-weg { opacity: 0; }
.hk-kopfzeile { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #ff3b3b; margin-bottom: 8px; }
.hk-kopfzeile::before { content: "● "; animation: hk-blink 1s steps(1) infinite; }
.hk-tipp { color: #39ff7a; font-size: clamp(17px, 1.7vw, 22px); line-height: 1.45; font-weight: 600; white-space: pre-wrap; }
.hk-tipp::after { content: "▍"; animation: hk-blink 1s steps(1) infinite; }
@keyframes hk-blink { 50% { opacity: 0; } }

/* oben: Terminal faellt herein */
.hk-oben { left: 50%; top: 0; width: min(760px, calc(100% - 24px)); transform: translate(-50%, 0); padding: 18px 22px 22px;
  background: rgba(6,8,6,.96); border: 1px solid #1f6b3a; border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 18px 50px rgba(0,0,0,.6);
  animation: hk-fall .55s cubic-bezier(.2,1.5,.4,1) both; }
.hk-oben.hk-weg { transform: translate(-50%, -110%); }
@keyframes hk-fall { from { transform: translate(-50%, -120%); } }

/* unten: Chatnachricht */
.hk-unten { right: 18px; bottom: 18px; width: min(380px, calc(100% - 36px)); font-family: Raleway, system-ui, sans-serif;
  animation: hk-hoch .5s cubic-bezier(.2,1.4,.4,1) both; }
.hk-unten.hk-weg { transform: translateY(40px); }
.hk-absender { font-size: 12px; color: #fff; background: #c8102e; display: inline-block; padding: 3px 10px; border-radius: 10px 10px 10px 0; margin-bottom: 6px; }
.hk-blase { background: #111; color: #fff; font-size: 18px; line-height: 1.4; font-weight: 700; padding: 16px 18px; border-radius: 4px 16px 16px 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5); border-left: 5px solid #c8102e; min-height: 56px; }
.hk-punkte { letter-spacing: 4px; animation: hk-blink .8s steps(1) infinite; }
@keyframes hk-hoch { from { transform: translateY(120%); } }

/* links / rechts: Konsole schiebt sich ueber den Text */
.hk-seite { top: 0; bottom: 0; width: min(440px, 88vw); padding: 90px 28px 28px; background: rgba(4,6,4,.95); box-shadow: 0 0 60px rgba(0,0,0,.7); }
.hk-links { left: 0; border-right: 2px solid #39ff7a; animation: hk-von-links .5s cubic-bezier(.2,1.3,.4,1) both; }
.hk-rechts { right: 0; border-left: 2px solid #39ff7a; animation: hk-von-rechts .5s cubic-bezier(.2,1.3,.4,1) both; }
.hk-links.hk-weg { transform: translateX(-105%); } .hk-rechts.hk-weg { transform: translateX(105%); }
.hk-seite .hk-tipp { font-size: clamp(20px, 2vw, 26px); }
@keyframes hk-von-links { from { transform: translateX(-105%); } }
@keyframes hk-von-rechts { from { transform: translateX(105%); } }

/* hinten: Seite verblasst, Botschaft dahinter */
html.hk-verblasst .qodef-content, html.hk-verblasst .qodef-title, html.hk-verblasst .blog-seite { transition: opacity .8s, filter .8s; opacity: .08; filter: blur(3px); }
.hk-hinten { inset: 0; display: grid; place-items: center; padding: 24px; background: transparent; animation: hk-ein 1s ease both; }
.hk-riesig { max-width: 18ch; text-align: center; font: 900 clamp(34px, 6vw, 84px)/1.05 Raleway, sans-serif; color: #c8102e; letter-spacing: -.02em; text-wrap: balance; }
@keyframes hk-ein { from { opacity: 0; } }

/* vorne: fliegt aus der Tiefe auf den Leser zu */
.hk-vorne { inset: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle, rgba(0,0,0,.55), rgba(0,0,0,.85)); perspective: 600px; }
.hk-flug { max-width: 16ch; text-align: center; font: 900 clamp(30px, 5.5vw, 76px)/1.05 Raleway, sans-serif; color: #fff; text-shadow: 0 0 30px rgba(255,59,59,.8);
  animation: hk-flug 1.1s cubic-bezier(.15,.9,.3,1.1) both; }
.hk-vorne.hk-weg .hk-flug { transform: scale(3); opacity: 0; transition: transform .6s ease-in, opacity .6s; }
@keyframes hk-flug { from { transform: translateZ(-2400px) rotateX(35deg); opacity: 0; } 60% { opacity: 1; } }

/* mitten im Text: Absatz befallen */
.hk-befallen { color: #c8102e !important; font-family: "JetBrains Mono", Menlo, Consolas, monospace !important; font-weight: 700 !important;
  background: rgba(200,16,46,.07); outline: 2px dashed #c8102e; outline-offset: 6px; cursor: pointer; }

/* kurzes Zucken der ganzen Seite */
html.hk-glitch body { animation: hk-zucken .65s steps(2) both; }
@keyframes hk-zucken {
  0% { transform: translate(0); filter: none; }
  20% { transform: translate(-6px, 2px) skewX(-2deg); filter: drop-shadow(4px 0 0 rgba(255,0,60,.7)) drop-shadow(-4px 0 0 rgba(0,240,255,.7)); }
  40% { transform: translate(5px, -3px); filter: hue-rotate(90deg); }
  60% { transform: translate(-3px, 0) skewX(3deg); filter: drop-shadow(-5px 0 0 rgba(255,0,60,.7)); }
  80% { transform: translate(2px, 2px); filter: invert(.08); }
  100% { transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .hk, .hk-flug, .hk-oben, .hk-unten, .hk-seite { animation: none !important; } html.hk-glitch body { animation: none; } }

/* --- weitere Formen (19.10.2026) --- */
/* Wirbel: Woerter drehen sich aus allen Richtungen herein */
.hk-wirbel { inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(10,10,14,.82); }
.hk-wirbel-satz { max-width: 20ch; text-align: center; font: 900 clamp(28px, 4.8vw, 66px)/1.12 Raleway, sans-serif; color: #fff; }
.hk-wirbel-satz span { display: inline-block; white-space: pre; animation: hk-wirbel 1.2s cubic-bezier(.2,1.1,.3,1) both; }
.hk-wirbel-satz span:nth-child(3n) { color: #ffcf00; } .hk-wirbel-satz span:nth-child(5n) { color: #ff3b3b; }
@keyframes hk-wirbel { from { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.2); opacity: 0; } }
/* Klebeband: Absperrband quer ueber den Bildschirm */
.hk-band { inset: 0; overflow: hidden; background: rgba(0,0,0,.25); }
.hk-band-streifen { position: absolute; left: -30%; right: -30%; top: var(--y); transform: rotate(var(--g)); padding: 28px 0; white-space: nowrap; overflow: hidden;
  background: #ffcf00; color: #111; font: 900 clamp(30px, 4.4vw, 60px)/1 Raleway, sans-serif; text-transform: uppercase; letter-spacing: .03em;
  box-shadow: 0 14px 40px rgba(0,0,0,.55); border-block: 14px solid; border-image: repeating-linear-gradient(-45deg, #111 0 22px, #ffcf00 22px 44px) 14;
  animation: hk-band 1s cubic-bezier(.2,1.2,.3,1) both; }
.hk-band-streifen:nth-child(2) { animation-delay: .25s; background: #ff3b3b; color: #fff; }
@keyframes hk-band { from { transform: rotate(var(--g)) translateX(-120%); } }
/* Matrix: Zeichenregen */
.hk-matrix { inset: 0; background: #000; }
.hk-matrix canvas { position: absolute; inset: 0; }
.hk-matrix-text { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center;
  font: 800 clamp(24px, 3.8vw, 52px)/1.15 "JetBrains Mono", Menlo, monospace; color: #fff; text-shadow: 0 0 18px #39ff7a, 0 0 2px #000; animation: hk-ein 1.2s .8s both; }
/* Steine: Scrabble im Kopf legt eine Warnung */
.hk-stein-neu { background: linear-gradient(155deg, #ffd9d9, #ff9a9a 55%, #e05252) !important; color: #3a0000 !important;
  animation: hk-stein-flip .7s cubic-bezier(.2,1.4,.4,1) both !important; }
@keyframes hk-stein-flip { from { transform: rotateY(180deg) translateY(-30px); opacity: 0; } }
/* Zeiger: fremder Mauszeiger kritzelt den Slogan auf die Seite */
.hk-zeiger { inset: 0; pointer-events: auto; background: rgba(255,255,255,.08); }
.hk-zeiger-pfeil { position: fixed; transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1); filter: drop-shadow(2px 4px 4px rgba(0,0,0,.45)); z-index: 2; }
.hk-kritzel { position: fixed; max-width: min(78vw, 900px); transform: rotate(var(--r)); font: 700 clamp(34px, 4.6vw, 64px)/1.08 Caveat, "Comic Sans MS", cursive;
  color: #e3262c; text-shadow: 0 0 2px #fff, 0 0 10px rgba(255,255,255,.9); }
.hk-strich { position: fixed; height: 20px; overflow: visible; }
.hk-strich path { stroke-dasharray: 520; stroke-dashoffset: 520; }
.hk-strich-zieh path { transition: stroke-dashoffset .8s ease; stroke-dashoffset: 0; }
/* Kreisel: Satz als drehender Ring, Seite dreht leicht mit */
.hk-kreisel { inset: 0; display: grid; place-items: center; background: radial-gradient(circle, rgba(10,10,14,.6), rgba(10,10,14,.92)); }
.hk-ring { position: relative; width: 0; height: 0; animation: hk-kreisen 12s linear infinite; }
.hk-ring span { position: absolute; left: -.32em; top: -.5em; width: .64em; text-align: center; transform-origin: 50% 50%;
  font-family: Raleway, sans-serif; font-weight: 900; font-size: inherit; line-height: 1; color: #ffcf00;
  -webkit-text-stroke: .03em #7a5a00; text-shadow: 0 .04em .12em rgba(0,0,0,.6); }
.hk-ring span:nth-child(odd) { color: #ffd84a; }
.hk-kreisel-satz { position: absolute; left: 50%; bottom: 6vh; transform: translateX(-50%); width: min(720px, 86vw); text-align: center;
  font: 800 clamp(16px, 1.8vw, 24px)/1.3 Raleway, sans-serif; color: #fff; text-shadow: 0 2px 10px #000; }
.hk-kreisel-mitte { position: absolute; font: 900 clamp(60px, 10vw, 140px)/1 Raleway, sans-serif; color: #ff3b3b; animation: hk-puls 1.2s ease-in-out infinite; }
@keyframes hk-kreisen { to { transform: rotate(360deg); } }
@keyframes hk-puls { 50% { transform: scale(1.15); } }
html.hk-leicht-gedreht body { transition: transform 1.2s cubic-bezier(.3,1.4,.5,1); transform: rotate(-3deg) scale(.96); transform-origin: 50% calc(var(--sy, 0px) + 50vh); }
@media (prefers-reduced-motion: reduce) { .hk-ring, .hk-kreisel-mitte, .hk-wirbel-satz span, .hk-band-streifen { animation: none !important; } }
/* Zettel: Post-it klatscht auf den Bildschirm und loest sich wieder */
.hk-zettel { width: clamp(220px, 24vw, 320px); min-height: clamp(200px, 22vw, 290px); padding: 34px 22px 22px; transform: rotate(var(--r));
  box-shadow: 0 18px 28px -10px rgba(0,0,0,.45), inset 0 -18px 30px -24px rgba(0,0,0,.25); border-radius: 2px 2px 22px 2px;
  animation: hk-klatsch .45s cubic-bezier(.3,1.6,.5,1) both; pointer-events: auto; }
.hk-zettel::before { content: ""; position: absolute; left: 50%; top: -10px; width: 90px; height: 24px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.hk-zettel-text { font: 700 clamp(22px, 2.2vw, 30px)/1.15 Caveat, "Comic Sans MS", cursive; color: #1d1d1d; }
.hk-zettel.hk-weg { transform: rotate(calc(var(--r) * 3)) translateY(60vh); opacity: 0; transition: transform .9s ease-in, opacity .9s ease-in; }
@keyframes hk-klatsch { from { transform: rotate(var(--r)) scale(2.4); opacity: 0; } 70% { transform: rotate(var(--r)) scale(.96); opacity: 1; } }
/* Schalter mit Kinderbuchfiguren je Sprache (19.10.2026): Aus · brave Figur · freche Figur */
.hk-schalter { position: fixed; left: 14px; top: 50%; transform: translateY(-50%); z-index: 2147483001; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 4px 6px;
  border-radius: 16px; background: rgba(15,15,18,.9); box-shadow: 0 6px 18px rgba(0,0,0,.4); backdrop-filter: blur(4px); }
.hk-stufe { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; padding: 0; border: 0; background: none; cursor: pointer;
  color: rgba(255,255,255,.7); font: 700 10.5px/1.1 Raleway, sans-serif; }
.hk-stufe img, .hk-stufe svg { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 3px solid transparent; background: #2a2a30;
  filter: grayscale(.85); opacity: .6; transition: filter .2s, opacity .2s, transform .2s, border-color .2s; }

.hk-st-rolle { margin-top: -1px; color: rgba(255,255,255,.5); font-size: 9.5px; font-weight: 600; }
.hk-st-frech .hk-st-rolle { color: #ff8a8a; }
.hk-st-name { max-width: 64px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-stufe:hover img, .hk-stufe:hover svg { filter: none; opacity: 1; transform: scale(1.06); }
.hk-stufe.hk-an { color: #fff; }
.hk-stufe.hk-an img, .hk-stufe.hk-an svg { filter: none; opacity: 1; transform: scale(1.1); }
.hk-st-aus.hk-an img { border-color: #f0c040; } .hk-st-brav.hk-an img { border-color: #4aa3f0; } .hk-st-frech.hk-an img { border-color: #e3262c; }
.hk-sch-neu .hk-st-frech img { animation: hk-lock 1.4s ease-in-out infinite; }
@keyframes hk-lock { 50% { box-shadow: 0 0 0 7px rgba(227,38,44,.45); } }
/* Erklaerung beim ersten Besuch */
.hk-sch-tipp { position: fixed; left: 104px; top: 50%; transform: translateY(-50%); animation: none !important; z-index: 2147483001; width: min(360px, calc(100vw - 28px)); padding: 16px 18px 14px;
  border-radius: 14px; background: #fff; color: #1a1a1a; box-shadow: 0 16px 40px rgba(0,0,0,.4); border: 3px solid #e3262c;
  font: 400 14px/1.45 Raleway, sans-serif; animation: hk-hoch .5s cubic-bezier(.2,1.4,.4,1) both; }
.hk-sch-tipp::before { content: ""; position: absolute; left: -14px; top: 50%; margin-top: -11px; border: 11px solid transparent; border-right: 14px solid #e3262c; border-left: 0; }
.hk-sch-tipp b { display: block; font: 800 17px/1.25 Raleway, sans-serif; margin-bottom: 4px; }
.hk-sch-tipp p { margin: 0 0 8px; }
.hk-sch-tipp ul { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 4px; }
.hk-sch-tipp li { padding-left: 14px; position: relative; }
.hk-sch-tipp li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #bbb; }
.hk-sch-tipp li.hk-tl-aus::before { background: #f0c040; } .hk-sch-tipp li.hk-tl-brav::before { background: #4aa3f0; } .hk-sch-tipp li.hk-tl-frech::before { background: #e3262c; }
.hk-tipp-ok { border: 0; border-radius: 999px; padding: 8px 16px; background: #1a1a1a; color: #fff; font: 800 13px Raleway, sans-serif; cursor: pointer; }
@media (max-width: 768px) {
  .hk-schalter { left: 6px; top: auto; bottom: 70px; transform: none; gap: 6px; padding: 6px 2px 4px; }
  .hk-stufe { width: 50px; font-size: 9.5px; } .hk-stufe img, .hk-stufe svg { width: 36px; height: 36px; }
  .hk-sch-tipp { left: 70px; top: auto; bottom: 70px; transform: none; width: calc(100vw - 80px); box-sizing: border-box; padding: 12px 14px; }
  .hk-sch-tipp::before { top: auto; bottom: 40px; margin-top: 0; }
}
  .hk-stufe { padding: 8px 11px; font-size: 12.5px; } }
/* Gewaehlte Stufe unverwechselbar (Nutzer 19.10.2026: "sehr deutlich sehen, wen ich angeklickt habe") */
.hk-stufe { position: relative; padding: 4px 0 5px; border-radius: 12px; transition: background .2s; }
.hk-stufe:not(.hk-an) img { opacity: .35; filter: grayscale(1); transform: scale(.88); }
.hk-stufe:not(.hk-an) .hk-st-name { opacity: .55; }
.hk-stufe.hk-an { background: rgba(255,255,255,.12); }
.hk-stufe.hk-an img { border-width: 4px; transform: scale(1.12); }
.hk-stufe.hk-an .hk-st-name { padding: 2px 6px; border-radius: 999px; color: #111; font-weight: 800; }
.hk-st-aus.hk-an .hk-st-name { background: #f0c040; } .hk-st-brav.hk-an .hk-st-name { background: #4aa3f0; } .hk-st-frech.hk-an .hk-st-name { background: #e3262c; color: #fff; }
.hk-stufe.hk-an::after { content: "✓"; position: absolute; right: 2px; top: 0; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #111; font: 900 12px/1 Raleway, sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.hk-stufe { width: 80px; } .hk-st-name { max-width: 80px; overflow: visible; text-overflow: clip; }
@media (max-width: 768px) { .hk-stufe { width: 66px; } .hk-st-name { max-width: 66px; font-size: 9px; } }
.hk-schalter .hk-stufe { position: relative !important; }
/* Immer oben links, auf allen Geraeten (Nutzer 19.10.2026) */
.hk-schalter { top: 12px !important; bottom: auto !important; left: 12px !important; transform: none !important; }
.hk-sch-tipp { top: 12px !important; bottom: auto !important; left: 112px !important; transform: none !important; }
.hk-sch-tipp::before { top: 40px !important; bottom: auto !important; left: -14px !important; margin-top: 0 !important;
  border: 11px solid transparent !important; border-right: 14px solid #e3262c !important; border-left: 0 !important; }
@media (max-width: 768px) {
  .hk-schalter { top: 76px !important; left: 6px !important; }
  .hk-sch-tipp { top: 76px !important; left: 86px !important; width: calc(100vw - 96px) !important; }
}
/* Linke Einblendungen beginnen unter den drei Avataren (Nutzer 19.10.2026) */
.hk-links { top: 330px !important; border-top: 2px solid #39ff7a; border-radius: 0 12px 0 0; }
@media (max-width: 768px) { .hk-links { top: 380px !important; } }

/* Avatare kleiner (Nutzer 19.10.2026: "die sind schon riesig") */
.hk-schalter { gap: 4px !important; padding: 5px 3px 4px !important; border-radius: 12px !important; }
.hk-stufe { width: 62px !important; padding: 3px 0 4px !important; }
.hk-stufe img { width: 32px !important; height: 32px !important; border-width: 2px !important; }
.hk-stufe.hk-an img { border-width: 3px !important; }
.hk-st-name { font-size: 9.5px !important; max-width: 62px !important; }
.hk-stufe.hk-an::after { width: 14px; height: 14px; font-size: 9px; right: 4px; }
.hk-sch-tipp { left: 84px !important; }
.hk-links { top: 250px !important; }
@media (max-width: 768px) { .hk-stufe { width: 54px !important; } .hk-stufe img { width: 28px !important; height: 28px !important; }
  .hk-st-name { font-size: 8.5px !important; } .hk-sch-tipp { left: 70px !important; width: calc(100vw - 80px) !important; } .hk-links { top: 300px !important; } }
/* Griff zum Verschieben des Schalters (19.10.2026) */
.hk-griff { width: 100%; height: 12px; margin: -2px 0 2px; cursor: grab; touch-action: none; border-radius: 6px;
  background: radial-gradient(circle, rgba(255,255,255,.55) 1.4px, transparent 1.6px) center / 7px 6px repeat-x; }
.hk-griff:active { cursor: grabbing; background-color: rgba(255,255,255,.1); }
/* Beim Runterscrollen weg, beim Hochscrollen da: sanft ein- und ausblenden (Nutzer 20.10.2026; Verzoegerung 1 s im Skript) */
.hk-schalter { transition: opacity .7s ease, visibility 0s linear 0s; }
.hk-schalter.hk-sch-weg { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .7s ease, visibility 0s linear .7s; }
/* Natel: Avatare 36 px (Nutzer 19.10.2026) */
@media (max-width: 768px) { .hk-stufe { width: 60px !important; } .hk-stufe img { width: 36px !important; height: 36px !important; }
  .hk-st-name { font-size: 9.5px !important; max-width: 60px !important; } .hk-sch-tipp { left: 76px !important; width: calc(100vw - 86px) !important; }
  .hk-links { top: 340px !important; } }

/* Rechts-nach-links (ar, iw): Aufzaehlungspunkte rechts */
.hk-sch-tipp[dir="rtl"] li { padding-left: 0; padding-right: 14px; }
.hk-sch-tipp[dir="rtl"] li::before { left: auto; right: 0; }
.hk-sch-tipp[dir="rtl"] { text-align: right; }

/* Fragezeichen oben im Kasten statt Punktlinie (19.10.2026): oeffnet die Erklaerung, ziehen verschiebt */
.hk-griff.hk-frage { display: grid; place-items: center; width: 26px; height: 26px; margin: 0 auto 4px; padding: 0; border: 2px solid rgba(255,255,255,.85);
  border-radius: 50%; background: #e3262c; color: #fff; font: 900 15px/1 Raleway, sans-serif; cursor: pointer; touch-action: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.4); animation: hk-frage 2.4s ease-in-out infinite; }
.hk-griff.hk-frage:hover { background: #ff3b42; }
@keyframes hk-frage { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.18) rotate(-8deg); } 90% { transform: scale(1.1) rotate(6deg); } }
.hk-sch-tipp.hk-tipp-links::before { left: auto !important; right: -14px !important; border-right: 0 !important; border-left: 14px solid #e3262c !important; }
@media (prefers-reduced-motion: reduce) { .hk-griff.hk-frage { animation: none; } }
/* Absperrband mit KI-Bezug: darunter ein Slogan in Klartext */
.hk-band-satz { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); width: min(720px, 88vw); padding: 14px 18px; border-radius: 10px;
  background: rgba(0,0,0,.82); color: #fff; text-align: center; font: 800 clamp(16px, 1.9vw, 24px)/1.3 Raleway, sans-serif; animation: hk-ein .5s .6s both; }

/* Eingeklappt (Nutzer 20.10.2026): Fragezeichen und gewaehlte Figur; Figuren fahren weich ein und aus */
.hk-schalter .hk-stufe { max-height: 90px; overflow: hidden; transition: max-height .45s ease, width .45s ease, opacity .3s ease, margin .45s ease; }
/* eingeklappt bleibt die gewaehlte Figur sichtbar (Geniesser als Standard), die beiden anderen fahren ein */
.hk-schalter.hk-zu .hk-stufe:not(.hk-an) { max-height: 0; padding: 0 !important; opacity: 0; margin-top: -4px; pointer-events: none; }
.hk-schalter.hk-zu .hk-stufe.hk-an { padding-bottom: 0 !important; }
.hk-schalter.hk-zu { padding-bottom: 5px !important; }
@media (prefers-reduced-motion: reduce) { .hk-schalter .hk-stufe { transition: none; } }

/* Nicht gewaehlte Figuren rund 20 % heller (Nutzer 20.10.2026: "fast gar nicht zu sehen") */
.hk-schalter .hk-stufe:not(.hk-an) { color: rgba(255,255,255,.86) !important; }
.hk-schalter .hk-stufe:not(.hk-an) img, .hk-schalter .hk-stufe:not(.hk-an) svg { opacity: .75 !important; filter: grayscale(.85) brightness(1.2) !important; }
.hk-schalter .hk-stufe:not(.hk-an):hover img, .hk-schalter .hk-stufe:not(.hk-an):hover svg { opacity: 1 !important; filter: none !important; }