:root {
    /*bunte Version */
    --bg: #000;
    --fg: #f6ffff;
    --accent: #19e9d7;
    --shadow-glow:
        0 0 14px var(--accent),
        0 0 4px var(--accent);
    /* kleinerer äußerer Radius */

    /* Tiefe – harte, versetzte Schatten für 3D-Eindruck */
    --shadow-depth:
        2px 4px 0 #012,
        4px 8px 0 #023,
        6px 12px 0 #034;
}
/* ==== Globale Basics ==== */
html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background: #000;
    overflow: hidden;
    font-family: 'Orbitron', Arial, sans-serif;
    min-height: 100dvh;         /* dynamische Viewport-Höhe */
}

@supports (height: 100svh) {
  html, body { min-height: 100svh; }  /* fallback für Browser, die svh nutzen */
}

/* ==== Canvases ==== */
#fluidCanvas, #crosshairCanvas {
    position: absolute;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    display: block;
    pointer-events: none;
}

#crosshairCanvas { z-index: 1; }
#fluidCanvas {
    background: #000 !important;
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 0;
    pointer-events: auto;
    cursor: none;
}

/* ==== Centered Content ==== */
#center-wrapper {
    justify-content: center;
    position: absolute;
    z-index: 10;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 60vw;
    max-width: 90vw;
    text-align: center;
    pointer-events: none; /* Elemente innerhalb setzen pointer-events: auto! */
    flex-wrap: nowrap;
}

/* ==== Koordinatenkreuz & Logo ==== */
#coord-system {
    position: relative;
    width: fit-content;
    min-width: 3em;
    min-height: 3.5em;
    margin: 0 auto 1em auto;
    pointer-events: none;
    padding: 0 1.6em; /* für horizontales Überstehen */
}

.axis-x, .axis-y {
    position: absolute;
    opacity: 0.8;
    z-index: 1;
    border-radius: 3px;
}

.axis-x {
    left: -2.6em;
    right: -2.6em;
    top: 94%;
    height: 0.5em;
    background: linear-gradient(90deg, transparent 0 10%, var(--accent) 20% 50%, transparent 90% 100%);
    opacity: 0.7;
}

.axis-y {
    top: -2.6em;
    bottom: -3.6em;
    left: 27.5%;
    width: 0.50em;
    transform: translateX(-50%);
    background: linear-gradient(transparent 0 13%, var(--accent) 50% 90%, transparent 98% 100%);
    opacity: 0.7;
}

.origin-zero {
    position: absolute;
    font-family: 'Orbitron', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.2em;
    color: var(--accent);
    left: 30%;
    top: 105%;
    /* text-shadow: 0 0 7px var(--accent), 0 1px 0 #013; */
    opacity: 0.7;
    user-select: none;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.axis-x.hidden,.axis-y.hidden, .origin-zero.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.4s;
}

.quad-row {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.16em;
    z-index: 2;
}

.quad {
    font-family: 'Orbitron', Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(3em, 16vw, 16em);
    color: var(--fg);
    text-shadow: var(--shadow-glow), var(--shadow-depth);
    user-select: none;
    pointer-events: none;
    letter-spacing: 0.12em;
}

/* ==== Subtitle & Slogan ==== */
#subtitle {
    font-size: clamp(1.1em, 2.6vw, 3em);
    margin-top: 7vw;
    margin-bottom: 0.6em;
    /* text-shadow: 0 0 8px var(--accent); */
    letter-spacing: 0.09em;
    color: var(--fg);
    font-weight: 400;
    text-align: center;
    opacity: 0.96;
    z-index: 5;
}

#slogan {
    font-size: clamp(1em, 1.6vw, 1.6em);
    margin-top: 6vw;
    color: var(--accent);
    /* text-shadow: 0 0 8px #000, 0 0 4px var(--accent); */
    letter-spacing: 0.06em;
    opacity: 0.91;
    font-family: inherit;
    text-align: center;
    font-weight: 400;
    z-index: 5;
}

/* ==== "Smart Solutions" Button im Slogan ==== */
#slogan .smart-button {
    display: inline-block;
    padding: 0.13em 0.32em;
    border: 1.6px solid rgba(0, 255, 255, 0.7);
    border-radius: 0.3em;
    cursor: none;
    transition: box-shadow 0.22s, border-color 0.22s, background 0.2s, filter 0.18s;
    pointer-events: auto;
    background: rgba(0,255,255,0.16);
    box-shadow: 0 0 8px #0ff2, 0 0 1px #fff2;
    color: #0ff;
    font-weight: 700;
    margin: 0 0.13em;
}
#slogan .smart-button.toggle-active {
    background: rgba(54, 236, 9, 0.8);
    border-color: rgb(11, 248, 42);
    color: #56ff07;
    box-shadow: 0 0 30px #0ff6, 0 0 12px #fff3 inset;
}

#slogan .smart-button.trigger {
    border-color: #f0f;
    color: #fff;
    background: rgba(255,0,255,0.16);
    box-shadow: 0 0 14px #f0f2;
}
#slogan .smart-button.trigger:active {
    background: rgba(255,0,255,0.32);
    box-shadow: 0 0 24px #fff7, 0 0 10px #f0f8;
}
#slogan .smart-button:active,
#slogan .smart-button:focus {
    outline: none;
    filter: brightness(1.25);
}

/* Leuchteffekt beim Hover für beide Buttons */
#slogan .smart-button:hover,
#slogan .smart-button:focus-visible {
    box-shadow: 0 0 24px #0ffb, 0 0 8px #fff7, 0 0 1px #fff2;
    filter: brightness(1.35);
    z-index: 1;
}
#slogan .smart-button.trigger:hover,
#slogan .smart-button.trigger:focus-visible {
    box-shadow: 0 0 32px #f0fb, 0 0 12px #fff7, 0 0 1px #fff2;
    filter: brightness(1.35);
    z-index: 1;
}



/* ==== Misc ==== */
::-webkit-scrollbar { width: 0 !important }

/* ==== Cursor Animation ==== */
#canvas-led-cursor {
    position: fixed;
    z-index: 99999;
    width: 36px;
    height: 36px;
    pointer-events: none;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent) 60%, #00d8ff44 90%, transparent 100%);
    box-shadow: 0 0 18px 6px #0ff6, 0 0 0 3px #0ff2;
    opacity: 0.86;
    animation: pulse-cursor 1.2s infinite cubic-bezier(.4, 0, .6, 1);
    transition: opacity 0.14s;
    will-change: transform, opacity;
    display: none;
}
@keyframes pulse-cursor {
    0%,100% {
        box-shadow: 0 0 18px 6px #0ff6, 0 0 0 3px #0ff2;
        opacity: 0.86;
    }
    50% {
        box-shadow: 0 0 28px 14px #0ff9, 0 0 0 6px #0ff2;
        opacity: 1;
    }
}

#fps-info {
    position: fixed;
    top: 1.1em; left: 1.5em;
    color: var(--accent);
    font-family: 'Orbitron', monospace;
    font-size: 1.2em;
    background: rgba(0,15,20,0.55);
    border-radius: 0.4em;
    padding: 0.2em 0.9em;
    z-index: 88888;
    pointer-events: none;
    letter-spacing: 0.02em;
    text-shadow: 0 0 8px #0ff8;
}

.nerd-menu-corner {
    position: fixed;
    bottom: 3.5em; right: 2.2em;
    z-index: 88888;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    
}

/* BUTTON: Enger Rahmen, größeres Icon */
#nerd-menu-toggle {
    font-size: 1.5em;    /* experimentiere mit 2.2em – 3.5em */
    padding: 0.06em 0.22em;
    line-height: 1;
    background: rgba(1,40,50,0.88);
    border: 2.5px solid #0ff8;
    border-radius: 0.53em;
    padding: 0.12em 0.6em;   /* WENIG Padding */
    box-shadow: 0 0 8px #0ff4;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    outline: none;
    transition: background 0.18s, box-shadow 0.18s;
}
/* #nerd-menu-toggle svg {
    display: block;
    width: 6.3vw;  
    height: 9.9em; 
} */

#nerd-menu-toggle:focus,
#nerd-menu-toggle:hover {
    background: rgba(0,255,255,0.13);
    box-shadow: 0 0 15px #0ffb;
}


#nerd-menu-list {
    display: none;
    background: rgba(0,12,24,0.95);
    color: var(--accent);
    border: 1.4px solid var(--accent);
    border-radius: 0.6em;
    font-family: 'Orbitron', monospace;
    font-size: 1.04em;
    margin-top: 0.35em;
    padding: 1em 1.6em;
    min-width: 15em;
    text-align: left;
    box-shadow: 0 2px 16px #0ff2;
    letter-spacing: 0.03em;
}
#nerd-menu-list code {
    background: rgba(0,255,255,0.1);
    border-radius: 0.18em;
    padding: 0.05em 0.23em;
    font-size: 1em;
    color: #fff;
    margin-right: 0.7em;
}
@media (pointer: coarse), (max-width: 650px) {
    #nerd-menu { display: none !important; }
}

#canvas-fade {
    position: absolute;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 2;
    background: #000;
    opacity: 1;
    pointer-events: none;
    transition: opacity 1.6s cubic-bezier(.66,0,.22,1);
}
#canvas-fade.fadeout {
    opacity: 0;
}

#footer-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    background: rgba(0,16,32,0.4);
    color: var(--accent);
    font-family: 'Orbitron', Arial, monospace;
    font-size: 1em;
    padding: 0.42em 1.2em 0.22em 1.2em;
    text-align: center;
    letter-spacing: 0.01em;
    z-index: 100002; /* größer als alles andere */
    box-shadow: 0 0 22px #0ff3;
}
.footer-link {
    color: var(--accent);
    text-decoration: none;
    margin: 0 0.7em;
    font-weight: 500;
    opacity: 0.97;
    transition: color 0.16s;
}
.footer-link:hover {
    color: #fff;
    text-decoration: underline;
}
.footer-sep {
    color: #0ff8;
    opacity: 0.77;
    margin: 0 0.18em;
    font-size: 1.08em;
}
.footer-hint {
    color: #fff9;
    font-size: 0.95em;
    margin-top: 0.13em;
    letter-spacing: 0.03em;
}

/* Responsive adjustments for small displays */
@media (max-width: 700px), (max-height: 500px) {
    .axis-x {
        top: auto;
        bottom: -.3em;
        left: -1.2em;
        right: -1.2em;
        height: 0.28em;
    }
    .axis-y {
        top: -1.2em;
        bottom: -1.8em;
        left: 29%;
        width: 0.28em;
    }
    .origin-zero {
        bottom: .2em;
        left: 32.25%;
        font-size: 0.66em;
    }
    .quad {
        font-size: clamp(2em, 2.8em, 10em);
    }
    #subtitle {
        margin-top: 5vw;
        margin-bottom: 0.3em;
        font-size: 0.9em;
    }
    #slogan {
        margin-top: 3vw;
        font-size: 0.85em;
    }
    #center-wrapper {
        min-width: 80vw;
        max-width: 98vw;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .footer-hint {
        font-size: 0.8em;
        margin-top: 0.2em;
    }
    .footer-link {
        font-size: 0.9em;
        margin: 0 0.5em;
    }
    .footer-sep {
        font-size: 0.8em;
        margin: 0 0.2em;
    }
}

#identity-links{
  display:flex;
  flex-wrap:wrap;                   /* wrap für Mobile, keine Überläufe */
  justify-content:center;
  align-items:stretch;
  gap: clamp(14px, 2vw, 22px);      /* Abstand skaliert mit Viewport */
  margin-top: clamp(42px, 12vh, 72px);
  position:relative;
  z-index:1000;
}

/* Karte: Breite, Padding, Typo per clamp -> stimmige Proportionen */
.identity-link{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 4px;
  width: clamp(100px, 14vw, 180px);
  padding: clamp(8px, 1vw, 12px) clamp(10px, 1.4vw, 14px);
  border:1px solid rgba(255,255,255,0.25);
  border-radius:12px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 4px),
    rgba(0,0,0,0.22);
  color:#fff;
  text-decoration:none;
  pointer-events:auto;
}

.identity-label{
  font-family: 'Orbitron', system-ui, sans-serif;
  font-weight:900;
  letter-spacing:.4px;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.identity-source{
  font: 600 clamp(0.72rem, 0.9vw, 0.85rem)/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: rgba(255,255,255,0.72);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Hover/Focus dezent, ohne Layout-Shift */
.identity-link:hover{
  border-color: rgba(0,234,255,0.6);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 4px),
    rgba(0,234,255,0.10);
}
.identity-link:focus{ outline:none; }
.identity-link:focus-visible{
  box-shadow: 0 0 0 2px rgba(0,234,255,0.6);
  border-color: rgba(0,234,255,0.8);
}