/* =========================================================================
   Variante 10 "Futurista".
   Nachtblau, Cyber-Raster, animierte Farbwolken (Elektrisch-Blau, Cyan,
   Violett), Verlaufsrahmen, Roboter-Avatar. Orbitron + Exo 2.
   Bewegung nur ohne prefers-reduced-motion.
   ========================================================================= */

@font-face { font-family: 'Orbitron'; src: url('fonts/orbitron-latin-wght-normal.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/exo-2-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
    --nacht: #060A1A;
    --nacht-2: #0C1330;
    --blau: #4C7DFF;
    --cyan: #22D3EE;
    --violett: #8B5CF6;
    --text: #DCE6FF;
    --matt: #8A97C2;
    --verlauf: linear-gradient(100deg, var(--cyan), var(--blau) 45%, var(--violett));
    --rand: clamp(1.25rem, 5vw, 4.5rem);
    --orb: 'Orbitron', sans-serif;

    --fv-scrim: rgba(6, 10, 26, .82);
    --fv-bg: #0E1638;
    --fv-fg: var(--text);
    --fv-muted: var(--matt);
    --fv-line: #2A3770;
    --fv-accent: var(--blau);
    --fv-accent-fg: #fff;
    --fv-radius: 1.25rem;
    --fv-feld-radius: .7rem;
    --fv-schatten: 0 0 0 1px #2A3770, 0 0 60px -10px rgba(76, 125, 255, .6);
    --fv-font: 'Exo 2', sans-serif;
    --fv-font-titel: var(--orb);
    --fv-input-bg: #0A1030;

    --gal-bg: #04071A;
    --gal-fg: var(--text);
    --gal-muted: var(--matt);
    --gal-accent: var(--cyan);
    --gal-accent-fg: var(--nacht);
    --gal-font: 'Exo 2', sans-serif;
    --gal-radius: .9rem;
    --gal-rand: 1px solid #2A3770;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--nacht); color: var(--text); font-family: 'Exo 2', sans-serif; font-size: 1.1rem; line-height: 1.6; position: relative; }
main { position: relative; z-index: 1; overflow-x: clip; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.fu-verlauf { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fu-etikett { font-family: var(--orb); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin-bottom: .8rem; }
.fu-punkt { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); margin-right: .5rem; vertical-align: middle; }

/* --- Farbwolken -------------------------------------------------------- */
.fu-wolken { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fu-wolken span { position: absolute; width: 42vw; height: 42vw; border-radius: 50%; filter: blur(90px); opacity: .45; }
.fu-wolken span:nth-child(1) { background: var(--blau); left: -10vw; top: -8vw; }
.fu-wolken span:nth-child(2) { background: var(--violett); right: -12vw; top: 20vh; }
.fu-wolken span:nth-child(3) { background: var(--cyan); left: 30vw; bottom: -20vw; opacity: .25; }
@media (prefers-reduced-motion: no-preference) {
    .fu-wolken span:nth-child(1) { animation: fu-treiben 22s ease-in-out infinite alternate; }
    .fu-wolken span:nth-child(2) { animation: fu-treiben 28s ease-in-out infinite alternate-reverse; }
    .fu-wolken span:nth-child(3) { animation: fu-treiben 34s ease-in-out infinite alternate; }
    @keyframes fu-treiben { from { transform: translate(0, 0) scale(1); } to { transform: translate(12vw, 8vh) scale(1.2); } }
}

/* --- Knoepfe ------------------------------------------------------------ */
.fu-knopf { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.5rem; border: 0; border-radius: 999px; background: var(--verlauf); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: 0 0 30px -6px rgba(76, 125, 255, .8); transition: transform .2s ease, box-shadow .2s ease; }
.fu-knopf:hover { transform: translateY(-2px); box-shadow: 0 0 44px -4px rgba(34, 211, 238, .9); }
.fu-knopf-rand { background: transparent; border: 1px solid #3A4A90; box-shadow: none; }
.fu-knopf-rand:hover { border-color: var(--cyan); box-shadow: 0 0 20px -6px var(--cyan); }
.fu-knopf-klein { padding: .45rem 1rem; font-size: .9rem; }

/* --- Kopf -------------------------------------------------------------- */
.fu-kopf { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 1.25rem; padding: .9rem var(--rand); background: rgba(6, 10, 26, .65); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(76, 125, 255, .2); }
.fu-marke { margin-right: auto; font-family: var(--orb); font-weight: 800; letter-spacing: .12em; text-decoration: none; font-size: 1rem; }
.fu-marke b { color: var(--cyan); font-weight: 500; }
.fu-nav { display: none; gap: 1.6rem; font-family: var(--orb); font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; }
.fu-nav a { text-decoration: none; color: var(--matt); }
.fu-nav a:hover { color: var(--cyan); }
@media (min-width: 860px) { .fu-nav { display: flex; } }
.fu-sprache { display: flex; gap: .2rem; padding: .2rem; border: 1px solid #2A3770; border-radius: 999px; font-family: var(--orb); font-size: .72rem; }
.fu-sprache a { padding: .2rem .55rem; border-radius: 999px; text-decoration: none; color: var(--matt); }
.fu-sprache a.ist-aktiv { background: var(--blau); color: #fff; }

/* --- Hero -------------------------------------------------------------- */
.fu-hero { position: relative; display: grid; gap: 2rem; align-items: center; padding: 4rem var(--rand) 6rem; min-height: min(90vh, 52rem); overflow: hidden; }
@media (min-width: 1000px) { .fu-hero { grid-template-columns: 1.5fr 1fr; } }
.fu-raster { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 60%; z-index: 0;
    background-image: linear-gradient(rgba(76, 125, 255, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(76, 125, 255, .35) 1px, transparent 1px);
    background-size: 60px 60px; transform: perspective(500px) rotateX(62deg); transform-origin: center top;
    mask-image: linear-gradient(to top, #000 10%, transparent 90%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%); }
@media (prefers-reduced-motion: no-preference) { .fu-raster { animation: fu-lauf 3s linear infinite; } @keyframes fu-lauf { to { background-position: 0 60px; } } }
.fu-hero-text { position: relative; z-index: 2; }
.fu-chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .3rem; padding: .35rem .9rem; border: 1px solid #2A3770; border-radius: 999px; background: rgba(12, 19, 48, .7); font-size: .85rem; color: var(--matt); margin-bottom: 2rem; }
.fu-chip a { color: var(--cyan); }
.fu-hero h1 { font-family: var(--orb); font-weight: 900; font-size: clamp(2.3rem, 6.2vw, 5.4rem); line-height: 1.04; letter-spacing: -.01em; text-transform: uppercase; }
.fu-hero h1 span { display: block; }
.fu-lead { margin-top: 1.75rem; max-width: 36rem; font-size: 1.25rem; color: #B9C6EE; }
.fu-hero-aktion { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }

.fu-robo-buehne { position: relative; z-index: 2; justify-self: center; width: min(78vw, 24rem); }
.fu-robo { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 40px rgba(76, 125, 255, .45)); }
.fu-sprechblase { position: absolute; left: -7rem; top: 5rem; max-width: 12rem; padding: .6rem .9rem; border-radius: 1rem 1rem 1rem .2rem; background: rgba(12, 19, 48, .85); border: 1px solid var(--cyan); font-family: var(--orb); font-size: .7rem; letter-spacing: .06em; color: var(--cyan); }
@media (prefers-reduced-motion: no-preference) {
    .fu-robo-koerper { animation: fu-schweben 4s ease-in-out infinite; }
    .fu-robo-schatten { animation: fu-schatten 4s ease-in-out infinite; transform-origin: 160px 345px; }
    .fu-robo-augen { animation: fu-blinzeln 5s infinite; transform-origin: 160px 146px; }
    .fu-robo-lampe { animation: fu-lampe 1.6s ease-in-out infinite; }
    @keyframes fu-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    @keyframes fu-schatten { 0%, 100% { transform: scaleX(1); opacity: .25; } 50% { transform: scaleX(.85); opacity: .15; } }
    @keyframes fu-blinzeln { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
    @keyframes fu-lampe { 0%, 100% { fill: #5B8CFF; } 50% { fill: #22D3EE; } }
}

/* --- Status ------------------------------------------------------------ */
.fu-status { padding: 0 var(--rand); }
.fu-status dl { margin: 0; display: flex; flex-wrap: wrap; gap: .75rem; padding: 1rem; border: 1px solid #2A3770; border-radius: 1.25rem; background: rgba(12, 19, 48, .6); backdrop-filter: blur(8px); }
.fu-status dl > div { flex: 1 1 10rem; padding: .5rem .9rem; border-left: 2px solid var(--blau); }
.fu-status dt { font-family: var(--orb); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--matt); }
.fu-status dd { margin: .2rem 0 0; font-weight: 700; color: #fff; }

/* --- Bloecke ----------------------------------------------------------- */
.fu-block { padding: 6rem var(--rand) 0; }
.fu-block h2 { font-family: var(--orb); font-weight: 800; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.1; text-transform: uppercase; margin-bottom: 2.5rem; }

.fu-karten { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .fu-karten { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .fu-karten { grid-template-columns: repeat(4, 1fr); } }
.fu-karte { position: relative; padding: 1.8rem; border-radius: 1.25rem; background: linear-gradient(var(--nacht-2), var(--nacht-2)) padding-box, var(--verlauf) border-box; border: 1.5px solid transparent; transition: transform .25s ease, box-shadow .25s ease; }
.fu-karte:hover { transform: translateY(-4px); box-shadow: 0 0 40px -10px var(--blau); }
.fu-icon { display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: .8rem; background: rgba(76, 125, 255, .15); border: 1px solid #3A4A90; font-family: var(--orb); font-size: .85rem; color: var(--cyan); margin-bottom: 1.2rem; }
.fu-karte h3 { font-family: var(--orb); font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .6rem; }
.fu-karte p { color: #B9C6EE; font-size: 1rem; }

.fu-pipeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; position: relative; }
@media (min-width: 900px) {
    .fu-pipeline { grid-template-columns: repeat(5, 1fr); }
    .fu-pipeline::before { content: ''; position: absolute; left: 5%; right: 5%; top: 2.1rem; height: 2px; background: var(--verlauf); box-shadow: 0 0 12px var(--blau); }
}
.fu-pipeline li { position: relative; display: grid; justify-items: center; text-align: center; gap: .3rem; }
.fu-pipeline b { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--nacht); border: 2px solid var(--cyan); box-shadow: 0 0 20px -4px var(--cyan); font-family: var(--orb); color: var(--cyan); }
.fu-pipeline span { font-family: var(--orb); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.fu-pipeline small { color: var(--matt); font-size: .9rem; }

.fu-scan { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1000px) { .fu-scan { grid-template-columns: 1fr 1fr; } }
.fu-scan-text p:not(.fu-etikett) { color: #B9C6EE; margin-bottom: 2rem; max-width: 34rem; }
.fu-scanner { position: relative; overflow: hidden; padding: 1.5rem; border-radius: 1.25rem; border: 1px solid #2A3770; background: rgba(12, 19, 48, .7); }
.fu-zeile { display: grid; grid-template-columns: 2.4rem 9rem 1fr; gap: .8rem; align-items: center; padding: .55rem 0; border-bottom: 1px dashed #2A3770; }
.fu-zeile:last-of-type { border-bottom: 0; }
.fu-zeile b { font-family: var(--orb); color: var(--cyan); font-size: 1.3rem; }
.fu-zeile span { font-size: .95rem; }
.fu-zeile i { height: .45rem; border-radius: 999px; background: linear-gradient(90deg, var(--blau), var(--violett)); opacity: .8; transform-origin: left; }
.fu-scanlinie { position: absolute; left: 0; right: 0; top: 0; height: 3rem; background: linear-gradient(transparent, rgba(34, 211, 238, .25), transparent); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
    .fu-scanlinie { animation: fu-scan 3.5s ease-in-out infinite; }
    .fu-zeile i { animation: fu-balken 3.5s ease-in-out infinite; animation-delay: calc(var(--i) * .35s); }
    @keyframes fu-scan { 0% { transform: translateY(-3rem); } 100% { transform: translateY(22rem); } }
    @keyframes fu-balken { 0% { transform: scaleX(.1); } 50%, 100% { transform: scaleX(1); } }
}

.fu-projekte { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .fu-projekte { grid-template-columns: repeat(3, 1fr); } }
.fu-projekt { display: block; overflow: hidden; border-radius: 1.25rem; text-decoration: none; background: linear-gradient(var(--nacht-2), var(--nacht-2)) padding-box, var(--verlauf) border-box; border: 1.5px solid transparent; }
.fu-projekt img { display: block; width: 100%; height: 12rem; object-fit: cover; object-position: top; opacity: .85; filter: saturate(.8) hue-rotate(-10deg); transition: opacity .2s ease; }
.fu-projekt:hover img { opacity: 1; }
.fu-projekt span { display: block; padding: 1rem 1.25rem 1.2rem; color: var(--matt); font-size: .95rem; }
.fu-projekt b { display: block; font-family: var(--orb); color: #fff; font-size: 1rem; letter-spacing: .03em; }
.fu-log { margin: 2.5rem 0 0; padding: 1.5rem 1.75rem; border-radius: 1.25rem; background: #04071A; border: 1px solid #2A3770; font-size: 1.15rem; max-width: 56rem; }
.fu-prompt { font-family: ui-monospace, Consolas, monospace; color: var(--cyan); font-size: .85rem; }
.fu-log p + p { margin-top: .7rem; }
.fu-es { color: var(--matt); font-size: 1rem; }

.fu-design-text { display: grid; gap: 1.5rem 3rem; color: #B9C6EE; }
@media (min-width: 900px) { .fu-design-text { grid-template-columns: 1fr 1fr; } }
.fu-design h2 { text-transform: none; }

.fu-schluss { padding: 7rem var(--rand) 6rem; text-align: left; }
.fu-schluss h2 { font-family: var(--orb); font-weight: 900; font-size: clamp(2.6rem, 8vw, 6.5rem); line-height: 1; text-transform: uppercase; }

.fv-galerie { position: relative; z-index: 1; border-top: 1px solid #2A3770; }
.fu-fuss { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.5rem var(--rand) 2rem; font-size: .85rem; color: var(--matt); background: #04071A; border-top: 1px solid #2A3770; }
.fu-fuss nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }

.fv-titel { font-weight: 800; text-transform: uppercase; font-size: 1.15rem; letter-spacing: .06em; }
.fv-senden, .fv-knopf { border: 0; border-radius: 999px; background: var(--verlauf); }
.fv-knopf-zweit { background: transparent; border: 1px solid #3A4A90; }
.fv-input:focus { border-color: var(--cyan); }
.fv-meldung[data-art="ok"] { background: rgba(34, 211, 238, .15); color: #A5F3FC; }
.fv-meldung[data-art="fehler"] { background: rgba(244, 63, 94, .15); color: #FDA4AF; }

/* Schmale Schirme: Kopfzeile kompakter, nichts darf seitlich ueberstehen */
body { overflow-x: clip; }
@media (max-width: 600px) {
    .fu-kopf { gap: .6rem; }
    .fu-marke { font-size: .8rem; letter-spacing: .06em; }
    .fu-marke .fu-punkt { display: none; }
    .fu-knopf-klein { padding: .4rem .7rem; font-size: .8rem; }
    .fu-sprechblase { position: static; margin: 0 auto 1rem; }
}