/* ══ FONT FACES ══ */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Share Tech Mono';
  src: url('fonts/ShareTechMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ══ DESIGN TOKENS ══ */
[data-theme="dark"] {
  --bg:    #000000;
  --bg-p:  #050505;
  --bg-p2: #080808;
  --bdr:   rgba(255,185,110,0.28);
  --bh:    rgba(255,185,110,0.85);
  --acc:   #ffb366;
  --accg:  #ffd080;
  --th:    rgba(235,225,210,0.96);
  --tm:    rgba(255,210,155,0.82);
  --td:    rgba(255,185,110,0.5);
  --tact:  rgba(255,185,110,0.1);
  --thov:  rgba(255,185,110,0.06);
  --dot:   rgba(200,200,200,0.09);
  --inp:   rgba(255,255,255,0.03);
}

:root {
  --mono:  'Share Tech Mono', monospace;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Inter', system-ui, sans-serif;
}

/* ══ RESET ══ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }

@media (max-width: 768px) {
  html, body { overflow: auto; }
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--th);
  transition: background 0.4s, color 0.4s;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.01) 2px, rgba(0,0,0,0.01) 4px);
}

/* ══ GLITCH OVERLAY ══ */
#gr, #gg, #gb {
  position: fixed;
  inset: 0;
  z-index: 8500;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}
#gr { background: rgba(255,0,0,0.35); }
#gg { background: rgba(0,255,0,0.35); }
#gb { background: rgba(0,0,255,0.35); }
#flicker { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 8000; }

/* ══ BEAM CANVAS ══ */
#beam-canvas {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}

/* ══ APP SHELL ══ */
#app {
  position: fixed;
  inset: 0;
  display: flex;
  padding: 1rem;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}

/* ══ LEFT COLUMN ══ */
#col-left {
  width: 310px;
  flex-shrink: 0;
  background: var(--bg-p);
  border: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background 0.4s, border-color 0.4s, transform 0.8s cubic-bezier(0.4,0,0.2,1), opacity 0.6s;
}

/* Corner brackets */
.pc { position: absolute; width: 9px; height: 9px; border-color: var(--acc); border-style: solid; }
.pc.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.pc.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.pc.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.pc.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* ══ TABS ══ */
.tab {
  padding: 1rem 1.3rem;
  cursor: pointer;
  border-bottom: 1px solid var(--bdr);
  background: transparent;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  transition: background 0.2s;
  outline: none;
  overflow: visible;
}

.tab:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }

.tab::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--acc);
  opacity: 0;
  transition: opacity 0.2s;
}

.tab:hover, .tab.active { background: var(--tact); }
.tab:hover::before, .tab.active::before { opacity: 1; }

.tab-n {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--td);
  width: 28px;
  flex-shrink: 0;
  font-family: var(--mono);
}

.tab-t { font-size: 20px; color: var(--th); transition: color 0.2s; }
.tab:hover .tab-t, .tab.active .tab-t { color: var(--acc); }

/* ══ COUNTDOWN ══ */
#cd-box {
  padding: 1rem 1.3rem;
  border-top: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cd-lbl { font-size: 10px; letter-spacing: 0.2em; color: var(--td); font-family: var(--mono); }
.cd-lbl::before { content: '● '; color: var(--acc); }
.cd-main { display: flex; align-items: baseline; gap: 0.4rem; }
.cd-noch { font-size: 13px; color: var(--td); font-family: var(--mono); }
.cd-days { font-family: var(--serif); font-size: 2.2rem; font-weight: 300; color: var(--th); line-height: 1; }
.cd-tage { font-size: 14px; color: var(--th); font-family: var(--mono); }
.cd-sub  { font-size: 12px; color: var(--tm); }
.cd-bar-bg { width: 100%; height: 4px; background: rgba(255,185,110,0.12); border-radius: 2px; overflow: hidden; }
.cd-bar { height: 100%; background: linear-gradient(to right, var(--acc), var(--accg)); border-radius: 2px; transition: width 1.2s cubic-bezier(0.23,1,0.32,1); width: 0%; }
.cd-dates { font-size: 11px; color: var(--td); font-family: var(--mono); }

/* ══ RÄUME ══ */
.raume-label {
  padding: 0.5rem 1.3rem 0.3rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: rgba(255,185,110,0.45);
  border-top: 1px solid rgba(255,185,110,0.15);
  margin-top: auto;
}

.tab.ptab {
  border-top: none;
  background: rgba(255,200,80,0.04);
  padding: 1.1rem 1.3rem;
  pointer-events: auto;
  cursor: pointer;
}
.tab.ptab .tab-n { color: var(--accg); opacity: 0.7; }
.tab.ptab .tab-t { color: var(--accg); font-size: 17px; font-weight: 600; }
.tab.ptab::before { background: var(--accg); }
.tab.ptab:hover { background: rgba(255,200,80,0.08); }

.tab.ptab2 { border-top: none; background: rgba(255,200,80,0.04); }
.tab.ptab2 .tab-n { color: var(--accg); opacity: 0.7; }
.tab.ptab2 .tab-t { color: var(--accg); font-size: 17px; font-weight: 600; }
.tab.ptab2::before { background: var(--accg); }
.tab.ptab2:hover { background: rgba(255,200,80,0.08); }

/* ══ MIDDLE COLUMN ══ */
#col-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 1.5rem 1rem;
  position: relative;
  transition: transform 0.8s cubic-bezier(0.4,0,0.2,1), opacity 0.6s;
}

#identity { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }

.n1-first {
  font-family: var(--serif);
  font-size: clamp(2rem,2.8vw,3.2rem);
  font-weight: 300;
  letter-spacing: 0.35em;
  color: var(--th);
  line-height: 1.1;
  display: block;
  text-transform: uppercase;
  text-align: center;
}

.n1-last {
  font-family: var(--serif);
  font-size: clamp(2rem,2.8vw,3.2rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--th);
  line-height: 1.1;
  display: block;
  text-transform: uppercase;
  text-align: center;
}

#photo {
  width: 190px;
  height: 190px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  overflow: hidden;
  flex-shrink: 0;
}

#photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

#bot-area {
  width: 100%;
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* ══ ROBOT ══ */
@keyframes lottieSpeak {
  0%,100% { filter: sepia(0.4) saturate(1.4) hue-rotate(5deg) brightness(1.05) drop-shadow(0 0 8px rgba(255,180,60,0.15)); }
  50%      { filter: sepia(0.3) saturate(1.8) hue-rotate(5deg) brightness(1.28) drop-shadow(0 0 22px rgba(255,195,60,0.55)); }
}

#robot-wrap {
  width: 100px;
  cursor: pointer;
  transform-origin: center bottom;
  transition: filter 0.3s;
  filter: sepia(0.4) saturate(1.4) hue-rotate(5deg) brightness(1.05) drop-shadow(0 0 8px rgba(255,180,60,0.15));
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}

#robot-wrap.speaking { animation: lottieSpeak 0.9s ease-in-out infinite; }
#robot-wrap:hover    { filter: sepia(0.5) saturate(1.6) hue-rotate(5deg) brightness(1.15) drop-shadow(0 0 18px rgba(255,185,60,0.35)); }
#robot-lottie { width: 100%; height: 100%; }

@keyframes robotJoy {
  0%   { transform: translateY(0) scale(1); }
  20%  { transform: translateY(-18px) scale(1.1) rotate(-3deg); }
  40%  { transform: translateY(0) scale(0.97) rotate(2deg); }
  60%  { transform: translateY(-10px) scale(1.05); }
  80%  { transform: translateY(0); }
  100% { transform: translateY(0) scale(1); }
}

#robot-wrap.joy { animation: robotJoy 0.5s ease; }

/* ══ CHAT BUBBLE ══ */
#bubble {
  position: absolute;
  bottom: 200px;
  left: calc(50% - 420px);
  width: 280px;
  max-height: calc(100vh - 280px);
  z-index: 20;
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: width 0.4s cubic-bezier(0.23,1,0.32,1), bottom 0.5s cubic-bezier(0.23,1,0.32,1);
}

.bubble-box {
  position: relative;
  background: rgba(10,8,5,0.94);
  border: 1px solid rgba(255,185,110,0.38);
  border-radius: 18px 18px 5px 18px;
  padding: 18px 20px 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,185,110,0.07);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.bubble-box::after {
  content: '';
  position: absolute;
  bottom: -12px; right: 30px;
  width: 0; height: 0;
  border-right: 12px solid transparent;
  border-top: 12px solid rgba(255,185,110,0.38);
}

.bubble-box::before {
  content: '';
  position: absolute;
  bottom: -10px; right: 31px;
  width: 0; height: 0;
  border-right: 11px solid transparent;
  border-top: 11px solid rgba(10,8,5,0.94);
  z-index: 1;
}

#bmsg {
  padding: 0 0.2rem 0.8rem;
  min-height: 30px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 19px;
  overflow-y: auto;
  overflow-x: hidden;
  word-break: break-word;
  transition: min-height 0.5s cubic-bezier(0.23,1,0.32,1);
  max-height: 320px;
  scrollbar-width: none;
}

#bmsg::-webkit-scrollbar { width: 0; }

.bm { line-height: 1.75; display: block; }
.bm.bot  { color: var(--tm); }
.bm.user { color: var(--th); text-align: right; font-size: 17px; opacity: 0.75; }
.bm.t    { color: var(--td); font-style: italic; }

.typing-cursor::after {
  content: '▌';
  animation: blink 0.7s step-end infinite;
  color: var(--acc);
}

@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ══ CHIPS ══ */
#chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 0.8rem; }

.chip {
  font-size: 15px;
  color: var(--td);
  background: none;
  border: 1px solid rgba(255,185,110,0.25);
  padding: 7px 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: var(--sans);
  border-radius: 4px;
}

.chip:hover { border-color: var(--acc); color: var(--acc); }
#chips.hidden { display: none; }

/* ══ CHAT INPUT ══ */
#binput {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,185,110,0.35);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s, opacity 0.5s;
}

#binput.show { max-height: 60px; opacity: 1; }

@keyframes cursorBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

#chat-input {
  flex: 1;
  background: none;
  border: none;
  padding: 11px 6px;
  font-family: var(--sans);
  font-size: 18px;
  color: var(--th);
  outline: none;
}

#chat-input::placeholder,
#board-chat-input::placeholder,
#proj-chat-input::placeholder { color: var(--td); }

.input-wrap { position: relative; flex: 1; display: flex; align-items: center; }

.input-wrap .blink-cursor {
  position: absolute;
  left: 6px;
  width: 2px;
  height: 1.1em;
  background: var(--acc);
  animation: cursorBlink 0.8s step-end infinite;
  pointer-events: none;
}

.input-wrap .blink-cursor.hidden { display: none; }

#chat-send {
  background: none;
  border: none;
  padding: 11px 8px;
  color: var(--acc);
  font-size: 19px;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s;
}

#chat-send:hover { opacity: 1; }

#blim { font-size: 12px; color: var(--td); padding: 5px 0; display: none; opacity: 0.45; }
#blim.show { display: block; }

/* ══ RIGHT COLUMN ══ */
#col-right {
  width: 44%;
  flex-shrink: 0;
  padding: 2.5rem 3rem 6rem;
  overflow-y: auto;
  position: relative;
  z-index: 4;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.23,1,0.32,1);
  pointer-events: none;
}

#col-right.open { opacity: 1; transform: translateX(0); pointer-events: auto; }
#col-right::-webkit-scrollbar { width: 3px; }

@keyframes projAppear {
  0%   { opacity: 0; filter: blur(4px) brightness(2.5); transform: perspective(900px) rotateY(-5deg) translateX(15px); }
  40%  { opacity: 0.6; filter: blur(1px) brightness(1.4); }
  100% { opacity: 1; filter: none; transform: perspective(900px) rotateY(0) translateX(0); }
}

#col-right.projecting { animation: projAppear 0.55s ease forwards; }

.cb-num   { font-size: 11px; letter-spacing: 0.22em; color: var(--td); margin-bottom: 0.9rem; font-family: var(--mono); }
.cb-title { font-family: var(--serif); font-size: clamp(2.6rem,3.8vw,4.4rem); font-weight: 300; color: var(--th); margin-bottom: 0.9rem; letter-spacing: 0.04em; line-height: 1.05; }
.cb-line  { width: 50px; height: 1px; background: var(--bdr); margin-bottom: 2rem; }
.cb-text  { font-size: 20px; line-height: 1.9; color: var(--tm); }

.cb-text strong {
  display: block;
  margin-top: 1.4rem;
  margin-bottom: 0.2rem;
  font-weight: 500;
  color: var(--th);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--mono);
}

.cb-text strong:first-child { margin-top: 0; }

.ci { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.5rem; }
.ci-lbl { font-size: 11px; letter-spacing: 0.16em; color: var(--td); font-family: var(--mono); }
.ci-val  { font-size: 20px; color: var(--th); }
a.cl { color: var(--th); text-decoration: none; }
a.cl:hover { color: var(--acc); }

/* ══ FLY ANIMATIONS ══ */
@keyframes flyLeft  { to { transform: translateX(-160vw) rotate(-8deg) scale(0.4); opacity: 0; } }
@keyframes flyRight { to { transform: translateX(160vw) rotate(8deg) scale(0.4); opacity: 0; } }
@keyframes flyBack  { to { transform: scale(0.05) translateZ(-800px); opacity: 0; } }
@keyframes flyUp    { to { transform: translateY(-120vh) rotate(-5deg) scale(0.5); opacity: 0; } }
@keyframes flyDown  { to { transform: translateY(120vh) rotate(5deg) scale(0.5); opacity: 0; } }

#col-left.fly  { animation: flyLeft  0.55s cubic-bezier(0.4,0,1,1) forwards; }
#col-mid.fly   { animation: flyBack  0.55s cubic-bezier(0.4,0,1,1) forwards; }
#col-right.fly { animation: flyRight 0.55s cubic-bezier(0.4,0,1,1) forwards; }
#id-name.scatter { animation: flyUp   0.4s  cubic-bezier(0.4,0,1,1) forwards; }
#photo.scatter   { animation: flyDown 0.45s cubic-bezier(0.4,0,1,1) 0.05s forwards; }
#bubble.scatter  { animation: flyLeft 0.4s  cubic-bezier(0.4,0,1,1) 0.08s forwards; }

/* ══ WORLD BOARD ══ */
#world-board {
  position: fixed;
  inset: 0;
  z-index: 750;
  background: #030201;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
  overflow: hidden;
}

#world-board.visible { opacity: 1; pointer-events: auto; }

#board-wall {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, #040302 0%, #080504 55%, #120b05 70%, #1c1208 80%, #231508 100%);
}

#board-horizon {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 60%, rgba(50,30,8,0.25) 70%, rgba(70,42,10,0.4) 75%, rgba(25,15,4,0.15) 85%, transparent 100%);
}

#studio-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

.board-room {
  position: absolute;
  bottom: 28%;
  left: 0; right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 80px;
  padding: 0 0 0 180px;
  perspective: 1400px;
  transform-style: preserve-3d;
  z-index: 5;
}

.corkboard {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: filter 0.6s ease, transform 1.6s cubic-bezier(0.16,1,0.3,1), opacity 0.4s;
  transform-origin: bottom center;
}

.corkboard:nth-child(1) { transform: rotateY(28deg); }
.corkboard:nth-child(2) { transform: rotateY(0deg); }
.corkboard:nth-child(3) { transform: rotateY(-28deg); }

.board-room:has(.corkboard:hover) .corkboard:not(:hover) { filter: brightness(0.05) blur(1px) !important; opacity: 0.5; }

.board-room:has(.corkboard:hover) .corkboard:nth-child(1):not(:hover) { transform: rotateY(28deg) translateX(-180px) scale(0.75); }
.board-room:has(.corkboard:hover) .corkboard:nth-child(2):not(:hover) { transform: rotateY(0deg) scale(0.75); }
.board-room:has(.corkboard:hover) .corkboard:nth-child(3):not(:hover) { transform: rotateY(-28deg) translateX(180px) scale(0.75); }

.corkboard:hover {
  transform: rotateY(0deg) scale(1.72) translateY(-4%) translateZ(60px) !important;
  z-index: 10;
  filter: brightness(0.95) drop-shadow(0 30px 60px rgba(0,0,0,0.95)) drop-shadow(0 8px 20px rgba(0,0,0,0.8));
}

.corkboard { opacity: 0; filter: brightness(0.9); }
.corkboard.revealed { opacity: 1; filter: brightness(0.9); }

.board-frame {
  width: 100%;
  position: relative;
  padding: 6px;
  background: #0c0601;
  box-shadow:
    inset 0 1px 0 rgba(160,110,25,0.45),
    inset 0 -2px 0 rgba(0,0,0,1),
    inset 2px 0 0 rgba(100,65,10,0.25),
    inset -2px 0 0 rgba(0,0,0,0.9),
    0 12px 40px rgba(0,0,0,0.98),
    0 0 0 1px rgba(100,65,10,0.5);
}

.board-frame::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(120,80,12,0.25);
  pointer-events: none;
  z-index: 3;
}

.board-frame img { display: block; width: 100%; height: auto; z-index: 1; position: relative; }

.board-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,185,110,0.2);
  font-family: var(--mono);
  transition: color 0.3s;
  margin-top: 6px;
}

.corkboard:hover .board-label { color: var(--acc); }

/* ══ STUDIO STANDS ══ */
#stand-left, #stand-right {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  transition: transform 1.4s cubic-bezier(0.22,1,0.36,1);
}

#stand-left  { left: 0; top: 20vh; transform: translateX(-120%) rotate(90deg); transform-origin: center center; }
#stand-left.in  { transform: translateX(0%) rotate(90deg); }
#stand-right { right: 0; top: 20vh; transform: translateX(120%) scaleX(-1) rotate(90deg); transform-origin: center center; }
#stand-right.in { transform: translateX(0%) scaleX(-1) rotate(90deg); }

.studio-stand img { height: 240px; width: auto; display: block; filter: brightness(0.88); }

/* ══ BOARD BOT ══ */
@keyframes lottieFlyin {
  0%   { opacity: 0; transform: translateX(-220px) rotate(-18deg) scale(0.6); }
  60%  { opacity: 1; transform: translateX(12px) rotate(4deg) scale(1.05); }
  80%  { transform: translateX(-6px) rotate(-2deg) scale(0.98); }
  100% { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
}

#board-bot {
  position: absolute;
  bottom: 6.5rem;
  left: 19rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
}

#board-bot.show { opacity: 1; pointer-events: auto; animation: lottieFlyin 0.75s cubic-bezier(0.23,1,0.32,1) forwards; }

#board-robot-wrap {
  width: 105px;
  filter: sepia(0.4) saturate(1.4) hue-rotate(5deg) brightness(1.05) drop-shadow(0 0 16px rgba(255,180,60,0.25));
  cursor: pointer;
}

#board-robot-wrap.speaking { animation: lottieSpeak 0.9s ease-in-out infinite; }
#board-robot-lottie { width: 100%; height: 100%; }
#board-bubble { width: 350px; margin-bottom: 6px; }

.world-bubble-box {
  position: relative;
  background: rgba(10,8,5,0.93);
  border: 1px solid rgba(255,185,110,0.35);
  border-radius: 16px 16px 16px 4px;
  padding: 12px 14px 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  transition: box-shadow 0.5s, border-color 0.5s;
}

.world-bubble-box::after {
  content: '';
  position: absolute;
  bottom: -10px; left: 24px;
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-top: 10px solid rgba(255,185,110,0.35);
}

.world-bubble-box::before {
  content: '';
  position: absolute;
  bottom: -8px; left: 25px;
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-top: 9px solid rgba(10,8,5,0.93);
  z-index: 1;
}

#board-bmsg {
  font-size: 19px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: var(--tm);
  padding-bottom: 0.4rem;
  overflow: visible;
}

#board-chips        { display: none !important; }
#board-chips.hidden { display: none; }

#board-chips .world-chip {
  font-size: 15px;
  color: var(--td);
  background: rgba(10,8,5,0.6);
  border: 1px solid rgba(255,185,110,0.22);
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: var(--sans);
  border-radius: 3px;
}

#board-chips .world-chip:hover { border-color: var(--acc); color: var(--acc); }

#board-binput       { display: none !important; }
#board-binput.show  { max-height: 54px; opacity: 1; }

#board-chat-input {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 6px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--th);
  outline: none;
}

#board-chat-send {
  background: none;
  border: none;
  padding: 7px 5px;
  color: var(--acc);
  font-size: 13px;
  cursor: pointer;
  opacity: 0.7;
}

#board-chat-send:hover { opacity: 1; }
#board-back { font-family: var(--mono); cursor: pointer; }

/* ══ WORLD PROJECT ══ */
#world-project {
  position: fixed;
  inset: 0;
  z-index: 750;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#world-project.visible { opacity: 1; pointer-events: auto; }

.proj-content { position: relative; z-index: 2; max-width: 700px; width: 90%; padding: 4rem 0; }
.proj-num     { font-size: 11px; letter-spacing: 0.22em; color: var(--td); margin-bottom: 0.8rem; font-family: var(--mono); }
.proj-title   { font-family: var(--serif); font-size: clamp(2.4rem,4vw,4rem); font-weight: 300; color: var(--th); letter-spacing: 0.04em; line-height: 1.05; margin-bottom: 0.8rem; }
.proj-line    { width: 50px; height: 1px; background: var(--bdr); margin-bottom: 2.5rem; }
.proj-body    { display: flex; flex-direction: column; gap: 2rem; padding-bottom: 5rem; }
.proj-block   { display: flex; flex-direction: column; gap: 0.5rem; }
.proj-block-label { font-size: 11px; letter-spacing: 0.2em; color: var(--td); font-family: var(--mono); }
.proj-block-text  { font-size: 18px; line-height: 1.85; color: var(--tm); }
.proj-tags    { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.3rem; }
.proj-tag     { font-size: 13px; color: var(--acc); border: 1px solid rgba(255,185,110,0.3); padding: 5px 14px; font-family: var(--mono); letter-spacing: 0.1em; }

#project-back {
  position: fixed;
  bottom: 4.5rem;
  left: 54%;
  transform: translateX(-50%);
  z-index: 10;
  font-family: var(--mono);
  cursor: pointer;
}

/* ══ PROJ BOT ══ */
#proj-bot {
  position: absolute;
  bottom: 6.5rem;
  left: 19rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
}

#proj-bot.show { opacity: 1; pointer-events: auto; animation: lottieFlyin 0.75s cubic-bezier(0.23,1,0.32,1) forwards; }

#proj-robot-wrap {
  width: 105px;
  filter: sepia(0.4) saturate(1.4) hue-rotate(5deg) brightness(1.05) drop-shadow(0 0 16px rgba(255,180,60,0.25));
  cursor: pointer;
}

#proj-robot-wrap.speaking { animation: lottieSpeak 0.9s ease-in-out infinite; }
#proj-robot-lottie        { width: 100%; height: 100%; }
#proj-bubble              { width: 350px; margin-bottom: 6px; }

#proj-bmsg {
  font-size: 19px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: var(--tm);
  padding-bottom: 0.4rem;
  overflow: visible;
}

#proj-binput       { display: none !important; }
#proj-binput.show  { max-height: 44px; opacity: 1; }

#proj-chat-input {
  flex: 1;
  background: none;
  border: none;
  padding: 7px 4px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--th);
  outline: none;
}

#proj-chat-send {
  background: none;
  border: none;
  padding: 7px 5px;
  color: var(--acc);
  font-size: 14px;
  cursor: pointer;
  opacity: 0.7;
}

#proj-chat-send:hover { opacity: 1; }

/* ══ BORDERED BUTTONS ══ */
.bb {
  position: relative;
  background: rgba(15,14,11,0.9);
  border: 1px solid var(--bdr);
  padding: 10px 34px;
  font-size: 16px;
  letter-spacing: 0.2em;
  color: var(--th);
  transition: border-color 0.25s;
}

.bb:hover { border-color: var(--bh); }

.bbc { position: absolute; width: 6px; height: 6px; border-color: var(--acc); border-style: solid; }
.bbc.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.bbc.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.bbc.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.bbc.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* ══ PASSWORD OVERLAY ══ */
#pw-overlay {
  position: fixed;
  inset: 0;
  z-index: 99000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#pw-terminal {
  position: relative;
  z-index: 2;
  font-family: var(--mono);
  color: rgba(255,185,110,0.9);
  max-width: 560px;
  width: 90%;
}

#pw-voice {
  font-size: clamp(14px,1.8vw,20px);
  line-height: 2;
  margin-bottom: 2.5rem;
  min-height: 120px;
}

#pw-voice .line         { display: block; opacity: 0; }
#pw-voice .line.show    { opacity: 1; }
#pw-voice .cursor-blink::after { content: '▌'; animation: blink 0.7s step-end infinite; color: var(--acc); }

#pw-input-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid rgba(255,185,110,0.4);
  padding-bottom: 8px;
  opacity: 0;
  transition: opacity 0.6s;
}

#pw-input-wrap.show { opacity: 1; }

#pw-prompt { font-size: 18px; color: var(--acc); }

#pw-input {
  flex: 1;
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 18px;
  color: rgba(255,220,150,0.95);
  outline: none;
  padding: 4px 0;
  letter-spacing: 0.12em;
}

#pw-input::placeholder { color: rgba(255,185,110,0.3); }

#pw-send {
  background: none;
  border: none;
  color: var(--acc);
  font-size: 22px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

#pw-send:hover { opacity: 1; }

#pw-error {
  font-size: 13px;
  color: rgba(255,80,80,0.8);
  margin-top: 0.8rem;
  min-height: 18px;
  letter-spacing: 0.05em;
}

@keyframes pwShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-8px); }
  40%     { transform: translateX(8px); }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(5px); }
}

#pw-terminal.shake { animation: pwShake 0.4s ease; }

#pw-stars {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

#pw-mobile-hint {
  display: none;
  position: absolute;
  bottom: 2rem;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255,185,110,0.35);
  padding: 0 2rem;
}

/* ══ GLITCH ANIMATIONS ══ */
@keyframes glitchIn {
  0%   { opacity: 0; filter: blur(12px) brightness(3) saturate(0); transform: var(--gi-start) scaleX(1.08); }
  12%  { opacity: 0.6; filter: blur(4px) brightness(2.5) hue-rotate(90deg); transform: var(--gi-start) scaleX(1.04); }
  28%  { opacity: 0.3; filter: blur(8px) brightness(0.4); transform: var(--gi-mid); }
  42%  { opacity: 0.85; filter: blur(2px) brightness(2) hue-rotate(-60deg); }
  58%  { opacity: 0.5; filter: blur(5px) brightness(1.8); }
  72%  { opacity: 0.9; filter: blur(1px) brightness(1.3); }
  86%  { opacity: 1; filter: brightness(1.08); }
  100% { opacity: 1; filter: none; transform: none; }
}

@keyframes dataStream {
  0%   { clip-path: inset(100% 0 0 0); opacity: 0.2; filter: blur(3px) brightness(2.5); }
  25%  { clip-path: inset(70% 0 0 0);  opacity: 0.5; filter: blur(2px) brightness(2); }
  55%  { clip-path: inset(35% 0 0 0);  opacity: 0.8; filter: blur(1px) brightness(1.4); }
  80%  { clip-path: inset(8% 0 0 0);   opacity: 0.95; filter: blur(0.5px); }
  100% { clip-path: inset(0% 0 0 0);   opacity: 1; filter: none; }
}

@keyframes rgbSplit {
  0%   { text-shadow: 3px 0 rgba(255,0,0,0.7), -3px 0 rgba(0,255,255,0.7); filter: blur(2px); }
  50%  { text-shadow: -4px 0 rgba(255,0,0,0.5), 4px 0 rgba(0,255,255,0.5); filter: blur(1px); }
  100% { text-shadow: none; filter: none; }
}

.glitch-in     { --gi-start: translateX(-40px); --gi-mid: translateX(-10px); animation: glitchIn   0.7s cubic-bezier(0.23,1,0.32,1) forwards; }
.data-stream-in { animation: dataStream 0.8s cubic-bezier(0.23,1,0.32,1) forwards; }
.rgb-split      { animation: rgbSplit   0.5s ease forwards; }

/* ══ AMBIENT PARTICLES ══ */
.amb-host { position: relative; }
.amb-p    { position: absolute; pointer-events: none; border-radius: 50%; opacity: 0; z-index: 0; }

@keyframes ambFloat {
  0%   { transform: translate(var(--ax), var(--ay0)) scale(1); opacity: 0; }
  15%  { opacity: var(--ao); }
  80%  { opacity: var(--ao); }
  100% { transform: translate(var(--ax), var(--ay1)) scale(0.4); opacity: 0; }
}

/* ══ LEGAL MODAL (Pre-Login) ══ */
#pw-legal-link {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99100;
  display: flex;
  gap: 1.4rem;
  align-items: center;
}

.pw-legal-btn {
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255,185,110,0.35);
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s;
  text-transform: uppercase;
}

.pw-legal-btn:hover,
.pw-legal-btn:focus-visible { color: rgba(255,185,110,0.75); outline: none; }

.pw-legal-btn + .pw-legal-btn { position: relative; }
.pw-legal-btn + .pw-legal-btn::before { content: '·'; position: absolute; left: -0.9rem; color: rgba(255,185,110,0.2); }

#legal-modal {
  position: fixed;
  inset: 0;
  z-index: 99500;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  padding: 1.5rem;
}

#legal-modal.open { opacity: 1; pointer-events: auto; }

.legal-modal__box {
  position: relative;
  background: var(--bg-p);
  border: 1px solid var(--bdr);
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 2.5rem 2.8rem 2.8rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,185,110,0.25) transparent;
}

.legal-modal__box::-webkit-scrollbar       { width: 3px; }
.legal-modal__box::-webkit-scrollbar-thumb { background: rgba(255,185,110,0.25); }

.legal-modal__box .pc { position: absolute; width: 9px; height: 9px; border-color: var(--acc); border-style: solid; }
.legal-modal__box .pc.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.legal-modal__box .pc.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.legal-modal__box .pc.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.legal-modal__box .pc.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.legal-modal__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--bdr);
  margin-bottom: 2rem;
}

.legal-modal__tab {
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--td);
  padding: 0.6rem 1.2rem 0.8rem;
  cursor: pointer;
  text-transform: uppercase;
  position: relative;
  transition: color 0.2s;
}

.legal-modal__tab::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--acc);
  opacity: 0;
  transition: opacity 0.2s;
}

.legal-modal__tab.active,
.legal-modal__tab:hover { color: var(--acc); }
.legal-modal__tab.active::after { opacity: 1; }
.legal-modal__tab:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }

.legal-modal__panel { display: none; }
.legal-modal__panel.active { display: block; }

.legal-modal__title {
  font-family: var(--serif);
  font-size: clamp(1.6rem,3vw,2.2rem);
  font-weight: 300;
  color: var(--th);
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
  line-height: 1.1;
}

.legal-modal__line    { width: 40px; height: 1px; background: var(--bdr); margin-bottom: 1.8rem; }
.legal-modal__section { margin-bottom: 1.6rem; }

.legal-modal__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--td);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.legal-modal__text { font-size: 14px; line-height: 1.8; color: var(--tm); }
.legal-modal__text a { color: var(--acc); text-decoration: none; }
.legal-modal__text a:hover { text-decoration: underline; }

.legal-modal__close {
  position: absolute;
  top: 1rem; right: 1.2rem;
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--td);
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
  line-height: 1;
}

.legal-modal__close:hover,
.legal-modal__close:focus-visible { color: var(--acc); outline: none; }

/* ══ POST-LOGIN FOOTER ══ */
#site-footer {
  position: fixed;
  bottom: 0;
  left: calc(310px + 1rem);
  right: 1rem;
  z-index: 200;
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgba(255,185,110,0.1);
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

@media (max-width: 768px) {
  #site-footer { left: 0; right: 0; }
}

.site-footer__copy {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255,185,110,0.28);
  white-space: nowrap;
}

.site-footer__links { display: flex; gap: 1.2rem; pointer-events: auto; }

.site-footer__link {
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255,185,110,0.3);
  cursor: pointer;
  text-transform: uppercase;
  padding: 0;
  transition: color 0.2s;
}

.site-footer__link:hover,
.site-footer__link:focus-visible { color: var(--acc); outline: none; }

/* Post-Login Modal */
#legal-modal-post {
  position: fixed;
  inset: 0;
  z-index: 50000;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  padding: 1.5rem;
}

#legal-modal-post.open { opacity: 1; pointer-events: auto; }

/* ══ RESPONSIVE ══ */
@media (max-width: 768px) {
  #pw-mobile-hint { display: block !important; }
  #pw-voice { font-size: clamp(20px,5.5vw,28px) !important; line-height: 2.2 !important; }
  #pw-voice .line.show { opacity: 1; color: rgba(255,210,130,0.98) !important; }
  #pw-prompt { font-size: 24px !important; }
  #pw-input  { font-size: 22px !important; }
  #pw-send   { font-size: 26px !important; }
  #pw-input-wrap { padding-bottom: 12px !important; }
  #pw-error  { font-size: 16px !important; }
  #pw-mobile-hint { font-size: 13px !important; letter-spacing: 0.14em !important; color: rgba(255,185,110,0.65) !important; bottom: 2.5rem !important; }
  #pw-legal-link  { bottom: 5rem; }

  html, body { overflow: auto; height: auto; }

  #app {
    position: fixed !important;
    inset: 0 !important;
    flex-direction: column !important;
    padding: 0 !important;
    height: 100% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #beam-canvas { display: none; }
  #col-left    { display: none !important; }
  .pc          { display: none; }

  #col-mid {
    width: 100% !important;
    padding: 2.5rem 1.2rem 2rem !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #identity { flex-direction: column !important; align-items: center !important; gap: 1.2rem !important; width: 100% !important; text-align: center !important; opacity: 1 !important; }
  #id-name  { opacity: 1 !important; animation: none !important; }

  #photo {
    width: 130px !important;
    height: 130px !important;
    opacity: 1 !important;
    animation: none !important;
    clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%) !important;
  }

  .n1-first, .n1-last { font-size: clamp(1.6rem,7vw,2.2rem) !important; text-align: center !important; letter-spacing: 0.18em !important; line-height: 1.2 !important; }

  #bot-area   { display: none !important; }
  #robot-wrap { display: none !important; }
  #bubble     { display: none !important; }

  #col-right {
    width: 100% !important;
    padding: 0 !important;
    flex: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow-y: visible !important;
    position: relative !important;
  }

  .mob-section { padding: 2rem 1.4rem; border-bottom: 1px solid var(--bdr); }
  .mob-section:last-child { border-bottom: none; }
  .cb-title { font-size: clamp(1.8rem,7vw,2.6rem) !important; }
  .cb-text  { font-size: 15px !important; line-height: 1.8 !important; }

  #mob-progress     { position: fixed; right: 0; top: 0; bottom: 0; width: 3px; background: rgba(255,185,110,0.08); z-index: 800; pointer-events: none; }
  #mob-progress-bar { position: absolute; top: 0; left: 0; width: 100%; background: linear-gradient(to bottom, var(--acc), var(--accg)); border-radius: 0 0 2px 2px; transition: height 0.15s ease; box-shadow: 0 0 6px rgba(255,185,110,0.4); }
  #mob-progress-dot { position: absolute; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px rgba(255,185,110,0.8); transition: top 0.15s ease; }

  .mob-raume        { display: flex; flex-direction: column; gap: 0.8rem; padding: 2rem 1.4rem 3rem; }
  .mob-raume .mob-raume-btn { width: 100%; border: 1px solid var(--bdr); background: rgba(255,200,80,0.04); padding: 1rem 1.3rem; display: flex; align-items: center; gap: 0.9rem; cursor: pointer; position: relative; overflow: hidden; }
  .mob-raume-btn .tab-n { font-size: 11px; letter-spacing: 0.16em; color: var(--accg); opacity: 0.7; font-family: var(--mono); width: 28px; flex-shrink: 0; }
  .mob-raume-btn .tab-t { font-size: 17px; font-weight: 600; color: var(--accg); }

  .glitch-in, .data-stream-in { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }

  #world-board { position: relative !important; overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; min-height: 100vh !important; background: #030201 !important; }
  #studio-canvas, #board-horizon { display: none !important; }
  #board-wall { position: relative !important; }
  #stand-left, #stand-right, #board-bot { display: none !important; }

  .board-room { position: relative !important; flex-direction: column !important; align-items: center !important; padding: 2rem 1rem 5rem !important; bottom: auto !important; top: auto !important; perspective: none !important; gap: 2rem !important; min-height: auto !important; }

  .corkboard { flex: none !important; width: 88% !important; max-width: 340px !important; transform: none !important; opacity: 1 !important; filter: brightness(0.95) !important; cursor: default !important; pointer-events: none !important; }
  .corkboard:hover, .corkboard:active { transform: none !important; filter: brightness(0.95) !important; z-index: 1 !important; }
  .board-room:has(.corkboard:hover) .corkboard:not(:hover) { filter: brightness(0.95) !important; opacity: 1 !important; transform: none !important; }

  #board-back-area { position: relative !important; bottom: auto !important; left: auto !important; transform: none !important; display: flex !important; justify-content: center !important; padding: 1rem 0 2rem !important; flex-direction: row !important; gap: 0.8rem !important; }
  #board-back-area a.bb { display: none !important; }
  .bb { font-size: 13px; padding: 8px 20px; letter-spacing: 0.12em; animation: none !important; }
  .amb-host .amb-p { display: none !important; }

  #world-project { overflow-y: auto; align-items: flex-start; padding-top: 2rem; }
  .proj-content  { padding: 1rem 1.2rem 6rem; }
  .proj-title    { font-size: clamp(1.8rem,7vw,2.8rem) !important; }
  .proj-block-text { font-size: 15px !important; }
  #proj-bot      { display: none !important; }

  #project-back  { position: fixed !important; bottom: 1rem !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 10; }
  #project-back .bb { animation: none !important; }

  .legal-modal__box { padding: 2rem 1.4rem 2.4rem; }
  .legal-modal__title { font-size: 1.5rem; }

  #site-footer { padding: 0.5rem 1rem; flex-wrap: wrap; gap: 0.4rem; }
  .site-footer__copy { font-size: 9px; }
  .site-footer__link { font-size: 9px; }
}

@media (max-width: 480px) {
  .n1-first, .n1-last { font-size: clamp(1.3rem,6vw,1.7rem) !important; }
  #photo { width: 110px !important; height: 110px !important; }
  .cb-title { font-size: clamp(1.5rem,8vw,2rem) !important; }
  .cb-text  { font-size: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ══ A11Y — SKIP LINK ══ */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 999999;
  background: var(--acc);
  color: #000;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  font-weight: 700;
  transition: top 0.2s;
}
.skip-link:focus { top: 0.5rem; }

/* ══ A11Y — FOKUS SICHTBAR ══ */
html.a11y-focus *:focus-visible {
  outline: 3px solid var(--acc) !important;
  outline-offset: 3px !important;
}

/* ══ A11Y — HELLER MODUS ══ */
html.a11y-bright {
  --bg:    #f5f0e8 !important;
  --bg-p:  #ede8df !important;
  --bg-p2: #e8e2d8 !important;
  --th:    rgba(20,15,8,0.95) !important;
  --tm:    rgba(60,40,10,0.88) !important;
  --td:    rgba(120,80,20,0.7) !important;
  --tact:  rgba(180,100,0,0.12) !important;
  --bdr:   rgba(160,100,20,0.35) !important;
  --bh:    rgba(160,100,20,0.7) !important;
}

html.a11y-bright body { background: #f5f0e8; color: rgba(20,15,8,0.95); }
html.a11y-bright #pw-overlay { background: #f0ece2; }
html.a11y-bright #pw-terminal { color: rgba(100,60,10,0.9); }
html.a11y-bright #pw-input    { color: rgba(60,30,0,0.95); }
html.a11y-bright #board-wall  { background: #e8e0d0 !important; }
html.a11y-bright #world-board { background: #ede8df !important; }
html.a11y-bright #world-project { background: var(--bg) !important; }

/* ══ A11Y — ANIMATIONEN AUS ══ */
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
html.a11y-reduce-motion #beam-canvas,
html.a11y-reduce-motion #studio-canvas { display: none !important; }
html.a11y-reduce-motion .amb-p { display: none !important; }

/* ══ A11Y — SCHRIFTGRÖSSE ══ */
html.a11y-font-lg  { font-size: 112%; }
html.a11y-font-xl  { font-size: 128%; }

/* ══ A11Y — KONTRAST ══ */
html.a11y-contrast [data-theme="dark"],
html.a11y-contrast {
  --th:  rgba(255,255,255,1)    !important;
  --tm:  rgba(255,235,200,1)    !important;
  --td:  rgba(255,210,140,0.9)  !important;
  --bg:  #000000                !important;
  --bg-p:#000000                !important;
  --acc: #ffc966                !important;
  --bdr: rgba(255,185,110,0.55) !important;
}

/* ══ A11Y TOGGLE BUTTON ══ */
#a11y-toggle {
  position: fixed;
  top: 0.9rem;
  right: 1rem;
  z-index: 999950;
  background: rgba(10,8,5,0.92);
  border: 1px solid rgba(255,185,110,0.35);
  color: var(--acc);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  padding: 10px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.2s, background 0.2s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  user-select: none;
  -webkit-user-select: none;
  min-height: 44px;
  pointer-events: auto;
}
#a11y-toggle:hover,
#a11y-toggle:focus-visible {
  border-color: var(--acc);
  background: rgba(255,185,110,0.12);
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* Screenreader-only Hilfe */
.sr-hint {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard shortcut badge */
.kbd-hint {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--td);
  border: 1px solid rgba(255,185,110,0.2);
  padding: 1px 5px;
  border-radius: 2px;
  margin-inline-start: 4px;
  vertical-align: middle;
}

#a11y-toggle[aria-pressed="true"] {
  border-color: var(--acc);
  background: rgba(255,185,110,0.18);
  color: #fff;
}

@media (max-width: 768px) {
  #a11y-toggle { top: 0.6rem; right: 0.6rem; font-size: 12px; padding: 8px 12px; min-height: 40px; }
}

/* ══ VISUALLY HIDDEN UTILITY ══ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}