/* Navigation als einzelner weißer Hero-Kreis (unten rechts) mit Kreis-Menü.
   Kreise nutzen exakt die Hero-Klassen (.orb/.orb-f/.orb-c, .orb-in/.orb-snap/.orb-pulse/.go/.on); die Hero-Regeln gelten per :is(.hero-scene, .orb-ui).
   .orb-ui hat die Breite der Hero-Szene (--scene-w, setzt nav.js), damit die %-Größe der Kreise identisch ausfällt. */
.orb-ui { width: var(--scene-w, 390px); }
.orb-ui button.orb { padding: 0; border: 0; margin: 0; background: none; font: inherit; color: inherit; cursor: pointer; }

/* ---------- Nav-Kreis ---------- */
.fab { position: fixed; z-index: 61; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); height: 0; pointer-events: none; }
@media (min-width: 980px) { .fab { right: 30px; bottom: 34px; } }
.fab .orb { --cx: calc(100% - 26px); --cy: -26px; left: var(--cx); top: var(--cy); pointer-events: auto; }
.fab .fab-btn { visibility: hidden; }
.fab.in .fab-btn, .fab.open .fab-btn { visibility: visible; }
.fab.typing:not(.open) .fab-btn { visibility: hidden; }
/* + dreht sich beim Öffnen um 45° zum X – Feder-Easing der Hero-Kreise (cubic-bezier(.3,1.6,.5,1)) */
.fab-btn .fb-plus { transition: rotate .45s cubic-bezier(.3,1.6,.5,1); }
.fab.open .fab-btn .fb-plus { rotate: 45deg; }
@media (prefers-reduced-motion: reduce) { .fab-btn .fb-plus { transition: none; } }

/* Aufgefächerte Kreise: gleichmäßiger Viertelbogen um den Nav-Button, von oben (90°, Start) bis links (180°, Kontakt), je 22,5°. */
/* Smartphone: Nav- und Menükreise so groß wie die Philosophie-Kreise (44 px), Radius proportional (118 × 44/28 ≈ 185 px) */
@media (max-width: 979px) { .fab .orb { width: 44px; } }
.fan { list-style: none; margin: 0; padding: 0; --R: min(185px, 38vh); }
@media (min-width: 980px) { .fan { --R: min(140px, 38vh); } }
.fan li { --x: calc(cos(var(--a)) * var(--R)); --y: calc(sin(var(--a)) * var(--R) * -1); }
.fan li:nth-child(1) { --a: 90deg; }
.fan li:nth-child(2) { --a: 112.5deg; }
.fan li:nth-child(3) { --a: 135deg; }
.fan li:nth-child(4) { --a: 157.5deg; }
.fan li:nth-child(5) { --a: 180deg; }
.fan .orb { left: var(--cx); top: var(--cy); visibility: hidden; opacity: 0; text-decoration: none; transition: left .45s cubic-bezier(.3,1.4,.5,1) calc((4 - var(--k)) * 40ms), top .45s cubic-bezier(.3,1.4,.5,1) calc((4 - var(--k)) * 40ms), opacity .2s, visibility 0s .45s; }
.fab.open .fan .orb { left: calc(var(--cx) + var(--x)); top: calc(var(--cy) + var(--y)); visibility: visible; opacity: 1; transition: left .5s cubic-bezier(.3,1.5,.5,1) calc(var(--k) * 45ms), top .5s cubic-bezier(.3,1.5,.5,1) calc(var(--k) * 45ms), opacity .2s calc(var(--k) * 45ms), visibility 0s; }
/* Menükreise: reine Hero-Kreise (Magnet, Druck); Beschriftung nur per aria-label */
.fan .orb { -webkit-touch-callout: none; }
/* aktueller Abschnitt: Akzent-Blau (--acc-deep, Icon-Blau der Kreise) mit weißem Icon */
.fab .fan .orb.on .orb-c { --ms: 1; background: var(--acc-deep); box-shadow: 0 8px 18px -8px rgba(15,42,51,.35), 0 0 0 1.25px var(--acc-deep); }
.fab .fan .orb.on .orb-c svg { stroke: #fff; }
.fan .orb:focus-visible .orb-c { outline: 2px solid #fff; outline-offset: 2px; }
.fab-veil { position: fixed; inset: 0; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.fab.open .fab-veil { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .fan .orb, .fab.open .fan .orb, .fab-veil { transition: none !important; } }

/* ---------- „Über mich“: Daniels Bot (mot-arms) lehnt mit flacher Unterkante auf der Abschnittslinie ---------- */
/* Bot sitzt wie die Philosophie-Büste: Handy oben rechts, Text umfließt ihn; Desktop rechte Spalte (gleiche Regeln/Maße wie .philosophy .sec-bust) */
.sec-bot { float: right; height: 185px; margin: -22px -6px 6px 12px; position: relative; z-index: 2; pointer-events: auto; cursor: pointer; line-height: 0; -webkit-tap-highlight-color: transparent; }
@media (min-width: 980px) { .sec-bot { float: none; grid-column: 2; grid-row: 1 / span 2; height: 350px; margin: 0; align-self: end; } }
.sec-bot .sb-in { position: relative; display: block; height: 100%; }
.sec-bot img { display: block; height: 100%; width: auto; }
/* Bildschirm: Ebene auf die schräge Fläche vermessen (Ecken im Bild: TL 178/178, TR 451/146, BL 203/411 von 757×975) */
.sb-scr { position: absolute; left: 23.51%; top: 18.26%; width: 100%; height: 100%; transform-origin: 0 0; transform: matrix(.3606, -.0423, .0256, .239, 0, 0); pointer-events: none; }
.sb-scr .sb-cover { position: absolute; left: 3%; right: 2%; top: 8%; bottom: 6%; background: linear-gradient(#1b1e23, #22252a 60%, #2a2c2f); -webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent); mask-image: radial-gradient(closest-side, #000 80%, transparent); opacity: 0; transition: opacity .12s; }
.sb-scr .sf { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #d2f1ff; stroke-width: 1.3; filter: drop-shadow(0 0 .6px rgba(150,220,255,.95)) drop-shadow(0 0 2.5px rgba(110,200,255,.7)); opacity: 0; transition: opacity .12s; }
.sec-bot[data-face] .sb-cover { opacity: 1; }
.sec-bot[data-face="blink"] .sf-blink, .sec-bot[data-face="wink"] .sf-wink, .sec-bot[data-face="wow"] .sf-wow, .sec-bot[data-face="love"] .sf-love, .sec-bot[data-face="laugh"] .sf-laugh { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sb-scr .sb-cover, .sb-scr .sf { transition: none; } }
/* Kopf als eigene Lage (Ausschnitt aus mot-arms, Körperlage darunter ohne oberen Kopfteil); wackelt beim Antippen leicht um den Halsansatz, Overlay wackelt mit */
.sec-bot .sb-head { position: absolute; inset: 0; transform-origin: 46.2% 49.6%; }
.sec-bot .sb-head img { position: absolute; left: 0; top: 0; height: 100%; width: auto; }
.sec-bot.nod .sb-head { animation: sb-nod .5s cubic-bezier(.3,.7,.4,1); }
@keyframes sb-nod { 0% { rotate: 0deg; } 18% { rotate: calc(var(--nd, 1) * -1.6deg); } 40% { rotate: calc(var(--nd, 1) * 1deg); } 62% { rotate: calc(var(--nd, 1) * -.45deg); } 82% { rotate: calc(var(--nd, 1) * .15deg); } 100% { rotate: 0deg; } }
/* Bildschirm-Effekte: strikt in der Bildschirmfläche (gleiche Fläche und Maske wie .sb-cover, in der Bildschirm-Matrix) */
.sb-scr .sb-fx { position: absolute; left: 3%; right: 2%; top: 8%; bottom: 6%; overflow: hidden; border-radius: 6%; -webkit-mask-image: radial-gradient(closest-side, #000 86%, transparent); mask-image: radial-gradient(closest-side, #000 86%, transparent); opacity: 0; }
.sec-bot[data-fx] .sb-fx { opacity: 1; }
.sb-fx > * { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
/* a) Störbild: Schnee, Scanlines, Roll, RGB-Versatz, Blitz */
.sec-bot[data-fx="noise"] .sb-noise, .sec-bot[data-fx="noise"] .sb-scan, .sec-bot[data-fx="noise"] .sb-flash { display: block; }
.sb-noise { height: 140%; filter: drop-shadow(5px 0 rgba(255,110,140,.35)) drop-shadow(-5px 0 rgba(120,220,255,.45)); }
.sec-bot[data-fx="noise"] .sb-noise { animation: sb-roll .75s steps(1, end); }
@keyframes sb-roll { 0% { translate: 0 0; } 22% { translate: -2% -18%; } 30% { translate: 1% -34%; } 38% { translate: 0 -8%; } 55% { translate: -1% 0; } 70% { translate: 2% -4%; } 82%, 100% { translate: 0 0; } }
.sb-scan { background: repeating-linear-gradient(180deg, rgba(0,0,0,.45) 0 3px, rgba(0,0,0,0) 3px 9px); }
.sb-flash { background: #e9f8ff; opacity: 0; }
.sec-bot[data-fx="noise"] .sb-flash { animation: sb-flash .75s ease-out; }
@keyframes sb-flash { 0% { opacity: .95; } 14% { opacity: 0; } 100% { opacity: 0; } }
/* c) Testbild: Farbbalken im kühlen Leuchtstil, flackert weg */
.sec-bot[data-fx="bars"] .sb-bars, .sec-bot[data-fx="bars"] .sb-scan { display: block; }
.sb-bars { background: linear-gradient(180deg, transparent 72%, #0e1a22 72% 80%, transparent 80%), linear-gradient(90deg, #f2fbff 0 14.3%, #d2f1ff 14.3% 28.6%, #a8e4ff 28.6% 42.9%, #7fdcff 42.9% 57.1%, #4fb6e2 57.1% 71.4%, #2a86b3 71.4% 85.7%, #175a7c 85.7%); }
.sec-bot[data-fx="bars"] .sb-bars { animation: sb-bars .7s linear forwards; }
@keyframes sb-bars { 0%, 52% { opacity: 1; } 58% { opacity: .15; } 63% { opacity: .9; } 70% { opacity: 0; } 76% { opacity: .55; } 82%, 100% { opacity: 0; } }
/* e) Röhrenfernseher: fällt zur Linie und zum Punkt zusammen, kurz dunkel, wieder an */
.sec-bot[data-fx="crt"] .sb-crt { display: block; }
.sb-crt { background: radial-gradient(closest-side, #f4fcff, #bfeaff 55%, rgba(127,220,255,.6)); opacity: 0; }
.sec-bot[data-fx="crt"] .sb-crt { animation: sb-crt .9s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes sb-crt { 0% { opacity: .85; transform: scale(1, 1); } 16% { opacity: 1; transform: scale(1, .03); } 28% { opacity: 1; transform: scale(.03, .03); } 36% { opacity: 0; transform: scale(0, 0); } 62% { opacity: 0; transform: scale(.03, .03); } 68% { opacity: 1; transform: scale(.03, .03); } 78% { opacity: 1; transform: scale(1, .03); } 88% { opacity: .7; transform: scale(1, 1); } 100% { opacity: 0; transform: scale(1, 1); } }
@media (prefers-reduced-motion: reduce) { .sec-bot.nod .sb-head { animation: none; } .sb-scr .sb-fx { display: none; } }

/* ---------- Footer ---------- */
.foot { align-items: center; }
@media (max-width: 979px) { .foot .foot-row { flex-basis: 100%; justify-content: center; } .foot { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* Footer-Zeile: Signatur (css/signatur.css) links neben Impressum/Datenschutz */
.foot-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 22px; }
.foot .nymot-sig { --sig-ink: var(--ink); }

/* ---------- Easter Egg: 5× schnell auf den Über-mich-Bot → die ganze Seite schaltet aus wie ein Röhrenfernseher (Overlay, Element nur während des Effekts) ---------- */
.tv-off { position: fixed; inset: 0; z-index: 2147483000; pointer-events: auto; cursor: default; overflow: hidden; touch-action: none; }
.tv-off .tv-hole { position: absolute; left: 50%; top: 50%; width: 100vw; height: 100vh; translate: -50% -50%; box-shadow: 0 0 0 200vmax #000; background: rgba(240,250,255,0); animation: tv-hole 2.3s linear forwards; }
@keyframes tv-hole {
  0% { width: 100vw; height: 100vh; background: rgba(240,250,255,0); box-shadow: 0 0 0 200vmax #000; animation-timing-function: cubic-bezier(.55,0,.9,.4); }
  12% { width: 100vw; height: 2px; background: rgba(240,250,255,.95); box-shadow: 0 0 0 200vmax #000, 0 0 18px 4px rgba(127,220,255,.8); animation-timing-function: cubic-bezier(.55,0,.9,.4); }
  21% { width: 3px; height: 3px; background: #fff; box-shadow: 0 0 0 200vmax #000, 0 0 14px 5px rgba(160,230,255,.9); }
  27% { width: 3px; height: 3px; background: rgba(255,255,255,0); box-shadow: 0 0 0 200vmax #000, 0 0 0 0 rgba(160,230,255,0); }
  61% { width: 3px; height: 3px; background: rgba(255,255,255,0); box-shadow: 0 0 0 200vmax #000; }
  63% { width: 100vw; height: 100vh; background: rgba(240,250,255,.0); box-shadow: 0 0 0 200vmax #000; }
  100% { width: 100vw; height: 100vh; background: rgba(240,250,255,0); box-shadow: 0 0 0 200vmax rgba(0,0,0,0); }
}
/* Wiederanschalten: flackernder Schleier mit leichtem Rauschen */
.tv-off .tv-flick { position: absolute; inset: 0; background: #000; opacity: 0; animation: tv-flick 2.3s linear forwards; }
@keyframes tv-flick { 0%, 61% { opacity: 0; } 62% { opacity: 1; } 66% { opacity: .15; } 69% { opacity: .85; } 72% { opacity: .05; } 75% { opacity: .55; } 79% { opacity: 0; } 83% { opacity: .3; } 87%, 100% { opacity: 0; } }
.tv-off canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; mix-blend-mode: screen; animation: tv-snow 2.3s linear forwards; }
@keyframes tv-snow { 0%, 61% { opacity: 0; } 63% { opacity: .5; } 75% { opacity: .25; } 90%, 100% { opacity: 0; } }
/* weniger Bewegung: nur kurzes Abdunkeln */
.tv-off.tv-calm .tv-hole, .tv-off.tv-calm canvas { display: none; }
.tv-off.tv-calm .tv-flick { animation: tv-dim .8s ease forwards; }
@keyframes tv-dim { 0% { opacity: 0; } 35% { opacity: .55; } 100% { opacity: 0; } }

/* ---------- Über-mich-Bot: Begrüßung beim Hereinscrollen (Ablauf in js/nav.js) ---------- */
.sec-bot.wake .sb-head { animation: sb-wake .8s cubic-bezier(.3,.7,.4,1); }
@keyframes sb-wake { 0% { rotate: 0deg; } 16% { rotate: -1.5deg; } 34% { rotate: 1.1deg; } 52% { rotate: -1.3deg; } 70% { rotate: .6deg; } 86% { rotate: -.2deg; } 100% { rotate: 0deg; } }
/* Röhren-An: zweite Hälfte des bestehenden CRT-Effekts (Punkt → Linie → Bild → Ausblenden) */
.sec-bot[data-fx="crt-on"] .sb-crt { display: block; animation: sb-crt 1.6s cubic-bezier(.4,0,.2,1) -1s forwards; }
@media (prefers-reduced-motion: reduce) { .sec-bot.wake .sb-head { animation: none; } }