/* Root Theme Variables (Dark base) */
:root {
  --bg: #06060a;
  --bg-alt: #101016cc;
  --text: #f5f7fa;
  /* Modern multi-spectrum accent (coder neon) */
  --accent: linear-gradient(125deg,#6366f1,#8b5cf6,#ec4899,#f59e0b,#6366f1);
  --accent-alt: linear-gradient(120deg,#14b8a6,#6366f1,#a855f7,#ec4899,#f59e0b,#14b8a6);
  --accent-color: #ff4d74;
  --border: #ffffff18;
  --glass-bg: rgba(24,24,32,0.62);
  --glass-border: #ffffff22;
  --glass-shadow: 0 10px 40px -10px #000a, 0 0 0 1px #ffffff08;
  --btn-bg: #ffffff10;
  --btn-border: #ffffff25;
  --btn-bg-hover: #ffffff18;
  --overlay-grad: radial-gradient(circle at 30% 30%, #ffffff18, transparent 60%), linear-gradient(#00000055,#00000088);
  --ring-filter: saturate(1.2) brightness(.95);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  --scanline-color: rgba(255,255,255,0.04);
  --retro-accent: linear-gradient(115deg,#ff008c,#ff5400,#ffc300,#ff008c);
  --retro-glow-a: #ff008c;
  --retro-glow-b: #00d8ff;
  --retro-glow-c: #ffd200;
  --hue-shift: 0deg;
  --reactive-intensity: 0.1;
  --presence-accent: #19e68c;
  /* Fonts */
  --font-sans: 'Inter', 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
  --font-stack: var(--font-sans);
  --radius: 34px;
}

/* Touch / Mobile adaptive tweaks */
body.touch .gradient-text .letter { animation-duration:.6s; }
body.touch .gradient-text .letter { animation-delay: calc(var(--i)*25ms); }
body.touch .btn { padding:.95rem 1.3rem 1rem; }
body.touch .btn.circle { width:54px; height:54px; }
body.touch .presence { position:static; margin-top:.75rem; left:auto; top:auto; }
body.touch .presence-state { font-size:.62rem; }
body.touch .activity-line { font-size:.58rem; }

/* Safe-area padding (iOS notch) */
@supports(padding:max(0px)) {
  .hero { padding-top: max(2.2rem, env(safe-area-inset-top)); padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
  .buttons { margin-bottom: env(safe-area-inset-bottom); }
}

/* Mid-mobile adjustments */
@media (max-width: 540px) {
  .glass { padding:1.55rem 1.05rem 2rem; border-radius:28px; }
  .headline-wrap { margin: .8rem 0 .7rem; padding: .55rem 1rem .7rem; }
  .gradient-text { font-size: clamp(1.85rem,9vw,2.4rem); }
  .subtitle { font-size: clamp(.95rem,3.6vw,1.05rem); }
  .badge-cloud .badge { font-size:.58rem; letter-spacing:.8px; }
  .proof-pill { font-size:.55rem; letter-spacing:.9px; }
  .enter-overlay .enter-inner { padding:3.2rem 1.6rem 2.8rem; border-radius:42px; }
  .enter-brand { font-size: clamp(2.4rem, 16vw, 3.4rem); }
  .enter-rotator .line { font-size: clamp(.82rem,3.8vw,.95rem); }
  .enter-cta { font-size:.62rem; letter-spacing:1.6px; }
  .connect-btn { font-size:.62rem; letter-spacing:1px; padding:.85rem 1.1rem .8rem; }
  .presence { gap:4px; }
  .info-grid { gap:1.25rem; }
}

  /* Travel */
  .travel-block{display:flex;flex-direction:column;gap:.75rem}
  .travel-summary{display:flex;gap:1rem;flex-wrap:wrap}
  .travel-summary .t-stat{background:var(--panel-bg,#161616);padding:.5rem .75rem;border-radius:8px;display:flex;flex-direction:column;align-items:flex-start;min-width:90px}
  .travel-summary .t-label{font-size:.65rem;letter-spacing:.05em;color:#888;text-transform:uppercase}
  .travel-summary .t-val{font-size:1.35rem;font-weight:600;line-height:1.1}
  .travel-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
  .travel-lists .t-col{background:var(--panel-bg,#161616);padding:.75rem .8rem;border-radius:8px;display:flex;flex-direction:column;max-height:260px}
  .travel-lists .t-sub{margin:0 0 .4rem;font-size:.85rem;font-weight:600;letter-spacing:.5px;color:#bcbcbc}
  .travel-lists .t-list{list-style:none;margin:0;padding:0;overflow:auto;scrollbar-width:thin}
  .travel-lists .t-list li{font-size:.8rem;line-height:1.3;padding:.15rem 0;border-bottom:1px solid #222}
  .travel-lists .t-list li:last-child{border-bottom:none}
  .travel-lists .t-list li .flag{font-size:1rem;margin-right:.4rem}
  .travel-lists .t-list li.country-item{padding:.25rem .15rem .35rem;border-bottom:1px solid #222}
  .travel-lists .t-list li.country-item:last-child{border-bottom:none}
  .travel-lists .t-list li.country-item > .row{display:flex;align-items:center;gap:.4rem;font-weight:500;font-size:.8rem}
  .travel-lists .t-list li.country-item .flag{font-size:1rem;line-height:1;filter:saturate(1.1);}
  .travel-lists .t-list li.country-item .flag img{display:inline-block;width:24px;height:18px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px #000a,0 1px 2px -1px #000;}
  .travel-lists .t-list li.country-item .continent{font-size:.5rem;letter-spacing:.8px;text-transform:uppercase;background:#222;padding:.18rem .4rem .2rem;border-radius:10px;color:#8aa; margin-left:.1rem;}
  .travel-lists .t-list li.country-item .continent[data-c="EU"]{background:#243053;color:#c3d5ff}
  .travel-lists .t-list li.country-item .continent[data-c="AS"]{background:#362d24;color:#ffd7a8}
  .travel-lists .t-list li.country-item .continent[data-c="NA"]{background:#2d2638;color:#e3c5ff}
  .travel-lists .t-list li.country-item .continent[data-c="SA"]{background:#33242a;color:#ffc3d1}
  .travel-lists .t-list li.country-item .continent[data-c="AF"]{background:#1e302a;color:#b9f5e1}
  .travel-lists .t-list li.country-item .continent[data-c="OC"]{background:#1e2f35;color:#b9ebf5}
  .travel-lists .t-list li.country-item .continent[data-c="AN"]{background:#2d2d2d;color:#ddd}
  .travel-actions{display:flex;gap:.5rem;margin:.2rem 0 .3rem;}
  .travel-actions .t-act{background:#1c1c1c;border:1px solid #2a2a2a;color:#bbb;font-size:.55rem;letter-spacing:.8px;text-transform:uppercase;padding:.35rem .6rem .4rem;border-radius:6px;cursor:pointer;transition:.25s}
  .travel-actions .t-act:hover{background:#222;color:#eee}
  .travel-actions .t-act:active{transform:translateY(1px)}
  #qmTravel .qm-line{font-size:.62rem;letter-spacing:.6px;}
  .live-ind{font-size:.6rem;vertical-align:middle;margin-left:.4rem;display:inline-block;line-height:1;transform:translateY(-1px);color:#777;transition:.35s}
  .live-ind.live{color:#19e68c;text-shadow:0 0 6px #19e68c99,0 0 14px #19e68c55;}
  .live-ind.error{color:#ff5d5d;text-shadow:0 0 6px #ff5d5d99;}
  .live-ind.reconnecting{color:#f5d15a;text-shadow:0 0 6px #f5d15a99;}
  .live-ind.mini{font-size:.55rem;margin-left:.3rem;}
  .light .travel-lists .t-list li.country-item .flag{filter:none}
  .travel-lists .t-list li.country-item .city-count{margin-left:auto;font-size:.6rem;background:#222;padding:.15rem .4rem;border-radius:1rem;letter-spacing:.5px;color:#aaa}
  .travel-lists .t-list li.country-item ul.sub-cities{list-style:none;margin:.25rem 0 .2rem .95rem;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .55rem}
  .travel-lists .t-list li.country-item ul.sub-cities li{border:none;font-size:.65rem;padding:0;line-height:1.2;background:#1f1f1f;padding:.25rem .45rem;border-radius:6px}
  .travel-lists .t-list li.country-item.collapsed ul.sub-cities{display:none}
  .travel-lists .t-list li.country-item button.toggle{background:none;border:none;color:#777;cursor:pointer;font-size:.65rem;padding:.1rem .3rem;border-radius:4px;transition:.2s}
  .travel-lists .t-list li.country-item button.toggle:hover{background:#222;color:#bbb}
  .t-note{font-size:.7rem;color:#888;margin:0}
  /* Country click pulse micro-interaction */
  .travel-lists .t-list li.country-item{position:relative;}
  .travel-lists .t-list li.country-item.pulse{animation:countryPulse .85s ease-out;}
  @keyframes countryPulse { 0%{box-shadow:0 0 0 0 rgba(255,200,80,.55); transform:scale(1);} 45%{box-shadow:0 0 0 8px rgba(255,200,80,0); transform:scale(1.02);} 100%{box-shadow:0 0 0 0 rgba(255,200,80,0); transform:scale(1);} }

  @media (max-width:700px){
    .travel-summary .t-stat{flex:1}
  }

/* Ultra small devices */
@media (max-width: 400px) {
  .glass { padding:1.35rem .9rem 1.8rem; }
  .enter-overlay .enter-inner { padding:2.6rem 1.15rem 2.1rem; border-radius:36px; }
  .enter-brand { font-size: clamp(2.1rem, 18vw, 3rem); letter-spacing:.03em; }
  .enter-rotator { gap:.45rem; margin:0 0 1.6rem; }
  .enter-cta { padding:.75rem 1.1rem .7rem; }
  .badge-cloud .badge { padding:.45rem .75rem .42rem; }
  .rotator-wrap { padding:.6rem .85rem .7rem; }
  /* keep prefix visible on mobile (removed previous display:none) */
  /* .rotator-wrap .pre { display:none; } */
  .subtitle { font-size: .9rem; }
  .info-block p { font-size:.88rem; }
  .buttons { gap:.6rem; }
  .btn { font-size:.7rem; padding:.75rem 1rem .75rem; }
}

/* Optimize animations when very constrained height */
@media (max-height: 620px) and (max-width: 540px) {
  .avatar { width:100px; height:100px; }
  .presence { margin-top:.5rem; }
  body.touch .gradient-text .letter { animation-delay: calc(var(--i)*18ms); }
}

/* Light mode keeps cinematic dark video; only UI shifts subtly */
.light {
  --bg: #06060a; /* keep video visible */
  --bg-alt: #14141ecc;
  --text: #f5f7fa;
  --accent: linear-gradient(120deg,#ff4d88,#ff9a33,#ffd94d,#ff4d88);
  --accent-color: #ff6fa0;
  --border: #ffffff24;
  --glass-bg: rgba(255,255,255,0.08);
  --glass-border: #ffffff28;
  --glass-shadow: 0 10px 40px -10px #000a, 0 0 0 1px #ffffff0a;
  --btn-bg: #ffffff14;
  --btn-border: #ffffff30;
  --btn-bg-hover: #ffffff25;
  --overlay-grad: radial-gradient(circle at 30% 30%, #ffffff1a, transparent 60%), linear-gradient(#00000055,#00000088);
  --ring-filter: saturate(1.1) brightness(1);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-stack);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
  transition: background-color .6s ease, color .6s ease;
}
body.enter-overlay-lock { overflow:hidden; height:100dvh; }
body::after { content:""; pointer-events:none; position:fixed; inset:0; background:var(--noise); mix-blend-mode:overlay; opacity:.25; z-index:-1; }
/* Dark mode CRT scanlines + vignette */
body:not(.light)::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; background:
  radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,.55) 100%),
  repeating-linear-gradient(to bottom, var(--scanline-color) 0 2px, transparent 2px 4px);
  mix-blend-mode:overlay; animation: scanFlicker 7s linear infinite, vignettePulse 14s ease-in-out infinite; opacity:.55; }
@keyframes scanFlicker { 0%,2%,4% { opacity:.55; } 1% { opacity:.35; } 3% { opacity:.65; } 10% { opacity:.55;} 50% { opacity:.6;} 90% {opacity:.5;} 100% {opacity:.55;} }
@keyframes vignettePulse { 0%,100% { filter:brightness(1) contrast(1); } 50% { filter:brightness(.98) contrast(1.05); } }

/* Fallback state: no video */
.no-video .bg-video { display:none; }
.no-video body, body.no-video { background: radial-gradient(circle at 30% 30%, #1a1a24, #050509); }
.no-audio #musicToggle { opacity:.3; pointer-events:none; }

.bg-video {
  position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3;
  filter: brightness(.85) saturate(1.25) blur(1.2px) contrast(1.08);
}
.overlay { position: fixed; inset: 0; background: radial-gradient(circle at 30% 30%, #ffffff10, transparent 60%), linear-gradient(#000000aa,#000000aa); backdrop-filter: blur(4px); z-index: -2; }
.overlay { position: fixed; inset: 0; background: var(--overlay-grad); backdrop-filter: blur(2.5px); z-index: -2; transition: background .8s ease; }
#particles { position: fixed; inset:0; width:100%; height:100%; z-index:-1; }

.hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; padding: clamp(1rem,2vw,2rem); perspective: 1600px; }
.hero {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-height: 100dvh;
  padding: clamp(2.5rem,6vh,4rem) clamp(1rem,2vw,2rem) clamp(1rem,2vw,2rem);
}

.glass { background: var(--glass-bg); backdrop-filter: blur(18px) saturate(1.3); border: 1.5px solid var(--glass-border); border-radius: var(--radius); padding: clamp(1.5rem, 2.5vw, 3rem); width: min(100%, 1050px); box-shadow: var(--glass-shadow); position: relative; animation: floatIn .9s cubic-bezier(.16,.8,.24,1); transition: background .6s ease, border-color .6s ease, box-shadow .6s ease, transform .4s ease; transform-style: preserve-3d; --rx:0deg; --ry:0deg; --rz:0deg; transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0); }
.glass::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(140deg,#ff0066aa,#ff990055,#ffd20066,#ff006622); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; pointer-events:none; transition: opacity .6s ease; }
.glass::after { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 20% 15%,#ff006615,transparent 60%),radial-gradient(circle at 80% 85%,#ffd20015,transparent 55%); mix-blend-mode:color-dodge; pointer-events:none; transition: opacity .6s ease; }
.light .glass::before { opacity:.35; }
.light .glass::after { opacity:.4; mix-blend-mode:normal; }

@keyframes floatIn { from { transform: translateY(30px); opacity:0;} to { transform: translateY(0); opacity:1;} }

.avatar-wrapper { position: relative; display: inline-block; }
.avatar {
  width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 3px solid #ffffff30; box-shadow: 0 4px 18px -4px #000000c0; display:block;
  animation: pop 1.2s ease;
}
/* Avatar ring + status */
.avatar-ring { position:relative; display:inline-block; padding:6px; border-radius:50%; background:conic-gradient(from 0deg,var(--accent-color),#ff9900,#ff0066,var(--accent-color)); animation: spin 6s linear infinite; filter: var(--ring-filter); transition: filter .6s ease; }
.avatar-ring .status-arc { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.avatar-ring .status-arc circle { fill:none; stroke:var(--presence-accent); stroke-width:3px; stroke-linecap:round; stroke-dasharray:125.6; stroke-dashoffset:0; opacity:.55; transition:.5s stroke,.5s opacity; }
.avatar-ring[data-presence="idle"] .status-arc circle { stroke:#f5d15a; }
.avatar-ring[data-presence="focus"] .status-arc circle { stroke:#ff4d4d; }
.avatar-ring[data-presence="offline"] .status-arc circle { stroke:#555; opacity:.25; }
@keyframes spin { to { transform: rotate(360deg); } }
.light .avatar-ring { filter: saturate(1.1) brightness(.95); }
.status-dot { position:absolute; bottom:10px; right:10px; width:20px; height:20px; border:3px solid var(--bg-alt); border-radius:50%; background:#666; box-shadow:0 0 0 2px #00000040,0 4px 10px -2px #0006; }
.status-dot[data-status="online"]  { background:#43b581; }
.status-dot[data-status="idle"]    { background:#faa61a; }
.status-dot[data-status="dnd"]     { background:#f04747; }
.status-dot[data-status="offline"] { background:#747f8d; }
.presence { display:flex; flex-direction:column; font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; position:absolute; left:155px; top:8px; gap:2px; }
.presence-state { background:#ffffff12; padding:.35rem .6rem; border-radius: 999px; backdrop-filter: blur(4px); border:1px solid #ffffff25; max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* presence-state text removed */
.activity-line { font-size:.62rem; opacity:.75; max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.avatar-wrapper:hover .presence-state { animation: pulseGlow 2.2s ease-in-out infinite; }
@keyframes pulseGlow { 0%,100% { box-shadow:0 0 0 0 #ff006620; } 50% { box-shadow:0 0 0 6px #ff990010; } }
@keyframes pop { 0% { transform: scale(.6) rotate(-10deg); opacity:0; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity:1; } }

.gradient-text { 
  background: var(--accent); 
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent; 
  font-size: clamp(2.4rem, 5.5vw, 3.8rem); 
  line-height: 1.05; 
  margin: 0;
  background-size: 200% 200%; 
  animation: accentShift 12s ease infinite; 
  position: relative;
  font-weight: 800;
  letter-spacing: -0.03em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* KEINE Blur-Effekte mehr - nur subtile Brightness */
body:not(.light) .gradient-text { 
  filter: brightness(1.15) contrast(1.1) hue-rotate(var(--hue-shift));
}
/* Blurry after element komplett entfernt für scharfe Schrift */
/* Letter FX - minimaler blur nur während Animation */
.gradient-text .letter { 
  display: inline-block; 
  transform: translateY(30px) scale(0.92); 
  opacity: 0; 
  filter: blur(2px); 
  animation: letterRise 0.7s cubic-bezier(0.16, 0.8, 0.24, 1) forwards;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.gradient-text .letter, .gradient-text * { 
  background: inherit; 
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent;
}
.entered .gradient-text .letter { animation-delay: calc(var(--i)*35ms); }
@keyframes letterRise { to { transform:translateY(0) scale(1); opacity:1; filter:none; } }
.wow-burst { position:fixed; inset:0; pointer-events:none; z-index:99999; }
.audio-reactive body:not(.light) .gradient-text .letter:nth-child(odd){ animation-duration:1.1s; }
/* Glitch effects deaktiviert für saubere Schrift */

/* Entered global animation boost */
body.entered .glass { animation: floatIn .9s cubic-bezier(.16,.8,.24,1), popDepth 1.8s ease; }
@keyframes popDepth { 0% { transform:translateZ(-140px) scale(.92) rotateX(8deg); } 60% { transform:translateZ(0) scale(1.01); } 100% { transform:translateZ(0) scale(1); } }

/* Reactive aura */
body.audio-reactive:not(.light) .glass::after { box-shadow:0 0 calc(40px + var(--reactive-intensity)*80px) -10px #ff008c33; }
body.audio-reactive:not(.light) .glass::before { opacity: calc(.4 + var(--reactive-intensity)*.3); }
@keyframes hueDrift { 0% { filter:blur(4px) saturate(1.4) hue-rotate(0deg); } 50% { filter:blur(4px) saturate(1.4) hue-rotate(180deg);} 100% { filter:blur(4px) saturate(1.4) hue-rotate(360deg);} }
.highlight { 
  position: relative;
  display: inline-block;
}
.subtitle { 
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); 
  margin-top: 0.25rem; 
  opacity: 0.88; 
  transition: color 0.6s ease;
  letter-spacing: 0.03em;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
.light .subtitle { 
  opacity: 0.82;
}

.info-grid { display: grid; gap: 1.75rem; margin-top: 2rem; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.info-grid .skills-block { order:2; }
.info-grid .soft-block { order:3; }
.info-grid .hike-block { order:4; }
.info-grid .verse-block { order:5; }
.info-grid .quotes-block { order:6; }
/* Travel directly under hiking */
.info-grid .travel-block { order:5; }
/* Shift verse & quotes after travel */
.info-grid .verse-block { order:6; }
.info-grid .quotes-block { order:7; }
@media (max-width: 730px){
  .info-grid { display:flex; flex-direction:column; }
  /* Order on small screens: about(implicit 0), hobbies(implicit 0/1), verses, quotes, skills, soft, hiking */
  .info-grid .verse-block { order:2; }
  .info-grid .quotes-block { order:3; }
  .info-grid .skills-block { order:10; }
  .info-grid .soft-block { order:11; }
  .info-grid .hike-block { order:12; }
  .info-grid .travel-block { order:13; }
}
.info-block { background: #ffffff05; border:1px solid var(--border); padding: 1rem 1.1rem 1.25rem; border-radius: 18px; position: relative; overflow: hidden; backdrop-filter: blur(6px); transition: background .6s ease, border-color .6s ease; }
.light .info-block { background:#00000006; }
.info-block h2 { margin:0 0 .6rem; font-size: 1.05rem; letter-spacing:.5px; text-transform: uppercase; opacity:.85; }
.info-block p { margin:0; line-height:1.45; font-size:.95rem; }
/* Animated gradient border only on hover */
.info-block::before { content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; background:linear-gradient(130deg,#ff008c,#ffae00,#ffd200,#ff008c); background-size:300% 300%; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; pointer-events:none; transition:opacity .55s ease, background-position 6s linear; }
.info-block:hover::before { opacity:.92; background-position:100% 50%; }
@media (prefers-reduced-motion:reduce){ .info-block::before{ background-size:100% 100%; transition:opacity .4s ease; } }

/* Steckbrief */
.steckbrief { display:flex; flex-direction:column; gap:.9rem; }
.brief-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.6rem .75rem; }
.b-item { position:relative; background:#ffffff0e; border:1px solid #ffffff18; padding:.65rem .7rem .6rem; border-radius:12px; font-size:.72rem; letter-spacing:.6px; text-transform:uppercase; display:flex; flex-direction:column; gap:.25rem; backdrop-filter:blur(4px); }
.b-item::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(140deg,#ff008c66,#ffd20033,#ff008c33); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; pointer-events:none; }
.b-item .b-label { font-weight:600; font-size:.6rem; opacity:.7; letter-spacing:1px; }
.b-item .b-val { font-weight:500; font-size:.78rem; line-height:1.15; text-transform:none; letter-spacing:.3px; }
.b-item.span2 { grid-column:span 2; }
@media (max-width:580px){ .b-item.span2 { grid-column:span 1; } }
.micro-line { font-size:.7rem; letter-spacing:.7px; opacity:.75; text-transform:uppercase; background:#ffffff10; border:1px solid #ffffff17; padding:.55rem .8rem .5rem; border-radius:14px; display:inline-flex; align-items:center; gap:.5rem; }
.light .b-item { background:#0000000e; border-color:#00000018; }
.light .micro-line { background:#00000010; border-color:#00000015; }

/* Quotes */
.quotes { list-style:none; margin:.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.quotes li { position:relative; font-size:.78rem; line-height:1.35; background:#ffffff0d; border:1px solid #ffffff18; padding:.7rem .85rem .65rem 1rem; border-radius:14px; letter-spacing:.3px; }
.quotes li .q-author { display:block; margin-top:.4rem; font-size:.62rem; letter-spacing:.9px; text-transform:uppercase; opacity:.6; }
.quotes li .q-text { display:block; }
.quotes li::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px 0 0 3px; background:linear-gradient(180deg,#ff008c,#ffd200); opacity:.85; }
.light .quotes li { background:#0000000d; border-color:#00000016; }

.chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.chips li { background:#ffffff12; padding:.45rem .85rem; border-radius: 999px; font-size:.75rem; letter-spacing:.5px; text-transform:uppercase; backdrop-filter: blur(4px); border:1px solid #ffffff20; transition: background .5s ease, border-color .6s ease; }
.light .chips li { background:#00000012; border-color:#00000015; }

/* Skill bars layout */
.bars { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.2rem; }
.bars li { position:relative; height:34px; width:100%; }
/* Track */
.bars li .track { position:absolute; left:0; right:0; bottom:0; height:10px; background:#ffffff16; border-radius:6px; overflow:hidden; }
.light .bars li .track { background:#0000001f; }
/* Fill */
.bars li .track .fill { position:absolute; inset:0; width:var(--w,0); background:var(--accent); border-radius:inherit; filter:saturate(1.4); transition: width 1.3s cubic-bezier(.16,.8,.24,1); }
/* Labels */
.bars li .skill-label { position:absolute; left:0; top:0; font-size:.63rem; letter-spacing:1px; text-transform:uppercase; opacity:.78; padding-left:22px; line-height:1.1; }
.bars li .val { position:absolute; right:0; top:0; font-size:.55rem; letter-spacing:1px; opacity:.55; }
/* Icon for each skill */
.bars li .skill-label::before { content:""; position:absolute; left:0; top:50%; width:16px; height:16px; transform:translateY(-50%); background-size:contain; background-repeat:no-repeat; filter:drop-shadow(0 0 2px #0008); }
.bars li[data-skill="python"] .skill-label::before { background-image:url("../media/python.png"); }
.bars li[data-skill="html"] .skill-label::before { background-image:url("../media/html.png"); }
.bars li[data-skill="css"] .skill-label::before { background-image:url("../media/css.png"); }
.bars li[data-skill="js"] .skill-label::before { background-image:url("../media/js.png"); }
.bars li[data-skill="hardware"] .skill-label::before { background-image:url("../media/hardware.png"); filter:none; }
/* JS sets width for bars; keyframes removed due to attr() unsupported for width */

.buttons { display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.25rem; }
.btn { cursor:pointer; border:none; outline:none; font:600 .9rem var(--font-stack); letter-spacing:.5px; text-transform:uppercase; padding:.9rem 1.25rem; border-radius: 14px; background: var(--btn-bg); color: var(--text); position:relative; transition:.35s; backdrop-filter: blur(6px); border:1px solid var(--btn-border); display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; }
.btn:hover { background: var(--btn-bg-hover); }
.light .btn { color:#111; }
.light .btn.primary { color:#111; }
.btn.primary { background: var(--accent); color:#111; }
.btn.outline { background: transparent; border:1px solid #ffffff40; }
.btn:hover { transform: translateY(-3px); box-shadow:0 6px 18px -6px #000a, 0 0 0 1px #ffffff25; }
.btn:active { transform: translateY(0); }
.btn.circle { position:absolute; bottom:4px; right:4px; width:46px; height:46px; padding:0; display:grid; place-items:center; border-radius:50%; backdrop-filter: blur(10px); background:#00000066; transition: background .5s ease; }
.light .btn.circle { background:#ffffffcc; }
.btn.circle .icon { font-size:1rem; }
/* Music button enhanced */
#musicToggle { position:absolute; bottom:6px; right:6px; }
#musicToggle { --eq-color: #ff008c; }
#musicToggle.is-playing .icon { animation: pulseIcon 2.2s ease-in-out infinite; }
@keyframes pulseIcon { 0%,100% { transform:scale(1); filter:drop-shadow(0 0 4px #ff008c88);} 50% { transform:scale(1.18); filter:drop-shadow(0 0 10px #ffd20066);} }
#musicToggle.long-press { box-shadow:0 0 0 2px #ff008c88,0 0 14px -2px #ffd200aa; }
/* Mini equalizer bars (mobile focus) */
@media (max-width: 730px){
  #musicToggle { width:60px; height:60px; }
  #musicToggle .icon { position:relative; }
  #musicToggle.is-playing .icon::after { content:""; position:absolute; left:50%; top:100%; width:26px; height:12px; transform:translate(-50%,6px); display:grid; grid-auto-flow:column; grid-gap:3px; }
  #musicToggle.is-playing .icon::after { --bars:4; }
  #musicToggle.is-playing .icon::after { animation:none; }
  #musicToggle.is-playing .icon::before { content:""; }
  #musicToggle.is-playing { background:linear-gradient(145deg,#161626cc,#090912dd); }
  #musicToggle.is-playing .icon { font-size:1.05rem; }
}
/* Inline generated bars via pseudo elements */
#musicToggle.is-playing { --b1: 40%; --b2: 70%; --b3:55%; --b4:85%; }
#musicToggle.is-playing .icon { display:inline-flex; align-items:center; justify-content:center; }
#musicToggle.is-playing .icon span { display:none; }
/* Use extra elementless bars */
#musicToggle.is-playing .icon { position:relative; }
#musicToggle.is-playing .icon i { display:none; }
#musicToggle.is-playing .icon::before { content:""; position:absolute; left:50%; top:calc(100% + 4px); width:30px; height:14px; display:flex; justify-content:space-between; }
#musicToggle.is-playing .icon::before { --w:5px; --r:3px; }
#musicToggle.is-playing .icon::before { animation:none; }
#musicToggle.is-playing .icon::before { background:linear-gradient(to right, transparent, transparent); }
#musicToggle.is-playing .icon em { display:none; }
/* Individual animated bars using multiple shadows trick */
#musicToggle.is-playing .icon::after { content:""; position:absolute; left:50%; top:calc(100% + 4px); width:32px; height:16px; --c:#ff008c; }
#musicToggle.is-playing .icon::after { --barW:4px; --gap:4px; }
#musicToggle.is-playing .icon::after { background:
  linear-gradient(var(--c),var(--c)) left/var(--barW) var(--b1) no-repeat,
  linear-gradient(var(--c),var(--c)) calc(var(--barW) + var(--gap)) / var(--barW) var(--b2) no-repeat,
  linear-gradient(var(--c),var(--c)) calc(2*(var(--barW) + var(--gap))) / var(--barW) var(--b3) no-repeat,
  linear-gradient(var(--c),var(--c)) calc(3*(var(--barW) + var(--gap))) / var(--barW) var(--b4) no-repeat; animation:eqBars 1s linear infinite; border-radius:2px; transform:translate(-50%,0); filter:drop-shadow(0 0 6px #ff008c55);
}
@keyframes eqBars { 0% { --b1:35%; --b2:70%; --b3:50%; --b4:80%; } 25% { --b1:70%; --b2:45%; --b3:85%; --b4:40%; } 50% { --b1:55%; --b2:80%; --b3:40%; --b4:75%; } 75% { --b1:80%; --b2:55%; --b3:70%; --b4:50%; } 100% { --b1:40%; --b2:70%; --b3:55%; --b4:85%; } }
/* Retro button hover glow (dark) */
body:not(.light) .btn.primary:hover { box-shadow:0 0 0 1px #ff008c66, 0 0 12px #ff008c55, 0 0 calc(22px + var(--reactive-intensity)*40px) #ffae0044; }
body:not(.light) .btn:hover { box-shadow:0 0 0 1px #ffffff30, 0 0 calc(10px + var(--reactive-intensity)*20px) -2px #ff008c40; }

/* Activity marquee effect (if long) */
.marquee { --move: 100%; position:relative; display:inline-block; animation: marquee 9s linear infinite; padding-right:3rem; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(var(--move) * -1); } }
@keyframes accentShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Enter Overlay Enhanced */
.enter-overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 32% 30%,#090914d9,#040409e6); backdrop-filter: blur(14px) saturate(1.5); z-index:100000; cursor:pointer; transition:opacity .7s ease, background 1s ease; overflow:hidden; }
.light .enter-overlay { background:radial-gradient(circle at 32% 30%,#0d0d18d9,#040409e6); }
.enter-overlay.fade { opacity:0; pointer-events:none; }
.enter-overlay .enter-inner { text-align:center; max-width:780px; width:100%; padding:4.2rem clamp(2rem,3.2vw,3rem) 3.8rem; border-radius:60px; position:relative; background:linear-gradient(155deg,#0b0b16cc,#070711dd 58%,#0b0b16cc); box-shadow:0 30px 90px -35px #000,0 0 0 1px #ffffff16,0 0 140px -50px #ff008c66; overflow:hidden; }
.enter-overlay .enter-inner::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:3px; background:linear-gradient(140deg,#ff008c,#ffae00,#ffd200,#ff008c); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.85; }
.enter-overlay .enter-glow { position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 22% 28%,#ff008c33,transparent 60%),radial-gradient(circle at 78% 72%,#ffd20024,transparent 65%),radial-gradient(circle at 50% 50%,#ff6f001f,transparent 72%); mix-blend-mode:screen; filter:blur(34px) saturate(1.4); opacity:.8; animation: enterGlow 12s ease-in-out infinite; }
@keyframes enterGlow { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }
.enter-brand { font:700 clamp(2.8rem,7.2vw,5.4rem) 'Inter',sans-serif; letter-spacing:.045em; margin:0 0 1.6rem; background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent; animation: accentShift 12s ease infinite; position:relative; text-shadow:0 4px 32px #000a,0 0 42px #ff008c44,0 0 80px -10px #ffd20055; }
.enter-rotator { display:grid; gap:.65rem; margin:0 0 2.35rem; }
.enter-rotator .line { opacity:0; transform:translateY(14px); filter:blur(8px); transition:opacity .75s cubic-bezier(.16,.8,.24,1), transform .75s cubic-bezier(.16,.8,.24,1), filter .75s; font-size:clamp(.92rem,1.6vw,1.18rem); line-height:1.38; letter-spacing:.55px; }
.enter-rotator .line.active { opacity:1; transform:translateY(0); filter:blur(0); }
.enter-cta { display:inline-flex; align-items:center; gap:.7rem; font-size:.78rem; letter-spacing:2.1px; text-transform:uppercase; background:#ffffff12; padding:.95rem 1.55rem .9rem; border-radius:999px; border:1px solid #ffffff26; backdrop-filter: blur(9px); position:relative; box-shadow:0 10px 30px -12px #000c,0 0 0 1px #ffffff24; animation: pulseCTA 3.2s ease-in-out infinite; }
@keyframes pulseCTA { 0%,100% { transform:translateY(0); box-shadow:0 10px 30px -12px #000c,0 0 0 1px #ffffff24; } 50% { transform:translateY(-5px); box-shadow:0 16px 42px -16px #000c,0 0 0 1px #ffffff35; } }
.enter-cta .pulse { width:18px; height:18px; border-radius:50%; background:linear-gradient(140deg,#ff008c,#ffd200); box-shadow:0 0 0 0 #ff008c70; animation: pulseBeat 2.4s infinite; }
@keyframes pulseBeat { 0% { box-shadow:0 0 0 0 #ff008c80; transform:scale(.9);} 60% { box-shadow:0 0 0 16px #ff008c00; transform:scale(1.08);} 100% { box-shadow:0 0 0 0 #ff008c00; transform:scale(.9);} }
.enter-hint { margin-top:1.5rem; font-size:.62rem; letter-spacing:2.1px; opacity:.5; text-transform:uppercase; }
.enter-overlay .cta-text { background:linear-gradient(120deg,#fff,#ffeef8,#fff); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:600; }
/* Avatar ring: removed global hue-rotate to keep avatar colors stable */
body:not(.light) .avatar-ring { animation: spin 9s linear infinite, ringPulse 4.5s ease-in-out infinite; filter: var(--ring-filter); }
@keyframes ringPulse { 0%,100% { filter: saturate(1.3) brightness(.95); } 50% { filter:saturate(1.6) brightness(1.1); } }
.light .gradient-text::after { 
  display: none;
}
.light .gradient-text {
  filter: brightness(0.95) contrast(1.15);
}
/* Slight scanline text shimmer for small subtitles (dark) */
body:not(.light) .subtitle { animation: subtitleFlicker 11s linear infinite; filter:hue-rotate(var(--hue-shift)); }
@keyframes subtitleFlicker { 0%,92%,96%,100% { opacity:.97; } 93% { opacity:.9;} 95% { opacity:.85;} 97% { opacity:.95;} }

.footer { margin-top:2.5rem; font-size:.65rem; text-transform:uppercase; letter-spacing:1.2px; opacity:.6; text-align:center; }

/* Theme toggles */
.light .glass { box-shadow: 0 8px 26px -8px #0002, 0 0 0 1px #00000008; }
.light .chips li { background:#00000008; }
.light .info-block { background:#00000005; }
.light .btn.circle { background:#ffffff80; }

/* Responsive */
@media (max-width: 730px) {
  .glass { padding:1.75rem 1.25rem 2.25rem; }
  .avatar { width:110px; height:110px; }
  .gradient-text { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .info-grid { grid-template-columns: 1fr; }
  .presence { position:static; margin-top:.75rem; flex-direction:row; flex-wrap:wrap; gap:.4rem; }
  .presence-state { order:1; }
  .activity-line { flex-basis:100%; order:2; }
}

/* Headline readability wrapper */
.headline-wrap { position:relative; display:inline-block; padding: clamp(.65rem,1.2vw,1rem) clamp(1.1rem,1.8vw,1.6rem) clamp(.85rem,1.4vw,1.2rem); margin: 1.1rem 0 1rem; border-radius: 38px; background:linear-gradient(145deg, #0b0b16cc, #05050acc); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 8px 28px -8px #000c, 0 0 0 1px #ffffff12, 0 0 38px -6px #6366f155; overflow:visible; }
body.light .headline-wrap { background:linear-gradient(145deg,#0c0c18cc,#08080fcc); box-shadow:0 8px 26px -8px #0009,0 0 0 1px #ffffff10,0 0 30px -6px #6366f130; }
.headline-wrap::before { content:""; position:absolute; inset:-2px; padding:2px; border-radius:inherit; background:linear-gradient(140deg,#6366f1,#8b5cf6,#ec4899,#f59e0b,#6366f1); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.9; pointer-events:none; filter:hue-rotate(var(--hue-shift)); transition:opacity .6s ease; }
body.audio-reactive .headline-wrap::before { opacity: calc(.55 + var(--reactive-intensity)*.45); }
.headline-wrap .gradient-text { margin:0; }


/* (Removed Matrix style code rain for warmer nostalgic vibe) */

/* Dynamic Rotator + Badges + Social Proof */
.hero-addon { margin-top:1.2rem; display:flex; flex-direction:column; gap:1.35rem; }
.rotator-wrap { font-family: var(--font-sans); font-weight:600; font-size: clamp(1.05rem,1.6vw,1.35rem); letter-spacing:.5px; display:flex; align-items:center; gap:.6rem; background:linear-gradient(140deg,#0c0c18cc,#07070fdd); padding:.75rem 1.1rem .85rem; border-radius: 18px; position:relative; border:1px solid #ffffff18; backdrop-filter: blur(8px) saturate(1.4); box-shadow:0 4px 20px -6px #000a, 0 0 0 1px #ffffff08; }
.rotator-wrap::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(160deg,#ff008c,#ffae00,#ffd200,#ff008c); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; pointer-events:none; filter:hue-rotate(var(--hue-shift)); transition:opacity .6s ease; }
body.audio-reactive .rotator-wrap::before { opacity: calc(.4 + var(--reactive-intensity)*.5); }
.rotator-wrap .pre { opacity:.55; font-weight:500; }
.rotator { background: var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; min-width:120px; animation: accentShift 10s ease infinite; text-shadow:0 2px 12px #000a; position:relative; }
.rotator.swap { animation: none; }
.rotator.swap { opacity:0; transform:translateY(8px); transition:opacity .22s ease, transform .22s ease; }
.rotator:not(.swap){ transition:opacity .4s ease, transform .4s ease; }
.rotator::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:linear-gradient(90deg,#ff008c,#ffd200,#ff008c); border-radius:2px; filter:hue-rotate(var(--hue-shift)); opacity:.75; box-shadow:0 0 6px #ff008c55,0 0 18px #ffd20066; }


.social-proof { display:flex; flex-wrap:wrap; gap:.65rem; }
.proof-pill { position:relative; font-size:.62rem; letter-spacing:1.1px; font-weight:600; padding:.55rem .8rem .5rem .9rem; border-radius:14px; background:#ffffff10; border:1px solid #ffffff1c; backdrop-filter: blur(6px); text-transform:uppercase; display:inline-flex; align-items:center; gap:.4rem; color:var(--text); filter:hue-rotate(calc(var(--hue-shift)*.3)); overflow:hidden; }
.proof-pill::before { content:attr(data-icon); font-size:.85rem; filter:drop-shadow(0 0 4px #000); margin-right:.4rem; }
.proof-pill:not([data-icon])::before { content:""; display:none; }
.proof-pill::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%,#ff008c18,transparent 60%); opacity:.6; mix-blend-mode:color-dodge; }

/* Soft Skills list */
.soft-skills { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; font-size:.8rem; letter-spacing:.4px; }
.soft-skills li { position:relative; padding:.5rem .75rem .45rem 1.1rem; background:#ffffff10; border:1px solid #ffffff18; border-radius:12px; backdrop-filter:blur(4px); }
.soft-skills li::before { display:none; }
.light .soft-skills li { background:#00000010; border-color:#00000015; }

.connect-cta { 
  margin-top: 0.6rem; 
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.connect-btn { 
  --cGrad: linear-gradient(120deg, #ff008c, #ffae00, #ffd200, #ff008c); 
  font: 600 0.78rem var(--font-sans); 
  letter-spacing: 1.2px; 
  text-transform: uppercase; 
  display: inline-flex;
  align-items: center;
  padding: 0.95rem 1.5rem 0.9rem; 
  border-radius: 14px; 
  position: relative; 
  color: #111; 
  background: var(--cGrad); 
  text-decoration: none; 
  box-shadow: 0 6px 20px -8px #000a, 0 0 0 1px #ffffff22, 0 0 28px -6px #ff008c55; 
  transition: all 0.35s cubic-bezier(0.16, 0.8, 0.24, 1);
}
.connect-btn::before { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  border-radius: inherit; 
  padding: 2px; 
  background: linear-gradient(140deg, #ff008c, #ffd200, #ff008c); 
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); 
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); 
  -webkit-mask-composite: xor; 
  mask-composite: exclude; 
  opacity: 0; 
  transition: 0.6s;
}
.connect-btn:hover { 
  transform: translateY(-3px) scale(1.02); 
  box-shadow: 0 12px 30px -12px #000c, 0 0 0 1px #ffffff33, 0 0 44px -8px #ff008c88;
}
.connect-btn:hover::before { 
  opacity: 0.7;
}
body:not(.light) .connect-btn { 
  color: #111;
}

/* Entrance micro stagger for new elements */
.entered .hero-addon > * { animation: floatIn .9s cubic-bezier(.16,.8,.24,1); }
.entered .rotator-wrap { animation-delay:.05s; }
.entered .social-proof { animation-delay:.25s; }
.entered .connect-cta { animation-delay:.35s; }


/* Accessibility focus */
:focus-visible { outline:2px solid #ff7a18; outline-offset:2px; }

/* Particle layer fallback hidden on prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #particles { display:none; }
  .bars li::after { animation:none; }
  .avatar { animation:none; }
}

/* Low performance downgrade overrides (appended) */
body.low-perf:not(.light)::before { animation:none !important; opacity:.35 !important; }
body.low-perf .glass { backdrop-filter: blur(10px) saturate(1.1) !important; animation:none !important; }
body.low-perf:not(.light) .gradient-text { text-shadow:0 0 2px #000c,0 0 10px #ff008c55 !important; }
body.low-perf.audio-reactive:not(.light) .glass::after { box-shadow:0 0 30px -8px #ff008c33 !important; }
body.low-perf.audio-reactive:not(.light) .glass::before { opacity:.4 !important; }
body.low-perf .btn:hover { transform:none !important; box-shadow:0 0 0 1px #ffffff20 !important; }
/* Ultra low tier cuts (added dynamically) */
body.ultra-low .gradient-text::after { display:none !important; }
body.ultra-low .avatar-ring { animation:none !important; }
body.ultra-low .rotator::after { display:none; }
body.ultra-low .enter-overlay .enter-glow { display:none !important; }
body.ultra-low .glass, body.ultra-low .headline-wrap, body.ultra-low .rotator-wrap { backdrop-filter: blur(6px) saturate(1); }
body.ultra-low .glass::before, body.ultra-low .glass::after { display:none; }
body.ultra-low .gradient-text { animation:none !important; }
body.ultra-low .rotator, body.ultra-low .connect-btn, body.ultra-low .enter-brand { animation:none !important; }
body.ultra-low #particles { display:none !important; }
body.ultra-low .btn { transition:none !important; }
body.ultra-low .bars li::after { animation:none !important; width:100% !important; }

/* Spotify Now Playing */
.spotify-now { position:relative; display:flex; align-items:center; gap:.85rem; margin-top:.9rem; padding:.65rem 1rem .7rem; border-radius:18px; background:linear-gradient(140deg,#141422cc,#0a0a14cc); border:1px solid #ffffff18; backdrop-filter: blur(10px) saturate(1.3); box-shadow:0 6px 22px -10px #000c,0 0 0 1px #ffffff10; font-size:.68rem; letter-spacing:.6px; text-transform:uppercase; overflow:hidden; opacity:0; transform:translateY(6px) scale(.96); transition:.6s cubic-bezier(.16,.8,.24,1); }
.spotify-now.show { opacity:1; transform:translateY(0) scale(1); }
.spotify-now.fade-out { opacity:0; transform:translateY(-4px) scale(.96); }
/* Enhanced Spotify widget */
.spotify-now.loading { min-height:54px; }
.spotify-now .collapse-btn { position:absolute; top:4px; left:6px; background:transparent; border:none; color:#fff9; font-size:.7rem; cursor:pointer; padding:4px 6px; line-height:1; border-radius:6px; transition:.3s; }
.spotify-now .collapse-btn:hover { background:#ffffff10; color:#fff; }
.spotify-now .cover-wrap { width:42px; height:42px; flex:0 0 auto; border-radius:12px; overflow:hidden; position:relative; box-shadow:0 4px 14px -6px #000a,0 0 0 1px #ffffff18; background:#111; display:flex; align-items:center; justify-content:center; }
.spotify-now .cover { width:100%; height:100%; object-fit:cover; display:block; }
.spotify-now .meta { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.4rem; }
.spotify-now .title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; font-size:.64rem; letter-spacing:.9px; }
.spotify-now .title .sep { opacity:.35; }
.spotify-now .bar { position:relative; width:100%; height:4px; background:#ffffff15; border-radius:3px; overflow:hidden; }
.spotify-now .bar .fill { position:absolute; inset:0; width:var(--p); background:linear-gradient(90deg,#ff008c,#ffd200); border-radius:inherit; transition:width .5s cubic-bezier(.16,.8,.24,1); }
.spotify-now .times { display:flex; justify-content:space-between; font-size:.5rem; letter-spacing:1px; opacity:.7; margin-top:-2px; }
.spotify-now .album { font-size:.48rem; letter-spacing:1.2px; text-transform:uppercase; opacity:.55; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spotify-now .open { position:absolute; top:4px; right:6px; font-size:.65rem; opacity:.6; text-decoration:none; color:#fff; padding:4px 6px; border-radius:6px; transition:.25s; }
.spotify-now .open:hover { background:#ffffff10; opacity:1; }
.spotify-now.expanded { padding: .75rem 1.1rem .9rem 1.8rem; }
.spotify-now:not(.expanded) .album, .spotify-now:not(.expanded) .times { display:none; }
.spotify-now:not(.expanded) .collapse-btn { opacity:0; pointer-events:none; }
.spotify-now.expanded .collapse-btn { opacity:.85; }
/* Subtle rotation / vinyl sheen only while playing */
.spotify-now.playing .cover-wrap{animation:spinVinyl 16s linear infinite; box-shadow:0 6px 22px -10px #000c,0 0 0 1px #ffffff22,0 0 0 3px #ff008c11;}
.spotify-now.playing .cover-wrap::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,#ffffff26,transparent 55%),radial-gradient(circle at 70% 65%,#00000055,transparent 65%);mix-blend-mode:overlay;pointer-events:none;opacity:.85;transition:opacity .6s ease;}
.spotify-now:not(.playing) .cover-wrap::after{opacity:0;}
@keyframes spinVinyl{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ .spotify-now.playing .cover-wrap{animation:none;} }

/* Skeleton */
.spotify-skeleton { display:flex; gap:.8rem; align-items:center; width:100%; }
.spotify-skeleton .sk-cover { width:42px; height:42px; border-radius:12px; background:linear-gradient(120deg,#222,#2d2d2d,#222); background-size:200% 100%; animation: shimmer 1.2s linear infinite; }
.spotify-skeleton .sk-lines { flex:1; display:flex; flex-direction:column; gap:.5rem; }
.spotify-skeleton .sk-lines span { height:8px; width:70%; border-radius:4px; background:linear-gradient(120deg,#222,#2d2d2d,#222); background-size:200% 100%; animation: shimmer 1.2s linear infinite; }
.spotify-skeleton .sk-lines span:last-child { width:50%; }
@keyframes shimmer { 0%{background-position:0 0;} 100%{background-position:-200% 0;} }

/* Progress ring sync with avatar using conic overlay (optional future) */
html { --spotify-progress:0%; }
/* Removed progress overlay to prevent green wash over avatar */
.avatar-ring::after { content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; opacity:0; }
body.low-perf .avatar-ring::after { display:none; }
body.ultra-low .avatar-ring::after { display:none; }

body.mobile-perf .spotify-now { backdrop-filter: blur(6px) saturate(1.1); }
@keyframes spinDisc { to { transform:rotate(360deg); } }
body.low-perf .spotify-now .spine, body.ultra-low .spotify-now .spine { animation:none; }
.spotify-now .meta { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.35rem; }
.spotify-now .title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; font-size:.63rem; letter-spacing:1px; }
.spotify-now .title .sep { opacity:.35; }
.spotify-now .bar { position:relative; width:100%; height:4px; background:#ffffff15; border-radius:3px; overflow:hidden; }
.spotify-now .bar .fill { position:absolute; inset:0; width:var(--p); background:linear-gradient(90deg,#ff008c,#ffd200); border-radius:inherit; transition:width .6s cubic-bezier(.16,.8,.24,1); }
.spotify-now .cover { width:34px; height:34px; flex:0 0 auto; border-radius:10px; overflow:hidden; position:relative; box-shadow:0 4px 14px -6px #000a,0 0 0 1px #ffffff18; background:#111; display:block; }
.spotify-now .cover img { width:100%; height:100%; object-fit:cover; display:block; }
body.mobile-perf .spotify-now { backdrop-filter: blur(6px) saturate(1.1); }

/* Mobile performance tier (pre-emptive) */
body.mobile-perf .gradient-text .letter { animation-duration:.55s; }
body.mobile-perf .wow-burst { display:none !important; }
body.mobile-perf .avatar-ring { animation: spin 9s linear infinite; }
body.mobile-perf.entered .glass { animation: floatIn .6s cubic-bezier(.16,.8,.24,1); }
body.mobile-perf:not(.light)::before { animation: none !important; opacity:.42; }
body.mobile-perf .enter-cta { animation: pulseCTA 4.2s ease-in-out infinite; }
/* Reduce expensive blur saturation on low tier */
body.mobile-perf .glass { backdrop-filter: blur(12px) saturate(1.1); }
body.mobile-perf .headline-wrap { backdrop-filter: blur(10px) saturate(1.1); }
/* Limit hue drift layer for fewer paints */
body.mobile-perf .gradient-text::after { animation: none !important; }
/* Prevent particle overdraw flicker */
body.mobile-perf #particles { opacity:.75; mix-blend-mode:normal; }
/* Disable glow pulses that cause flicker on some mobile GPUs */
body.mobile-perf .enter-overlay .enter-glow { animation:none; }
/* Soften text-shadows to reduce composite cost */
body.mobile-perf .gradient-text { text-shadow: 0 0 0 #000,0 1px 6px #000a; }
/* Lower overlay blur to reduce Safari iOS GPU flicker */
body.mobile-perf .enter-overlay { backdrop-filter: blur(8px) saturate(1.25); }
body.mobile-perf .enter-overlay .enter-inner { box-shadow:0 20px 60px -30px #000,0 0 0 1px #ffffff16; }
/* Avoid continuous accent animation background shift */
body.mobile-perf .rotator, body.mobile-perf .connect-btn, body.mobile-perf .enter-brand { animation: none !important; }
/* Bar animations shorter */
body.mobile-perf .bars li::after { animation-duration:1s; }
/* Force will-change removal to save memory (none defined but safe) */
body.mobile-perf * { will-change: auto !important; }
/* Slight scale reduction for less viewport re-raster */
body.mobile-perf .glass { transform: scale(.985) rotateX(var(--rx)) rotateY(var(--ry)); }

/* Combined low-perf + mobile-perf stricter cuts */
body.mobile-perf.low-perf #particles { display:none !important; }
body.mobile-perf.low-perf .enter-overlay .enter-glow { display:none; }
body.mobile-perf.low-perf .gradient-text::after { display:none !important; }
body.mobile-perf.low-perf .rotator::after { display:none; }

/* Quick Menu Verses */
#quickMenu .qm-verses { position:relative; min-height:3.2em; font-size:.7rem; letter-spacing:.4px; line-height:1.35; }
#quickMenu .qm-verses .v-line { position:absolute; inset:0; opacity:0; transform:translateY(6px); filter:blur(6px); transition:.7s cubic-bezier(.16,.8,.24,1); font-weight:600; background:linear-gradient(120deg,#ffffff,#ffe6f5,#ffffff); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 1px 8px #0008; display:flex; align-items:center; }
#quickMenu .qm-verses .v-line.active { opacity:1; transform:translateY(0); filter:blur(0); }
#quickMenu .qm-verses .v-ref { margin-top:2.3rem; font-size:.5rem; letter-spacing:1.4px; text-transform:uppercase; opacity:.45; }
/* Inline Verse Block */
.info-block.verse-block { position:relative; overflow:hidden; }
.inline-verses { position:relative; min-height:3.1em; }
.inline-verses .v-line { position:absolute; inset:0; opacity:0; transform:translateY(8px); filter:blur(6px); transition:.8s cubic-bezier(.16,.8,.24,1); font-weight:600; font-size:.9rem; line-height:1.35; background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 12px #0008; display:flex; align-items:center; }
.inline-verses .v-line.active { opacity:1; transform:translateY(0); filter:blur(0); }
.inline-verses.static { min-height:0; }
.inline-verses.static .v-line { position:relative; opacity:1 !important; transform:none !important; filter:none !important; background:none; color:#f5f7fa; margin:0 0 .9rem; padding:0 0 .7rem; border-bottom:1px solid #ffffff14; text-shadow:0 1px 4px #000a; }
.inline-verses.static .v-line:last-child { margin:0; padding:0; border-bottom:none; }
.inline-verses.static .v-line .v-text { display:block; font-weight:600; font-size:.9rem; line-height:1.4; }
.inline-verses.static .v-line .v-ref-tag { display:inline-block; margin-top:.4rem; font-size:.55rem; letter-spacing:1.5px; text-transform:uppercase; opacity:.55; background:#ffffff10; padding:.25rem .55rem .3rem; border-radius:8px; }
.verse-ref-small { margin-top:.55rem; font-size:.55rem; letter-spacing:1.5px; text-transform:uppercase; opacity:.55; }
.info-block.verse-block::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 22% 28%,#ff008c14,transparent 65%),radial-gradient(circle at 78% 72%,#ffd20014,transparent 70%); mix-blend-mode:screen; pointer-events:none; opacity:.9; }

/* Quick Menu */
body.menu-open { overflow: hidden; }
#quickMenu { 
  position: fixed; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  width: clamp(300px, 40vw, 460px); 
  background: rgba(8,8,12,0.88); 
  backdrop-filter: blur(24px) saturate(170%); 
  -webkit-backdrop-filter: blur(24px) saturate(170%); 
  box-shadow: -6px 0 32px -10px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06); 
  padding: 1.5rem 1.6rem 2.5rem; 
  display: flex; 
  flex-direction: column; 
  gap: 1.5rem; 
  z-index: 1400; 
  animation: qmSlide .5s cubic-bezier(.65,.05,.36,1);
  border-left: 1px solid rgba(255,255,255,0.08);
}
@keyframes qmSlide { from { transform: translateX(40px); opacity:0;} to { transform: translateX(0); opacity:1;} }
#quickMenu[hidden] { display: none !important; }
#quickMenu h3 { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity:.66; margin:0 0 .35rem; }
#quickMenu section { border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: .9rem .95rem 1rem; background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); position: relative; }
#quickMenu section + section { margin-top: .25rem; }
#quickMenu .qm-inner { height:100%; display:flex; flex-direction:column; gap:1rem; }
#quickMenu .qm-head { 
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#quickMenu .qm-head h3 { 
  font-size: 1rem; 
  letter-spacing: 0.08em; 
  text-transform: uppercase; 
  margin: 0; 
  opacity: 0.9;
  font-weight: 600;
}
#quickMenu .qm-head .qm-close { 
  background: rgba(255,255,255,0.08); 
  border: 1px solid rgba(255,255,255,0.15); 
  color: #fff; 
  font-size: 1.4rem;
  line-height: 1;
  border-radius: 10px; 
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}
#quickMenu .qm-head .qm-close:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.25);
  transform: rotate(90deg);
}
#quickMenu .qm-grid { flex:1; overflow:auto; display:grid; gap:1rem; grid-template-columns:1fr 1fr; align-content:start; }
@media (max-width:880px){ #quickMenu .qm-grid { grid-template-columns:1fr; } }
#quickMenu .qm-section { border:1px solid rgba(255,255,255,0.07); border-radius:14px; padding:.85rem .9rem 1rem; background:linear-gradient(135deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02)); }
#quickMenu .qm-section h4 { margin:.1rem 0 .6rem; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; opacity:.55; }
#quickMenu .qm-section ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
#quickMenu .qm-section ul li a, #quickMenu .qm-section ul li button { 
  width: 100%; 
  text-align: left; 
  background: rgba(255,255,255,0.06); 
  border: 1px solid rgba(255,255,255,0.1); 
  color: #fff; 
  font: 500 0.78rem var(--font-sans); 
  letter-spacing: 0.4px; 
  padding: 0.75rem 0.9rem 0.8rem; 
  border-radius: 12px; 
  cursor: pointer; 
  text-decoration: none; 
  display: flex; 
  align-items: center; 
  gap: 0.6rem; 
  position: relative; 
  overflow: hidden;
  transition: all 0.3s ease;
}
#quickMenu .qm-section ul li a:hover, #quickMenu .qm-section ul li button:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
  transform: translateX(4px);
}
#quickMenu .qm-section ul li a::before, #quickMenu .qm-section ul li button::before { content:""; position:absolute; inset:0; background:linear-gradient(140deg,#ffffff22,transparent 60%); opacity:0; transition:.4s; }
#quickMenu .qm-section ul li a:hover::before, #quickMenu .qm-section ul li button:hover::before { opacity:1; }
#quickMenu .qm-section .mini-tags { flex-direction:row; flex-wrap:wrap; gap:.45rem; }
#quickMenu .qm-section .mini-tags li { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); padding:.45rem .65rem .5rem; font-size:.62rem; border-radius:999px; letter-spacing:.5px; text-transform:uppercase; position:relative; }
#quickMenu .qm-status { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); padding:.65rem .75rem .7rem; border-radius:12px; font-size:.68rem; letter-spacing:.6px; min-height:44px; display:flex; align-items:center; }
#quickMenu .qm-foot { font-size:.55rem; letter-spacing:1.4px; text-transform:uppercase; opacity:.4; text-align:center; margin-top:.5rem; }
/* Added extended quick menu components */
#quickMenu .qm-brief { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; font-size:.66rem; letter-spacing:.5px; }
#quickMenu .qm-brief li { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); padding:.4rem .6rem .45rem; border-radius:8px; }
#quickMenu .qm-small-block { display:flex; flex-direction:column; gap:.4rem; font-size:.63rem; letter-spacing:.55px; }
#quickMenu .qm-small-block .qm-line { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); padding:.45rem .6rem .5rem; border-radius:8px; line-height:1.25; }
#quickMenu .qm-skills { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; font-size:.64rem; letter-spacing:.5px; }
#quickMenu .qm-skills li { display:flex; align-items:center; gap:.5rem; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); padding:.4rem .6rem .45rem; border-radius:8px; }
#quickMenu .qm-skills .bar { flex:1; position:relative; height:6px; background:rgba(255,255,255,0.12); border-radius:4px; overflow:hidden; }
#quickMenu .qm-skills .bar span { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,#ff008c,#ffd200); width:0; animation: qmGrow 1.4s cubic-bezier(.16,.8,.24,1) forwards; }
@keyframes qmGrow { from { width:0; } }
#quickMenu .menu-head { display:flex; align-items:center; justify-content: space-between; gap:.75rem; }
#quickMenu .menu-head h2 { font-size: .9rem; font-weight:600; letter-spacing:.05em; text-transform: uppercase; margin:0; }
#quickMenu .menu-head button { background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:#fff; font-size:.7rem; padding:.45rem .7rem; border-radius:8px; cursor:pointer; transition:.25s; }
#quickMenu .menu-head button:hover { background: rgba(255,255,255,0.15); }
#quickMenu .control-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(90px,1fr)); gap:.55rem; }
#quickMenu .control-grid button { background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); padding:.75rem .55rem; font-size:.7rem; line-height:1.1; color:#fff; border-radius:12px; display:flex; flex-direction:column; gap:.4rem; align-items:flex-start; position:relative; isolation:isolate; cursor:pointer; overflow:hidden; }
#quickMenu .control-grid button::after { content:""; position:absolute; inset:0; background:linear-gradient(140deg, rgba(255,80,120,0.18), transparent 55%); opacity:0; transition:.35s; }
#quickMenu .control-grid button:hover::after { opacity:1; }
#quickMenu .control-grid button span.icon { font-size:1.15rem; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
#quickMenu .control-grid button strong { font-weight:600; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; opacity:.8; }
#quickMenu .links { display:flex; flex-direction:column; gap:.45rem; }
#quickMenu .links a { display:flex; align-items:center; gap:.55rem; padding:.6rem .7rem; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); border-radius:10px; text-decoration:none; color:#fff; font-size:.78rem; position:relative; overflow:hidden; }
#quickMenu .links a::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,0.15), transparent 60%); opacity:0; transition:.4s; }
#quickMenu .links a:hover::before { opacity:1; }
#quickMenu .links a span.emoji { font-size:1.1rem; }
#quickMenu .hobby-tags { display:flex; flex-wrap:wrap; gap:.45rem; }
#quickMenu .hobby-tags span { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); padding:.45rem .65rem .5rem; font-size:.68rem; border-radius:999px; display:inline-flex; align-items:center; gap:.4rem; line-height:1; position:relative; }
#quickMenu .hobby-tags span::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(160deg, rgba(255,80,120,0.4), transparent 65%); opacity:0; transition:.4s; pointer-events:none; }
#quickMenu .hobby-tags span:hover::after { opacity:.6; }
#quickMenu .status-box { display:flex; align-items:center; gap:.65rem; font-size:.8rem; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.08); padding:.7rem .8rem; border-radius:12px; min-height:48px; }
#quickMenu .status-box .dot { width:10px; height:10px; border-radius:50%; background:var(--presence-accent,#5df26c); box-shadow:0 0 0 4px rgba(255,255,255,0.05), 0 0 12px -2px var(--presence-accent,#5df26c); }
@media (max-width: 820px){ 
  #quickMenu { 
    width: 100%; 
    left: 0; 
    border-left: none; 
    border-radius: 0; 
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05); 
    animation: qmSlideMobile 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
  } 
  @keyframes qmSlideMobile { 
    from { 
      transform: translateY(30px); 
      opacity: 0;
    } 
    to { 
      transform: translateY(0); 
      opacity: 1;
    }
  }
  
  /* Menü-Button auf Mobile etwas kleiner */
  #menuToggle {
    width: 40px;
    height: 40px;
    top: 0.75rem;
    right: 0.75rem;
  }
  #menuToggle svg {
    width: 20px;
    height: 20px;
  }
}
#menuToggle { 
  position: fixed; 
  top: 1rem; 
  right: 1rem; 
  z-index: 1500;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  color: #fff;
}
#menuToggle svg {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}
#menuToggle:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
#menuToggle:hover svg {
  transform: scale(1.1);
}
#menuToggle:active {
  transform: translateY(0) scale(0.95);
}
body.menu-open #menuToggle {
  background: rgba(255,80,120,0.2);
  border-color: rgba(255,80,120,0.3);
}
.light #menuToggle {
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.15);
  color: #111;
}
.light #menuToggle:hover {
  background: rgba(0,0,0,0.15);
  border-color: rgba(0,0,0,0.25);
}

/* Hiking / Wandern */
.hike-block { display:flex; flex-direction:column; gap:.75rem; }
.hike-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:.5rem; }
.hike-stat { background:rgba(255,255,255,0.05); padding:.5rem .6rem; border:1px solid rgba(255,255,255,0.08); border-radius:8px; font-size:.75rem; display:flex; flex-direction:column; gap:.2rem; }
.hike-stat .hs-label { opacity:.65; letter-spacing:.5px; font-size:.55rem; text-transform:uppercase; }
.hike-stat .hs-val { font-weight:600; font-size:.8rem; }
.hike-list { list-style:none; margin:0; padding:0; max-height:180px; overflow:auto; font-size:.68rem; display:flex; flex-direction:column; gap:.4rem; }
.hike-list li { background:rgba(255,255,255,0.04); padding:.45rem .55rem .5rem; border:1px solid rgba(255,255,255,0.07); border-radius:6px; line-height:1.25; cursor:pointer; position:relative; }
.hike-list li.active { outline:2px solid var(--accent-color,#ff6); }
.hike-list li .h-name { font-weight:600; }
.hike-list li .h-meta { opacity:.7; font-size:.52rem; display:block; margin-top:2px; letter-spacing:.5px; text-transform:uppercase; }
.hike-peaks { display:flex; flex-direction:column; gap:.55rem; margin-top:.4rem; }
.hike-peaks .peak { position:relative; display:grid; grid-template-columns: auto 1fr auto auto; align-items:center; gap:.6rem; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:.45rem .75rem .5rem 2.1rem; font-size:.7rem; line-height:1.2; letter-spacing:.4px; }
.hike-peaks .peak::before { content:""; position:absolute; left:.65rem; top:.55rem; font-size:.9rem; }
.hike-peaks .peak .p-name { font-weight:600; }
.hike-peaks .peak .p-elev { font-size:.6rem; opacity:.75; letter-spacing:.5px; }
.hike-peaks .peak .p-dist { font-size:.6rem; opacity:.55; letter-spacing:.5px; }
.hike-note { font-size:.55rem; opacity:.55; letter-spacing:.8px; text-transform:uppercase; margin:.4rem 0 0; }
.hike-import, .hike-drop, #gpxInput, #gpxLoadDemo, #gpxClearStore, #hikePreview, #hikeStatus, .hike-list { display:none !important; }
.hike-import { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.hike-file-btn { background:linear-gradient(120deg,#ff008c,#ffae00,#ffd200,#ff008c); color:#111; padding:.45rem .8rem .5rem; border-radius:6px; cursor:pointer; font-size:.6rem; font-weight:600; letter-spacing:.8px; position:relative; overflow:hidden; text-transform:uppercase; }
.hike-file-btn input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.hike-drop { border:1.5px dashed rgba(255,255,255,0.25); border-radius:8px; padding:.6rem .8rem .65rem; text-align:center; font-size:.6rem; opacity:.7; transition:.25s border-color,.25s background,.25s opacity; letter-spacing:.6px; text-transform:uppercase; }
.hike-drop.drag { background:rgba(255,255,255,0.08); border-color:var(--accent-color,#ff6); opacity:1; }
.hike-preview { width:100%; background:#0b0d16; border:1px solid rgba(255,255,255,0.08); border-radius:8px; display:block; box-shadow:0 4px 14px -6px #000a; }
@media (max-width:640px){ .hike-summary { grid-template-columns:repeat(2,1fr); } .hike-list { max-height:140px; } }
#qmHiking .qm-line span { font-weight:600; }

/* Mobile reorder: keep verses & quotes directly under hobbies */
@media (max-width:640px){
  .columns { display:flex; flex-direction:column; }
  /* After about(0) and hobbies(0), verses(2) + quotes(3) */
  .info-block.verse-block { order:2; }
  .info-block.quotes-block { order:3; }
  .info-block.hike-block { order:40; }
}