/* AK86 2026 – Easter Eggs (eggs.js) */
@font-face { font-family: 'AK86 Pixel'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ak86-pixel.ttf') format('truetype'); }
/* AK86-Modus: eigene Pixelschrift, verpixelte Bilder, Zeilen wie auf einem alten Schirm, grobes Licht (lichtlayer.js).
   Farben wie die alte Seite (03.11.: „helles grau eigentlich als hintergrund … andere grautöne und ein hässlicher rot ton“). Die Originalwerte sind nicht mehr auffindbar, also nach Augenmaß. Folgt dem Dark/Light-Schalter (03.11.: „kann der ak86 mode auch in dark und light sein?“): hell hellgrau, dunkel dunkelgrau wie das alte Logo-Bild */
html.retro { --static-maincolor: #c93a22; --static-maincolor-rgb: 201,58,34; --main: #c93a22; }
html.retro.lightmode { --bgcolor: #d2d2d0; --bgcolor-rgb: 210,210,208; --textcolor: #484846; --gridcolor: #484846; --gridcolor-rgb: 72,72,70; --surface: #c6c6c4; --surface-0: #dcdcda; --surface-1: #d6d6d4; --surface-2: #cdcdcb; --surface-3: #c6c6c4; --surface-4: #bfbfbd; --surface-5: #b8b8b6; --surface-6: #a8a8a6; --surface-7: #989896; --job-bg: rgba(210,210,208,.8); --job-bg-hover: rgba(198,198,196,.9); --lightbox-bg: rgba(210,210,208,.95); --static-ink: #484846; }
html.retro.darkmode { --bgcolor: #484846; --bgcolor-rgb: 72,72,70; --textcolor: #ececea; --gridcolor: #ececea; --gridcolor-rgb: 236,236,234; --surface: #525250; --surface-0: #3e3e3c; --surface-1: #444442; --surface-2: #4c4c4a; --surface-3: #525250; --surface-4: #585856; --surface-5: #5e5e5c; --surface-6: #6c6c6a; --surface-7: #7a7a78; --job-bg: rgba(72,72,70,.8); --job-bg-hover: rgba(88,88,86,.9); --lightbox-bg: rgba(62,62,60,.95); }
html.retro { --f-body: 'AK86 Pixel', monospace; --f-ext: 'AK86 Pixel', monospace; --f-mono: 'AK86 Pixel', monospace; }
html.retro body, html.retro body * { font-family: 'AK86 Pixel', monospace !important; font-stretch: normal !important; font-weight: 400 !important; letter-spacing: 0 !important; -webkit-font-smoothing: none; text-shadow: none !important; }
html.retro body { text-transform: uppercase; }
html.retro p, html.retro li, html.retro dd { line-height: 1.5 !important; }
html.retro img, html.retro .face, html.retro .tm-ss i { filter: url(#eggPix) !important; }
html.retro body::after { content: ''; position: fixed; inset: 0; z-index: 9990; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px); }
html.retro .zk { background: rgba(var(--gridcolor-rgb),.35); }
/* Altes Logo. Das Band oben ohne Differenz-Mischung, das Rot soll rot bleiben */
html.retro .nav { mix-blend-mode: normal; color: var(--textcolor); }
.egg-logo { display: none; }
html.retro .ak-logo svg { display: none; }
html.retro .egg-logo { display: block; color: var(--textcolor); font-size: 19px; line-height: 1; white-space: nowrap; text-transform: none; }
html.retro .egg-logo > span { display: block; }
html.retro .egg-logo b { color: var(--static-maincolor); }
html.retro .egg-logo .egg-eng { transform: scaleX(.8); transform-origin: 0 50%; }
/* Geek-Modus: grün wie der alte, mit Werten im Licht */
.egg-gk-c { position: fixed; inset: 0; z-index: 59; width: 100%; height: 100%; pointer-events: none; }
.egg-geek { position: fixed; left: 16px; bottom: 16px; z-index: 96; width: 340px; max-width: calc(100vw - 32px); padding: 12px 14px; font: 11px/1.5 'Courier New', monospace; color: #0f0; background: rgba(0,0,0,.88); box-shadow: inset 0 0 0 1px rgba(0,255,0,.3); }
.egg-geek h3 { margin: 0 0 6px; padding-bottom: 4px; font: inherit; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid rgba(0,255,0,.25); }
.egg-geek dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 1px 14px; margin: 0; }
.egg-geek dt { color: #0a0; }
.egg-geek dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.egg-gk-sch { display: flex; gap: 6px; margin-top: 8px; }
.egg-gk-sch button { flex: 1; padding: 3px 0; border: 1px solid rgba(0,255,0,.3); background: none; color: #0a0; font: inherit; font-size: 10px; cursor: pointer; }
.egg-gk-sch button.on { color: #0f0; border-color: #0f0; background: rgba(0,255,0,.12); }
.egg-geek p { margin: 6px 0 0; color: #060; font-size: 10px; text-align: center; }
/* Karla */
.egg-knochen { position: fixed; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; color: var(--textcolor); }
.egg-knochen i { position: absolute; left: 0; top: 0; display: block; will-change: transform; }
.egg-knochen svg { display: block; width: 100%; height: auto; }
/* Klick-Absturz: Streifen verfälschen, was darunter liegt, die Seite wackelt, dann schließt sich das Bild und nur der Cursor bleibt */
.egg-crash { position: fixed; inset: 0; z-index: 9995; overflow: hidden; outline: none; cursor: default; color: #e8e8e6; }
/* Störung: Bildebene für Unschärfe und Kontrast, Zeilen, Spurlinien, Rauschband wie bei einem alten VHS-Band */
.egg-riss { position: absolute; inset: 0; pointer-events: none; -webkit-backdrop-filter: url(#eggRiss); backdrop-filter: url(#eggRiss); }
.egg-bild { position: absolute; inset: 0; pointer-events: none; }
.egg-streifen { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px); }
.egg-streifen i { position: absolute; left: 0; right: 0; display: block; }
/* Eigene Ebene unter dem Absturz, aber über der Seite: Difference kehrt die Seite um. Die Filter darüber erfassen sie mit, Risse und Anaglyphe laufen also auch durch die Bänder */
.egg-diff { position: fixed; inset: 0; z-index: 9990; overflow: hidden; pointer-events: none; mix-blend-mode: difference; }
.egg-diff-b { position: absolute; inset: 0; }
.egg-diff-b i { position: absolute; display: block; }
.egg-d-weiss { background-color: #fff; }
.egg-d-rausch { background-image: var(--egg-rausch); background-size: 160px 80px; image-rendering: pixelated; }
.egg-d-rot { background-color: #BA1424; }
.egg-d-blau { background-color: #50BBB8; }
/* Linien in AK86-Rot und -Blau */
.egg-l-rot { background: #BA1424; box-shadow: 0 0 6px rgba(186,20,36,.8); }
.egg-l-blau { background: #50BBB8; box-shadow: 0 0 6px rgba(80,187,184,.8); }
.egg-spur { position: absolute; left: 0; right: 0; bottom: -7vh; height: 7vh; pointer-events: none; background-image: var(--egg-rausch); background-size: 160px 80px; animation: eggSpur .42s linear infinite; }
.egg-spur2 { height: 4px; bottom: -4px; background: #50BBB8; box-shadow: 0 0 10px #50BBB8; animation-duration: .23s; animation-delay: -.1s; }
.egg-spur3 { height: 6px; bottom: -6px; background: #BA1424; box-shadow: 0 0 10px #BA1424; animation-duration: .31s; animation-direction: reverse; }
@keyframes eggSpur { to { bottom: 112vh; } }
.egg-crash.egg-auf .egg-spur, .egg-roehre.on ~ .egg-spur { display: none; }
html.egg-schuett div.page, html.egg-schuett .nav { text-shadow: calc(var(--es, 0) * -1px) 0 calc(var(--es, 0) * .33px) rgba(255,0,80,.85), calc(var(--es, 0) * 1px) 0 calc(var(--es, 0) * .33px) rgba(0,200,255,.85); }
.egg-zu { position: absolute; left: 0; right: 0; height: 0; background: #050505; }
.egg-zu-o { top: 0; }
.egg-zu-u { bottom: 0; }
/* Röhrenmonitor in AK86-Blau #50BBB8 (04.11.: „könne wir die konsole mehr in unserem blau darstellen?“), Schrift für den Kontrast etwas heller: gewölbte Scheibe, Phosphor, Zeilen, Farbsaum, wandernder Bildlauf, Flackern. Schaltet sich als Linie ein */
.egg-roehre { position: absolute; inset: clamp(8px, 2.4vw, 34px); display: none; overflow: hidden; border-radius: 5% / 7%; background: radial-gradient(ellipse at 50% 45%, #0d3235 0%, #071e21 48%, #020a0c 100%); box-shadow: inset 0 0 clamp(50px, 9vw, 150px) rgba(0,0,0,.95), inset 0 0 3px rgba(80,187,184,.5), 0 0 40px rgba(80,187,184,.14); color: #8fe6e2; animation: eggRoehreAn .55s cubic-bezier(.2,.8,.2,1) both; }
.egg-roehre.on { display: block; }
.egg-roehre::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255,0,60,.035) 0 1px, rgba(0,255,90,.025) 1px 2px, rgba(0,90,255,.035) 2px 3px); }
.egg-roehre::after { content: ''; position: absolute; left: 0; right: 0; top: -30%; z-index: 3; height: 26%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(110,215,212,.075) 55%, rgba(165,232,229,.13) 92%, transparent); animation: eggBildlauf 5.5s linear infinite; }
@keyframes eggRoehreAn { 0% { transform: scale(1, .004); filter: brightness(6); opacity: 1; } 55% { transform: scale(1, .004); filter: brightness(6); } 78% { transform: scale(1, 1.03); filter: brightness(2.2); } 100% { transform: none; filter: none; } }
@keyframes eggBildlauf { to { top: 110%; } }
@keyframes eggFlackern { 0%, 100% { opacity: 1; transform: none; } 7% { opacity: .93; } 8% { opacity: 1; } 41% { opacity: .97; } 62% { transform: none; } 62.5% { transform: translateX(3px) skewX(-1.2deg); opacity: .84; } 63.5% { transform: translateX(-1px); opacity: 1; } 64% { transform: none; } 88% { opacity: .95; } }
.egg-kom { position: relative; z-index: 1; display: none; box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: clamp(26px, 7vh, 80px) clamp(22px, 7vw, 110px); overflow: hidden; font: 400 clamp(16px, 2.2vw, 36px)/1.5 var(--f-mono); white-space: pre-wrap; letter-spacing: .02em; text-shadow: 0 0 5px rgba(80,187,184,.85), 0 0 20px rgba(80,187,184,.38), 1.5px 0 0 rgba(255,0,70,.24), -1.5px 0 0 rgba(0,190,255,.24); animation: eggFlackern 4.3s steps(1) infinite; }
.egg-kom.on { display: block; }
.egg-txt:empty { display: none; }
.egg-blink { display: inline-block; width: .62em; height: 1.1em; margin-left: .15em; vertical-align: -.2em; background: currentColor; animation: eggBlink 1s steps(1) infinite; }
@keyframes eggBlink { 50% { opacity: 0; } }
.egg-wahl button { padding: 0 .15em; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.egg-wahl button { text-shadow: inherit; }
.egg-wahl button:hover, .egg-wahl button:focus-visible { background: #8fe6e2; color: #031517; text-shadow: none; outline: none; }
.egg-blink { box-shadow: 0 0 8px rgba(80,187,184,.8); }
@media (prefers-reduced-motion: reduce) { .egg-roehre, .egg-roehre::after, .egg-kom { animation: none; } }
@media (prefers-reduced-motion: reduce) { .egg-blink { animation: none; } }
/* Lui */
.egg-lui, .egg-karla, .egg-vogel, .egg-maus { position: fixed; left: 0; top: 0; z-index: 61; pointer-events: none; color: var(--textcolor); will-change: transform; }
.egg-lui { width: 72px; }
.egg-karla { width: 60px; }
.egg-vogel { width: 36px; }
.egg-maus { width: 32px; }
.egg-lui svg, .egg-karla svg, .egg-vogel svg, .egg-maus svg { display: block; width: 100%; height: auto; }
/* Treffer */
.zk.zk-treffer { background: var(--static-maincolor); transition: background-color .3s; }

/* Hinweise auf die Eggs (04.11.: „1 und 4 finde ich cool … das da iwie so eine kleine ‚message immer steht‘“) */
/* Der Cursor im Footer ist raus, oben im Menü blinkt schon einer (05.11.: „das ist doppelt“) */
@keyframes eggcur { 50% { background: transparent; } }
/* 4: steht immer im großen Menü, unten links */
.bm-hint { position: absolute; left: var(--gut); bottom: 28px; margin: 0; font: 13px var(--f-mono); color: rgba(var(--gridcolor-rgb),.62); }
.bm-hint::after { content: ''; display: inline-block; width: .6em; height: 1.05em; margin-left: .35em; vertical-align: -.16em; background: currentColor; animation: eggcur 1.06s steps(1) infinite; }
@media (max-width: 900px), (hover: none) { .bm-hint { display: none; } }
/* Lui: ! gefangen, ? entwischt, dazu Fetzen an der Fangstelle */
.egg-zeichen { position: fixed; z-index: 62; pointer-events: none; font: 900 38px/1 var(--f-ext); color: var(--static-maincolor); transform: translate(-50%, 0); animation: eggzeichen .95s ease-out forwards; }
@keyframes eggzeichen { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.6); } 18% { opacity: 1; transform: translate(-50%, -6px) scale(1.1); } 70% { opacity: 1; transform: translate(-50%, -14px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -30px) scale(1); } }
.egg-fetzen { position: fixed; z-index: 62; width: 6px; height: 6px; background: var(--textcolor); pointer-events: none; animation: eggfetzen .6s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes eggfetzen { to { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 26px)) rotate(120deg) scale(.5); } }
/* Treffer 86/86 */
.egg-treffer { position: fixed; inset: 0; z-index: 9000; overflow: hidden; pointer-events: none; }
.egg-dimm { position: absolute; inset: 0; background: var(--bgcolor); opacity: 0; }
.egg-blitz { position: absolute; inset: 0; background: var(--static-maincolor); opacity: 0; mix-blend-mode: screen; }
html.lightmode .egg-blitz { mix-blend-mode: multiply; }
.egg-visier { position: absolute; left: -36px; top: -36px; width: 72px; height: 72px; }
.egg-visier i { position: absolute; width: 22px; height: 22px; border: 3px solid var(--static-maincolor); }
.egg-visier i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.egg-visier i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.egg-visier i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.egg-visier i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.egg-gross { position: absolute; left: 50%; top: 50%; text-align: center; font-family: 'AK86 Pixel', monospace; color: var(--static-maincolor); line-height: 1; }
.egg-gross b { display: block; font-weight: 400; font-size: clamp(170px, min(36vw, 60vh), 620px); line-height: .9; text-shadow: .035em .035em 0 var(--textcolor); }
.egg-gross span { display: block; margin-top: .3em; font-size: clamp(22px, 3.4vw, 54px); letter-spacing: .12em; color: var(--textcolor); }
.egg-pixel { position: absolute; display: block; background: var(--static-maincolor); }
html.egg-stoss div.page, html.egg-stoss .nav { animation: eggStoss .38s steps(6) both; }
@keyframes eggStoss { 0% { transform: translate(0, 0); } 16% { transform: translate(-16px, 10px); } 33% { transform: translate(14px, -12px); } 50% { transform: translate(-9px, 6px); } 66% { transform: translate(7px, -5px); } 83% { transform: translate(-3px, 2px); } 100% { transform: none; } }