/* ============================================================ C&W Web Services — Stylesheet Designsystem: Evergreen (C&W Software Labs AG, Grün) × Blueprint (C&W Code und Consulting GbR, Blau) Zwei Schemata: «Tiefer Raum» (dunkel, Standard) und «Stratosphäre» (hell). Standard ist die Systemeinstellung; die Wahl im Kopf setzt data-theme am und hat Vorrang. Alles ohne externe Bibliotheken; prefers-reduced-motion wird beachtet. ============================================================ */ /* ---------- Schriften (lokal, SIL Open Font License) ---------- */ @font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/SpaceGrotesk-Medium.woff2") format("woff2")} @font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/SpaceGrotesk-SemiBold.woff2") format("woff2")} @font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/SpaceGrotesk-Bold.woff2") format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Inter-Regular.woff2") format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/Inter-Medium.woff2") format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/Inter-SemiBold.woff2") format("woff2")} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/JetBrainsMono-Regular.woff2") format("woff2")} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/JetBrainsMono-Medium.woff2") format("woff2")} /* ============================================================ Tokens — dunkles Schema (Standard) ============================================================ */ :root{ color-scheme:dark; --ink:#06080f; /* Seitengrund */ --abyss:#0a1122; --deck:#0e1730; /* Karten, Panels */ --deck-2:#141f3d; --line:rgba(234,240,255,.12); --line-2:rgba(234,240,255,.22); --glass:rgba(14,23,48,.55); /* Glasflächen */ --glass-2:rgba(6,8,15,.6); --bar:rgba(6,8,15,.72); /* Kopfzeile, Höhenmesser */ --overlay:rgba(6,8,15,.86); /* Menü */ --grid-line:rgba(234,240,255,.045); --field:rgba(14,23,48,.8); --green:#49d17f; /* Evergreen: Flächen, Knöpfe */ --green-lit:#8af0b1; /* Text-Akzent, Hover */ --green-deep:#164b33; --blue:#6191fb; /* Blueprint: Flächen, Knöpfe */ --blue-lit:#a8c1ff; /* Text-Akzent */ --cobalt:#11358a; --accent:#49d17f; /* Text in Akzentfarbe (≥ 4.5:1 auf Grund) */ --accent-2:#a8c1ff; --ax-mix:100%; /* Anteil der Projektfarbe in Meta-Texten */ --ice:#eaf0ff; /* Text */ --text-2:#c3cdea; --muted:#8f9bbf; --on-green:#06130c; --on-blue:#06080f; --star:234,240,255; /* Sternfarbe (RGB) */ --star-g:138,240,177; --star-b:168,193,255; --star-alpha:1; --nebula-alpha:.55; --spot:rgba(97,145,251,.10); --shadow:0 30px 80px -30px rgba(0,0,0,.9); --frame-bar:#e9edf5;--frame-line:#d7dcea;--phone:#1b2340; --err:#ff8f7a;--err-text:#ffb3a5; --todo-bg:#2a2312;--todo-line:#6b5a22;--todo-mark:#d9a300;--todo-text:#f5e6be;--todo-head:#ffd54a; --warn:#ffb454; --disp:"Space Grotesk",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; --step--1:clamp(.8rem,.76rem + .2vw,.9rem); --step-0:clamp(1rem,.95rem + .25vw,1.125rem); --step-1:clamp(1.2rem,1.1rem + .5vw,1.5rem); --step-2:clamp(1.6rem,1.3rem + 1.4vw,2.4rem); --step-3:clamp(2.2rem,1.6rem + 3vw,4rem); --step-4:clamp(2.3rem,1rem + 7.2vw,6.2rem); --gutter:clamp(1.1rem,4vw,3rem); --bay:clamp(4.5rem,3rem + 7vw,9rem); --max:1240px; --r-sm:8px; --r-md:14px; --r-lg:24px; --ease:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --glow-green:0 0 0 1px rgba(73,209,127,.35),0 0 40px -6px rgba(73,209,127,.55); --glow-blue:0 0 0 1px rgba(97,145,251,.35),0 0 40px -6px rgba(97,145,251,.55); } /* ============================================================ Tokens — helles Schema «Stratosphäre» ============================================================ */ @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){ color-scheme:light; --ink:#f3f6fd;--abyss:#e9eefb;--deck:#ffffff;--deck-2:#e4ebfb; --line:rgba(14,20,36,.12);--line-2:rgba(14,20,36,.24); --glass:rgba(255,255,255,.62);--glass-2:rgba(255,255,255,.75);--bar:rgba(243,246,253,.78);--overlay:rgba(243,246,253,.9); --grid-line:rgba(14,20,36,.06);--field:rgba(255,255,255,.9); --green:#2fbf6e;--green-lit:#167a46;--green-deep:#164b33; --blue:#2f5fd0;--blue-lit:#1d46b0;--cobalt:#11358a; --accent:#167a46;--accent-2:#1d46b0;--ax-mix:55%; --ice:#0e1424;--text-2:#34405e;--muted:#5a6788;--on-green:#06130c;--on-blue:#ffffff; --star:29,70,176;--star-g:22,122,70;--star-b:29,70,176;--star-alpha:.45;--nebula-alpha:.5; --spot:rgba(47,95,208,.08);--shadow:0 30px 80px -40px rgba(14,20,36,.35); --frame-bar:#e9edf5;--frame-line:#d7dcea;--phone:#0e1424; --err:#c0392b;--err-text:#a32222; --todo-bg:#fff4db;--todo-line:#f0dca8;--todo-mark:#d9a300;--todo-text:#4d3c00;--todo-head:#70430b; --warn:#b86e00; --glow-green:0 0 0 1px rgba(47,191,110,.35),0 0 40px -6px rgba(47,191,110,.5); --glow-blue:0 0 0 1px rgba(47,95,208,.35),0 0 40px -6px rgba(47,95,208,.45); } } :root[data-theme="light"]{ color-scheme:light; --ink:#f3f6fd;--abyss:#e9eefb;--deck:#ffffff;--deck-2:#e4ebfb; --line:rgba(14,20,36,.12);--line-2:rgba(14,20,36,.24); --glass:rgba(255,255,255,.62);--glass-2:rgba(255,255,255,.75);--bar:rgba(243,246,253,.78);--overlay:rgba(243,246,253,.9); --grid-line:rgba(14,20,36,.06);--field:rgba(255,255,255,.9); --green:#2fbf6e;--green-lit:#167a46;--green-deep:#164b33; --blue:#2f5fd0;--blue-lit:#1d46b0;--cobalt:#11358a; --accent:#167a46;--accent-2:#1d46b0;--ax-mix:55%; --ice:#0e1424;--text-2:#34405e;--muted:#5a6788;--on-green:#06130c;--on-blue:#ffffff; --star:29,70,176;--star-g:22,122,70;--star-b:29,70,176;--star-alpha:.45;--nebula-alpha:.5; --spot:rgba(47,95,208,.08);--shadow:0 30px 80px -40px rgba(14,20,36,.35); --frame-bar:#e9edf5;--frame-line:#d7dcea;--phone:#0e1424; --err:#c0392b;--err-text:#a32222; --todo-bg:#fff4db;--todo-line:#f0dca8;--todo-mark:#d9a300;--todo-text:#4d3c00;--todo-head:#70430b; --warn:#b86e00; --glow-green:0 0 0 1px rgba(47,191,110,.35),0 0 40px -6px rgba(47,191,110,.5); --glow-blue:0 0 0 1px rgba(47,95,208,.35),0 0 40px -6px rgba(47,95,208,.45); } /* ---------- Basis ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ink)} body{ margin:0;background:var(--ink);color:var(--ice); font-family:var(--body);font-size:var(--step-0);line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; transition:background .5s,color .5s; } body.menu-open{overflow:hidden} h1,h2,h3,h4{font-family:var(--disp);font-weight:600;line-height:1.05;letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance} h1{font-size:var(--step-4);font-weight:700} h2{font-size:var(--step-3)} h3{font-size:var(--step-1)} p{margin:0 0 1em} a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px} a:hover{color:var(--green-lit)} img,svg{max-width:100%;height:auto;display:block} button{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px} ::selection{background:var(--blue);color:var(--on-blue)} .container{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto} .mono{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase} .muted{color:var(--muted)} .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:fixed;left:1rem;top:-4rem;z-index:100;background:var(--green);color:var(--on-green);padding:.6rem 1rem;border-radius:var(--r-sm);transition:top .2s} .skip:focus{top:1rem} /* Verlaufstext */ .grad{background:linear-gradient(95deg,var(--green-lit) 0%,var(--green) 30%,var(--blue) 70%,var(--blue-lit) 100%); background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite} @keyframes shimmer{to{background-position:200% 0}} /* ---------- Buttons ---------- */ .btn{ --bg:var(--green);--fg:var(--on-green); display:inline-flex;align-items:center;gap:.6rem;position:relative;overflow:hidden;isolation:isolate; padding:.95rem 1.5rem;border-radius:999px;border:1px solid transparent; background:var(--bg);color:var(--fg);font-weight:600;text-decoration:none;cursor:pointer; transition:transform .35s var(--ease-out),box-shadow .35s var(--ease),background .3s,color .3s;will-change:transform; } .btn::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120px 120px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 60%);opacity:0;transition:opacity .3s} .btn:hover{transform:translateY(-2px);box-shadow:var(--glow-green);color:var(--fg)} .btn:hover::after{opacity:1} .btn svg{width:18px;height:18px;flex:none;transition:transform .35s var(--ease-out)} .btn:hover svg{transform:translateX(4px)} .btn--blue{--bg:var(--blue);--fg:var(--on-blue)} .btn--blue:hover{box-shadow:var(--glow-blue)} .btn--ghost{--bg:transparent;--fg:var(--ice);border-color:var(--line-2)} .btn--ghost:hover{border-color:var(--ice);box-shadow:none;background:var(--glass)} .btn--sm{padding:.65rem 1.1rem;font-size:var(--step--1)} .btn[disabled]{opacity:.55;cursor:wait;transform:none!important;box-shadow:none!important} .ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.45);transform:scale(0);animation:ripple .7s var(--ease-out) forwards;z-index:0} @keyframes ripple{to{transform:scale(4);opacity:0}} /* ---------- Startsequenz ---------- */ .boot{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--ink);color:var(--ice);transition:opacity .6s var(--ease),visibility 0s .6s,transform .8s var(--ease)} .boot.done{opacity:0;visibility:hidden;transform:translateY(-4%) scale(1.04)} .boot__in{text-align:center;font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;font-size:.75rem;color:var(--muted)} .boot__mark{width:64px;height:50px;margin:0 auto 1.2rem;animation:bootMark 1.6s var(--ease) infinite} .boot__mark .m-g{fill:var(--green)}.boot__mark .m-b{fill:var(--blue)} @keyframes bootMark{50%{transform:translateY(-6px)}} .boot__num{font:700 clamp(3rem,10vw,6rem)/1 var(--disp);letter-spacing:-.04em;color:var(--ice);margin:.2rem 0 .6rem;font-variant-numeric:tabular-nums} .boot__bar{width:min(60vw,320px);height:2px;background:var(--line);margin:1rem auto 0;overflow:hidden} .boot__bar i{display:block;height:100%;width:var(--w,0%);background:linear-gradient(90deg,var(--green),var(--blue));transition:width .12s linear} .boot__msg{min-height:1.4em;margin-top:1rem} /* ---------- Mauszeiger: System-Cursor, klare Hover-Zustände ---------- */ a,button,[role="button"],label,.chip,.project,.menubtn,.themebtn,.lang{cursor:pointer} input,textarea{cursor:text} .btn[disabled]{cursor:wait} /* ---------- Hintergrund: Sterne + Nebel ---------- */ .space{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:var(--ink);transition:background .5s} .space canvas{position:absolute;inset:0;width:100%;height:100%} .nebula{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--nebula-alpha);mix-blend-mode:screen;will-change:transform} :root[data-theme="light"] .nebula{mix-blend-mode:multiply} @media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .nebula{mix-blend-mode:multiply}} .nebula--g{width:60vmax;height:60vmax;left:-20vmax;top:-20vmax;background:radial-gradient(circle,rgba(73,209,127,.55),rgba(22,75,51,.15) 55%,transparent 70%);animation:drift1 38s ease-in-out infinite alternate} .nebula--b{width:70vmax;height:70vmax;right:-30vmax;top:10vh;background:radial-gradient(circle,rgba(97,145,251,.5),rgba(17,53,138,.18) 55%,transparent 70%);animation:drift2 46s ease-in-out infinite alternate} .nebula--c{width:40vmax;height:40vmax;left:30vw;bottom:-25vmax;background:radial-gradient(circle,rgba(17,53,138,.6),transparent 65%);animation:drift3 52s ease-in-out infinite alternate} @keyframes drift1{to{transform:translate(18vw,22vh) scale(1.15)}} @keyframes drift2{to{transform:translate(-22vw,28vh) scale(.9)}} @keyframes drift3{to{transform:translate(-20vw,-18vh) scale(1.2)}} .grid-lines{position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 100%);animation:gridDrift 30s linear infinite} @keyframes gridDrift{to{background-position:64px 64px}} /* Cursor-Lichtkegel */ .spot{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(420px 420px at var(--cx,-100px) var(--cy,-100px),var(--spot),transparent 60%)} @media (hover:none){.spot{display:none}} /* Scroll-Fortschritt, Höhenmesser, Seitenschiene */ .progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60} .progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--green),var(--blue))} .altimeter{position:fixed;right:1rem;bottom:1rem;z-index:40;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--muted); padding:.45rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--bar);backdrop-filter:blur(8px);display:flex;gap:.6rem;align-items:center} .altimeter b{color:var(--accent);font-weight:500;font-variant-numeric:tabular-nums} .altimeter::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:blink 1.6s infinite} @keyframes blink{50%{opacity:.25}} .rail{position:fixed;right:1.55rem;top:12vh;bottom:12vh;width:1px;background:var(--line);z-index:39} .rail i{position:absolute;left:50%;top:calc(var(--p,0) * 100%);width:9px;height:9px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--ice);box-shadow:0 0 12px var(--blue);transition:top .15s linear} .rail i::after{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:40px;margin-left:-.5px;background:linear-gradient(transparent,var(--blue))} @media (max-width:900px){.altimeter,.rail{display:none}} /* ---------- Kopfzeile (minimal) ---------- */ .top{position:fixed;inset:0 0 auto;z-index:50;transition:background .4s,backdrop-filter .4s,border-color .4s,transform .5s var(--ease);border-bottom:1px solid transparent} .top.is-scrolled{background:var(--bar);backdrop-filter:blur(14px);border-color:var(--line)} .top.is-hidden{transform:translateY(-100%)} .top__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0} .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-family:var(--disp);font-weight:600;letter-spacing:-.01em} .brand__mark{width:34px;height:26px;position:relative} .brand__mark svg{position:absolute;inset:0;width:100%;height:100%} .brand__mark .m-g{fill:var(--green)} .brand__mark .m-b{fill:var(--blue)} .brand:hover .m-g{animation:markPulse 1s var(--ease) infinite alternate} .brand:hover .m-b{animation:markPulse 1s .3s var(--ease) infinite alternate} @keyframes markPulse{to{opacity:.5}} .brand__name{font-size:1.05rem;color:var(--ice)} .brand__name small{display:block;font:500 .62rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.15rem} .top__tools{display:flex;align-items:center;gap:.6rem} .lang,.themebtn{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--text-2);padding:.55rem .8rem;border:1px solid var(--line);border-radius:999px;transition:border-color .3s,color .3s,background .3s;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;line-height:1.2} .lang:hover,.themebtn:hover{border-color:var(--ice);color:var(--ice)} .themebtn svg{width:16px;height:16px;flex:none;max-width:none;transition:transform .6s var(--ease)} .themebtn .sun{display:none}.themebtn .moon{display:block} :root[data-theme="light"] .themebtn .sun{display:block} :root[data-theme="light"] .themebtn .moon{display:none} @media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .themebtn .sun{display:block}:root:not([data-theme="dark"]) .themebtn .moon{display:none}} .themebtn:hover svg{transform:rotate(40deg)} .menubtn{display:inline-flex;align-items:center;gap:.6rem;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:.55rem .9rem .55rem 1rem;cursor:pointer;color:var(--ice);transition:border-color .3s,background .3s} .menubtn:hover{border-color:var(--ice)} .menubtn span{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase} .menubtn i{position:relative;width:18px;height:12px;display:block} .menubtn i::before,.menubtn i::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease),top .35s var(--ease)} .menubtn i::before{top:0}.menubtn i::after{top:10px} body.menu-open .menubtn i::before{top:5px;transform:rotate(45deg)} body.menu-open .menubtn i::after{top:5px;transform:rotate(-45deg)} /* Theme-Wechsel: Wischeffekt (View Transitions, sonst harter Wechsel) */ ::view-transition-old(root){animation:none;mix-blend-mode:normal} ::view-transition-new(root){animation:sweep .8s var(--ease);mix-blend-mode:normal} @keyframes sweep{from{clip-path:circle(0 at var(--tx,90%) var(--ty,5%))}to{clip-path:circle(150% at var(--tx,90%) var(--ty,5%))}} /* ---------- Menü (Vollbild-Panel) ---------- */ .menu{position:fixed;inset:0;z-index:45;background:var(--ink);overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-2%);transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s .45s} .menu::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 10% 0%,color-mix(in srgb,var(--green) 18%,transparent),transparent 70%),radial-gradient(50% 50% at 100% 100%,color-mix(in srgb,var(--blue) 20%,transparent),transparent 70%);pointer-events:none} .menu[data-open="true"]{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .45s var(--ease)} .menu__in{position:relative;width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto;padding:6.5rem 0 3rem;display:grid;grid-template-columns:1.15fr .85fr;gap:3rem 4rem;align-items:start;min-height:100%} .menu__nav{display:grid} .menu__nav a{display:grid;grid-template-columns:2.4rem 1fr auto;align-items:center;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line);text-decoration:none;font-family:var(--disp);font-weight:600;font-size:clamp(1.5rem,1.1rem + 1.8vw,2.4rem);letter-spacing:-.02em;line-height:1.1;color:var(--ice);opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),color .25s,padding-left .25s} .menu[data-open="true"] .menu__nav a{opacity:1;transform:none} .menu__nav a:nth-child(1){transition-delay:.06s}.menu__nav a:nth-child(2){transition-delay:.11s}.menu__nav a:nth-child(3){transition-delay:.16s}.menu__nav a:nth-child(4){transition-delay:.21s}.menu__nav a:nth-child(5){transition-delay:.26s}.menu__nav a:nth-child(6){transition-delay:.31s} .menu__nav a small{font:500 .7rem var(--mono);letter-spacing:.14em;color:var(--muted)} .menu__nav a svg{width:22px;height:22px;opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .25s;color:var(--accent)} .menu__nav a:hover{color:var(--green-lit);padding-left:.4rem} .menu__nav a:hover svg{opacity:1;transform:none} .menu__aside{display:grid;gap:1.6rem;align-content:start;opacity:0;transform:translateY(14px);transition:opacity .5s .3s var(--ease-out),transform .5s .3s var(--ease-out)} .menu[data-open="true"] .menu__aside{opacity:1;transform:none} .menu__block h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 .7rem} .menu__block p{color:var(--text-2);margin:0 0 .9rem;font-size:var(--step--1)} .menu__block p a{color:var(--ice);text-decoration:none} .menu__block p a:hover{color:var(--green-lit)} .menu__row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem} .menu__row .chip svg{width:14px;height:14px;max-width:none;flex:none} .menu__legal{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase} .menu__legal a,.menu__legal button{color:var(--text-2);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit} .menu__legal a:hover,.menu__legal button:hover{color:var(--green-lit)} .menu__block.logos{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;padding-top:.6rem;border-top:1px solid var(--line)} .menu__block.logos img{height:22px;width:auto;opacity:.85} .logo-dark{display:block}.logo-light{display:none} :root[data-theme="light"] .logo-dark{display:none} :root[data-theme="light"] .logo-light{display:block} @media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .logo-dark{display:none}:root:not([data-theme="dark"]) .logo-light{display:block}} @media (max-width:820px){.menu__in{grid-template-columns:1fr;padding-top:5.5rem;gap:2rem}.menu__nav a{font-size:clamp(1.4rem,1rem + 3vw,1.9rem);padding:.9rem 0}} @media (max-width:560px){.brand__name small{display:none}.brand__name{font-size:.95rem}.top__tools{gap:.4rem}.menubtn{padding:.5rem .7rem}.lang,.themebtn{padding:.5rem .6rem}} @media (max-width:400px){.menubtn span{display:none}.menubtn{padding:.6rem .7rem}.brand__mark{width:28px;height:22px}} /* ---------- Hero ---------- */ .hero{position:relative;min-height:100svh;display:grid;align-items:center;padding:7rem 0 4rem} .hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center} .hero__grid>*{min-width:0} .eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:1.4rem} .eyebrow::before{content:"";width:28px;height:1px;background:currentColor} .hero__copy{container-type:inline-size;min-width:0} .hero h1{margin-bottom:1.2rem;font-size:clamp(1.65rem,8.6cqw,3.9rem);line-height:1.08} .hero h1 .line{display:block;overflow:hidden} .hero h1 .w{display:inline-block;transform:translateY(110%);animation:rise .9s var(--ease-out) forwards} .hero h1 .line:nth-child(2) .w{animation-delay:.12s}.hero h1 .line:nth-child(3) .w{animation-delay:.24s} @keyframes rise{to{transform:none}} .hero h1 .rotor,.hero h1 .w.rotor{display:grid;justify-items:start;text-align:left;position:relative;perspective:600px;width:max-content;max-width:100%} .hero h1 .rotor>span{grid-area:1/1;justify-self:start;white-space:nowrap;opacity:0;transform:translateY(40%) rotateX(-60deg);transform-origin:50% 0;animation:rotorIn 18s infinite} .hero h1 .rotor>span:nth-child(1){animation-delay:0s}.hero h1 .rotor>span:nth-child(2){animation-delay:3s}.hero h1 .rotor>span:nth-child(3){animation-delay:6s} .hero h1 .rotor>span:nth-child(4){animation-delay:9s}.hero h1 .rotor>span:nth-child(5){animation-delay:12s}.hero h1 .rotor>span:nth-child(6){animation-delay:15s} @keyframes rotorIn{0%{opacity:0;transform:translateY(40%) rotateX(-60deg)}3%,14%{opacity:1;transform:none}17%,100%{opacity:0;transform:translateY(-40%) rotateX(60deg)}} .hero__lead{font-size:var(--step-1);color:var(--text-2);max-width:56ch;opacity:0;animation:fadeUp .9s .5s var(--ease-out) forwards} .hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem;opacity:0;animation:fadeUp .9s .7s var(--ease-out) forwards} @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .hero__scroll{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .hero__scroll i{width:1px;height:44px;background:linear-gradient(var(--green),transparent);position:relative;overflow:hidden} .hero__scroll i::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,var(--ice),transparent);animation:fall 2s infinite} @keyframes fall{from{transform:translateY(-100%)}to{transform:translateY(100%)}} /* Orbit-System */ .orbit{position:relative;aspect-ratio:1;max-width:520px;margin-inline:auto;opacity:0;animation:fadeUp 1.2s .3s var(--ease-out) forwards;perspective:1200px} .orbit svg{width:100%;height:100%;overflow:visible;transform:rotateX(var(--ox,0)) rotateY(var(--oy,0));transition:transform .6s var(--ease-out)} .orbit .ring{fill:none;stroke:var(--line-2);stroke-width:1;stroke-dasharray:2 6} .orbit .ring--solid{stroke-dasharray:none;stroke:var(--line)} .orbit .core{fill:url(#coreGrad)} .orbit .core-glow{fill:url(#coreGlow);opacity:.8;animation:pulse 4s ease-in-out infinite;transform-origin:250px 250px} @keyframes pulse{50%{transform:scale(1.12);opacity:.5}} .orbit .p-green{fill:var(--green);filter:drop-shadow(0 0 12px rgba(73,209,127,.8))} .orbit .p-blue{fill:var(--blue);filter:drop-shadow(0 0 12px rgba(97,145,251,.8))} .orbit .sat{fill:var(--ice);opacity:.85} .orbit .lbl{font:500 11px var(--mono);letter-spacing:.14em;fill:var(--muted);text-transform:uppercase} .orbit .lbl--core{fill:var(--ice);font-size:12px;text-anchor:middle;letter-spacing:.2em} .spin{transform-origin:250px 250px;animation:spin var(--dur,30s) linear infinite} .spin--rev{animation-direction:reverse} @keyframes spin{to{transform:rotate(360deg)}} @media (max-width:900px){.hero__grid{grid-template-columns:1fr}.orbit{max-width:360px}.hero{padding-top:6rem}} /* ---------- Ticker ---------- */ .ticker{border-block:1px solid var(--line);padding:.7rem 0;overflow:hidden;background:var(--glass);backdrop-filter:blur(4px);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .ticker__track{display:flex;gap:3rem;width:max-content;animation:ticker 48s linear infinite} .ticker__track--rev{animation-direction:reverse;animation-duration:64s;margin-top:.6rem;opacity:.55} .ticker:hover .ticker__track{animation-play-state:paused} .ticker span{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);display:flex;align-items:center;gap:3rem;white-space:nowrap} .ticker span::after{content:"✦";color:var(--green);font-size:.7rem} @keyframes ticker{to{transform:translateX(-50%)}} /* ---------- Fakten ---------- */ .facts{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--glass);backdrop-filter:blur(8px);margin:calc(var(--bay) * .6) 0 0} .facts div{padding:1.6rem 1.4rem;border-right:1px solid var(--line);text-align:center;position:relative;overflow:hidden} .facts div::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,var(--green),var(--blue));transform:scaleX(0);transition:transform .8s var(--ease-out)} .facts.in div::after{transform:none} .facts div:last-child{border-right:0} .facts b{display:block;font-family:var(--disp);font-size:var(--step-3);font-weight:700;line-height:1;letter-spacing:-.03em;background:linear-gradient(120deg,var(--green-lit),var(--blue-lit));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums} .facts b sup{font-size:.4em;vertical-align:top;margin-left:.1em} .facts small{display:block;margin-top:.5rem;color:var(--muted);font-size:var(--step--1);line-height:1.4} @media (max-width:820px){.facts{grid-template-columns:1fr 1fr}.facts div:nth-child(2){border-right:0}.facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}} @media (max-width:420px){.facts{grid-template-columns:1fr}.facts div{border-right:0;border-bottom:1px solid var(--line)}.facts div:last-child{border-bottom:0}} /* ---------- Sektionen ---------- */ .section{padding-block:var(--bay);position:relative} .section__head{display:grid;grid-template-columns:1fr auto;gap:1.5rem 3rem;align-items:end;margin-bottom:3rem} .section__head p{max-width:52ch;color:var(--text-2);margin:0} .section__head .num{font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;color:var(--muted);align-self:start;padding-top:.5rem} @media (max-width:760px){.section__head{grid-template-columns:1fr}} /* Scroll-Skew (Geschwindigkeit) */ .skew{transform:skewY(var(--sk,0deg));transition:transform .15s linear;transform-origin:50% 50%} /* Überschriften: Zeichen fliegen ein */ h2 .wd{display:inline-block;white-space:nowrap} h2 .ch{display:inline-block;opacity:0;transform:translateY(.6em) rotate(6deg);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)} .in h2 .ch,.rv.in .ch{opacity:1;transform:none} /* Scroll-Reveal */ .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)} .rv.in{opacity:1;transform:none} .rv-stagger>*{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)} .rv-stagger.in>*{opacity:1;transform:none} .rv-stagger.in>*:nth-child(2){transition-delay:.08s}.rv-stagger.in>*:nth-child(3){transition-delay:.16s}.rv-stagger.in>*:nth-child(4){transition-delay:.24s} .rv-stagger.in>*:nth-child(5){transition-delay:.32s}.rv-stagger.in>*:nth-child(6){transition-delay:.4s} /* ---------- Projekte ---------- */ .filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:-1.4rem 0 1.6rem} .chip{text-decoration:none;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:.55rem .9rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text-2);cursor:pointer;display:inline-flex;gap:.5rem;align-items:center;transition:border-color .3s,background .3s,color .3s,transform .3s} .chip i{font-style:normal;color:var(--muted)} .chip:hover{border-color:var(--ice);transform:translateY(-1px)} .chip.is-active{background:var(--ice);color:var(--ink);border-color:var(--ice)} .chip.is-active i{color:var(--ink);opacity:.6} .projects{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem} .project.is-hidden{display:none} .project{ --ax:var(--green); position:relative;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--deck-2),var(--deck)); border:1px solid var(--line);overflow:hidden;isolation:isolate; transform:perspective(1200px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .5s var(--ease-out),border-color .4s,box-shadow .5s;will-change:transform; animation:hover-float 7s ease-in-out infinite; } .project:nth-child(even){animation-delay:-3.5s} @keyframes hover-float{50%{translate:0 -6px}} .project::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1.5px; background:conic-gradient(from var(--ang,0deg),var(--ax),transparent 30%,transparent 70%,var(--ax)); -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:opacity .4s;animation:angle 4s linear infinite} @property --ang{syntax:"";inherits:false;initial-value:0deg} @keyframes angle{to{--ang:360deg}} .project:hover::before{opacity:1} .project:hover{box-shadow:var(--shadow)} .project__shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--abyss);border-bottom:1px solid var(--line)} .project__shot::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.12) 45%,transparent 60%);transform:translateX(-100%);transition:transform 0s;z-index:3;pointer-events:none} .project:hover .project__shot::after{transform:translateX(100%);transition:transform 1.1s var(--ease)} .project__frame{position:absolute;inset:1rem 1rem 0;border-radius:10px 10px 0 0;overflow:hidden;background:#fff;box-shadow:0 20px 60px -20px rgba(0,0,0,.6);transform:translateY(0);transition:transform .6s var(--ease-out)} .project__frame::before{content:"";display:block;height:16px;background:var(--frame-bar);border-bottom:1px solid var(--frame-line); background-image:radial-gradient(circle at 10px 8px,#ff5f57 3px,transparent 4px),radial-gradient(circle at 22px 8px,#febc2e 3px,transparent 4px),radial-gradient(circle at 34px 8px,#28c840 3px,transparent 4px)} .project__frame img{width:100%;height:auto;transition:transform 5s linear} .project:hover .project__frame{transform:translateY(-8px)} .project:hover .project__frame img{transform:translateY(calc(-100% + 100% * 10/16 * 1.05))} .project__mob{position:absolute;right:1.1rem;bottom:-34%;width:24%;border-radius:10px;border:2px solid var(--phone);box-shadow:0 20px 50px -14px rgba(0,0,0,.7);overflow:hidden;background:#fff;transform:translateY(0) rotate(-4deg);transition:transform .6s var(--ease-out);z-index:2} .project__mob img{width:100%;height:auto} .project:hover .project__mob{transform:translateY(-44%) rotate(0)} .project__body{padding:1.1rem 1.2rem 1.2rem} .project__meta{display:flex;flex-wrap:wrap;gap:.3rem .8rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem} .project__meta b{color:color-mix(in srgb,var(--ax) var(--ax-mix),var(--ice));font-weight:500} .project h3{font-size:var(--step-1);margin-bottom:.35rem} .project p{color:var(--text-2);margin-bottom:.8rem;font-size:var(--step--1)} .tags{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .9rem;padding:0;list-style:none} .tags li{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:.28rem .5rem;border:1px solid var(--line);border-radius:999px;color:var(--text-2);transition:border-color .3s,transform .3s} .project:hover .tags li{border-color:var(--line-2)} .tags li:hover{transform:translateY(-2px)} .project__links{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center} .project__links .soon{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:.5rem} .project__links .soon::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px var(--blue);animation:blink 1.6s infinite} @media (max-width:1060px){.projects{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.projects{grid-template-columns:1fr}} @media (hover:none){.project__mob{transform:translateY(-44%) rotate(0)}.project__frame img{transform:none!important}} /* ---------- Leistungen ---------- */ .services{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem} .service{position:relative;padding:1.8rem 1.5rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass);overflow:hidden;transition:transform .5s var(--ease-out),border-color .4s,box-shadow .5s} .service:hover{transform:translateY(-8px) rotate(-.5deg);border-color:var(--line-2);box-shadow:var(--shadow)} .service::after{content:"";position:absolute;inset:auto -40% -60% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(73,209,127,.28),transparent 65%);opacity:0;transition:opacity .5s} .service:nth-child(even)::after{background:radial-gradient(circle,rgba(97,145,251,.32),transparent 65%)} .service:hover::after{opacity:1} .service .num{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--muted)} .service .ico{width:52px;height:52px;margin:1.2rem 0 1rem;color:var(--accent);transition:transform .5s var(--ease-out)} .service:nth-child(even) .ico{color:var(--accent-2)} .service:hover .ico{transform:scale(1.15) rotate(-8deg)} .service .ico svg{width:100%;height:100%;overflow:visible} .service h3{margin-bottom:.5rem} .service p{color:var(--text-2);margin:0;font-size:var(--step--1)} .ico .o1{transform-box:fill-box;transform-origin:center;animation:spin 14s linear infinite} .ico .o2{transform-box:fill-box;transform-origin:center;animation:spin 9s linear infinite reverse} .ico .fl{animation:float 4s ease-in-out infinite} @keyframes float{50%{transform:translateY(-4px)}} @media (max-width:1000px){.services{grid-template-columns:1fr 1fr}} @media (max-width:520px){.services{grid-template-columns:1fr}} /* ---------- Prozess (Countdown-Linie) ---------- */ .process{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem;padding-top:5rem} .process__line{position:absolute;left:0;right:0;top:2.2rem;height:2px;background:var(--line)} .process__line i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--pp,0));background:linear-gradient(90deg,var(--green),var(--blue));transition:transform .2s linear} .process__probe{position:absolute;top:calc(2.2rem - 9px);left:calc(var(--pp,0) * 100%);width:20px;height:20px;margin-left:-10px;transition:left .2s linear} .process__probe::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ice);box-shadow:0 0 0 4px rgba(97,145,251,.25),0 0 24px var(--blue)} .process__probe::after{content:"";position:absolute;right:100%;top:50%;width:70px;height:2px;margin-top:-1px;background:linear-gradient(90deg,transparent,var(--ice));opacity:.7} .process .spark{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--green);pointer-events:none;animation:spark .9s var(--ease-out) forwards} @keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}} .step{position:relative} .step::before{content:"";position:absolute;left:0;top:-3.05rem;width:10px;height:10px;border-radius:50%;background:var(--abyss);border:2px solid var(--line-2);transition:background .3s,border-color .3s,box-shadow .3s} .step::after{content:"";position:absolute;left:-7px;top:calc(-3.05rem - 7px);width:24px;height:24px;border-radius:50%;border:1px solid var(--green);opacity:0;transform:scale(.4)} .step.lit::before{background:var(--green);border-color:var(--green);box-shadow:0 0 14px var(--green)} .step.lit::after{animation:ignite 1s var(--ease-out) forwards} @keyframes ignite{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.2)}} .step .t{font-family:var(--mono);font-size:.8rem;letter-spacing:.16em;color:var(--accent-2)} .step h3{margin:.5rem 0 .4rem;font-size:var(--step-1)} .step p{color:var(--text-2);font-size:var(--step--1);margin:0} @media (max-width:900px){.process{grid-template-columns:1fr;gap:2rem;padding-top:0;padding-left:2.2rem}.process__line{left:.55rem;right:auto;top:0;bottom:0;width:2px;height:auto} .process__line i{transform-origin:50% 0;transform:scaleY(var(--pp,0))}.process__probe{left:calc(.55rem + 1px);top:calc(var(--pp,0) * 100%);margin-left:-10px;margin-top:-10px}.process__probe::after{right:auto;top:auto;bottom:100%;left:50%;width:2px;height:70px;margin-left:-1px;background:linear-gradient(transparent,var(--ice))} .step::before{left:-2.2rem;top:.35rem}.step::after{left:calc(-2.2rem - 7px);top:calc(.35rem - 7px)}} /* ---------- Warum ---------- */ .why{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem} .why article{padding:1.6rem 1.6rem 1.6rem 4rem;position:relative;border-left:1px solid var(--line);transition:transform .4s var(--ease-out),border-color .3s} .why article:hover{transform:translateX(6px);border-color:var(--green)} .why article::before{content:"✦";position:absolute;left:1.5rem;top:1.55rem;color:var(--accent);animation:twinkle 3s infinite} .why article:nth-child(even)::before{color:var(--accent-2);animation-delay:1.5s} @keyframes twinkle{50%{opacity:.35;transform:scale(.7) rotate(45deg)}} .why h3{font-size:var(--step-1);margin-bottom:.4rem} .why p{color:var(--text-2);margin:0;font-size:var(--step--1)} @media (max-width:760px){.why{grid-template-columns:1fr}} /* ---------- Team / zwei Gesellschaften ---------- */ .duo{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;position:relative} .duo::before{content:"";position:absolute;left:50%;top:10%;bottom:10%;width:1px;background:linear-gradient(transparent,var(--line-2),transparent)} .entity{padding:2rem;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--glass);position:relative;overflow:hidden;transition:transform .5s var(--ease-out),box-shadow .5s} .entity:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .entity::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-90px;top:-110px;filter:blur(40px);opacity:.45} .entity--green::before{background:var(--green)} .entity--blue::before{background:var(--blue)} .entity .planet{width:64px;height:64px;border-radius:50%;position:relative;margin-bottom:1.4rem} .entity--green .planet{background:radial-gradient(circle at 35% 30%,var(--green-lit),var(--green) 45%,var(--green-deep) 100%);box-shadow:0 0 40px -6px var(--green)} .entity--blue .planet{background:radial-gradient(circle at 35% 30%,var(--blue-lit),var(--blue) 45%,var(--cobalt) 100%);box-shadow:0 0 40px -6px var(--blue)} .entity .planet::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid var(--line-2);transform:rotateX(70deg);animation:spin 12s linear infinite} .entity .planet i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--ice);box-shadow:0 0 8px var(--ice);animation:moon 6s linear infinite} @keyframes moon{from{transform:rotate(0) translateX(46px) rotate(0)}to{transform:rotate(360deg) translateX(46px) rotate(-360deg)}} .entity img{height:28px;width:auto;margin-bottom:1rem} .entity .role{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem} .entity address{font-style:normal;color:var(--text-2);font-size:var(--step--1);line-height:1.6} .entity a{color:var(--ice)} @media (max-width:760px){.duo{grid-template-columns:1fr}.duo::before{display:none}} /* ---------- Portal-Teaser ---------- */ .launch{position:relative;border-radius:var(--r-lg);overflow:hidden;padding:clamp(2rem,5vw,4rem);border:1px solid var(--line);background:linear-gradient(120deg,color-mix(in srgb,var(--green) 22%,var(--deck)),color-mix(in srgb,var(--blue) 22%,var(--deck)));isolation:isolate} .launch::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(600px 300px at 20% 100%,rgba(73,209,127,.3),transparent 60%),radial-gradient(600px 300px at 90% 0%,rgba(97,145,251,.35),transparent 60%)} .launch::after{content:"";position:absolute;inset:-50%;z-index:-1;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.06),transparent 30%);animation:spin 18s linear infinite} .launch__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center} .launch h2{margin-bottom:.8rem} .launch p{color:var(--ice);max-width:50ch} .chatdemo{border-radius:var(--r-md);background:var(--glass-2);border:1px solid var(--line);padding:1rem;display:grid;gap:.7rem;font-size:var(--step--1);backdrop-filter:blur(8px)} .chatdemo .b{padding:.7rem .9rem;border-radius:14px;max-width:88%;opacity:0;transform:translateY(10px);animation:demoIn 9s var(--ease-out) infinite} .chatdemo .b.me{background:var(--blue);color:var(--on-blue);margin-left:auto;border-bottom-right-radius:4px;animation-delay:.2s} .chatdemo .b.cw{background:var(--deck-2);border-bottom-left-radius:4px;animation-delay:2.2s} .chatdemo .b.cw+.b.cw{animation-delay:3.4s} @keyframes demoIn{0%{opacity:0;transform:translateY(10px)}6%,85%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-6px)}} .chatdemo .typing{display:inline-flex;gap:4px;padding:.7rem .9rem;background:var(--deck-2);border-radius:14px;border-bottom-left-radius:4px;width:max-content;opacity:0;animation:demoTyping 9s infinite} @keyframes demoTyping{0%,9%{opacity:0}12%,22%{opacity:1}25%,100%{opacity:0}} .chatdemo .typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dot 1s infinite} .chatdemo .typing i:nth-child(2){animation-delay:.15s}.chatdemo .typing i:nth-child(3){animation-delay:.3s} @keyframes dot{50%{transform:translateY(-4px);opacity:.5}} @media (max-width:800px){.launch__grid{grid-template-columns:1fr}} /* ---------- Fußzeile ---------- */ .footer{border-top:1px solid var(--line);padding:3.5rem 0 2rem;margin-top:var(--bay);background:linear-gradient(180deg,transparent,var(--glass-2));position:relative;overflow:hidden} .footer .comet{position:absolute;top:18%;left:-10%;width:180px;height:2px;background:linear-gradient(90deg,transparent,var(--ice));border-radius:2px;opacity:0;animation:comet 11s 2s linear infinite;pointer-events:none} .footer .comet::after{content:"";position:absolute;right:-3px;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--ice);box-shadow:0 0 12px var(--green)} @keyframes comet{0%{opacity:0;transform:translate(0,0) rotate(12deg)}5%{opacity:.9}25%{opacity:0;transform:translate(120vw,50vh) rotate(12deg)}100%{opacity:0;transform:translate(120vw,50vh) rotate(12deg)}} .footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.5rem;align-items:start} .footer__product{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:1rem 0 1.2rem} .footer__logos{display:flex;flex-wrap:wrap;gap:1.4rem 2.2rem;align-items:center} .footer__logos a{opacity:.85;transition:opacity .3s,transform .3s} .footer__logos a:hover{opacity:1;transform:translateY(-2px)} .footer__logos img{height:24px;width:auto} .footer h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem;font-weight:500} .footer nav{display:grid;gap:.45rem} .footer nav a{text-decoration:none;color:var(--text-2);transition:color .3s,padding-left .3s} .footer nav a:hover{color:var(--green-lit);padding-left:.3rem} .footer address{font-style:normal;color:var(--text-2);font-size:var(--step--1);line-height:1.7} .footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase} .footer__bottom nav{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem} .footer__bottom a{text-decoration:none} @media (max-width:800px){.footer__grid{grid-template-columns:1fr}} /* ---------- Datenschutz-Einstellungen (Dialog, ohne Cookies) ---------- */ .consent{position:fixed;inset:0;z-index:120;display:grid;place-items:end center;padding:1rem;background:rgba(6,8,15,.35);backdrop-filter:blur(3px)} .consent[hidden]{display:none} .consent__box{width:min(100%,640px);background:var(--deck);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:1.5rem 1.6rem;box-shadow:var(--shadow);animation:fadeUp .5s var(--ease-out) both;max-height:calc(100svh - 2rem);overflow:auto} .consent__box h2{font-size:var(--step-1);margin:0 0 .5rem} .consent__box p,.consent__opt small{overflow-wrap:anywhere;hyphens:auto} .consent__box p{color:var(--text-2);font-size:var(--step--1);margin:0 0 1rem} .consent__box p a{color:var(--ice)} .consent__opts{display:grid;gap:.6rem;margin:0 0 1.1rem;padding-top:.9rem;border-top:1px solid var(--line)} .consent__opts[hidden]{display:none} .consent__opt{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem .8rem;border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer} .consent__opt input{margin-top:.2rem;accent-color:var(--green);width:16px;height:16px;flex:none} .consent__opt b{display:block;font-weight:600;font-size:var(--step--1)} .consent__opt small{display:block;color:var(--muted);font-size:.78rem;line-height:1.45;margin-top:.15rem} .consent__actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center} .consent__link{background:none;border:0;padding:.5rem .2rem;cursor:pointer;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-left:auto} .consent__link:hover{color:var(--ice)} .consent__actions [hidden]{display:none} .footer__bottom nav button{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer} .footer__bottom nav button:hover,.footer__bottom nav a:hover{color:var(--green-lit)} @media (max-width:600px){.consent{padding:.6rem}.consent__box{padding:1.2rem}.consent__link{margin-left:0}} /* Seitenwechsel-Warp */ .warp{position:fixed;inset:0;z-index:190;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 0,var(--ink) 70%);opacity:0;transition:opacity .22s var(--ease)} body.warping .warp{opacity:1} body.warping main{transform:scale(1.02);transition:transform .25s var(--ease)} /* ---------- Rechtsseiten / Text ---------- */ .page{padding:7rem 0 var(--bay)} .page__top{margin-bottom:2rem} .page__bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line)} .backbtn svg{transition:transform .35s var(--ease-out)} .backbtn:hover svg{transform:translateX(-4px)} .page--narrow .container{max-width:820px} .page h1{font-size:var(--step-3)} .page h2{font-size:var(--step-2);margin-top:2.4rem} .page h3{font-size:var(--step-1);margin-top:1.6rem} .page p,.page li,.page h1,.page h2,.page h3,.page address,.page td,.page small{overflow-wrap:anywhere;hyphens:auto} .page p,.page li{color:var(--text-2)} .page ul{padding-left:1.2rem} .page table{width:100%;border-collapse:collapse;font-size:var(--step--1);margin:1rem 0} .page th,.page td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text-2)} .page th{color:var(--ice);font-weight:600} .page .tablewrap{overflow-x:auto;max-width:100%} .page table{min-width:420px} .legalgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin:1.5rem 0} .legalgrid .entity{padding:1.5rem} .legalgrid .entity h2{margin:0 0 .6rem;font-size:var(--step-1)} @media (max-width:700px){.legalgrid{grid-template-columns:1fr}} .todo{background:var(--todo-bg);border:1px solid var(--todo-line);border-left:4px solid var(--todo-mark);border-radius:var(--r-sm);padding:.9rem 1rem;margin:1rem 0;color:var(--todo-text);font-size:var(--step--1)} .todo b{color:var(--todo-head);font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:.3rem} /* 404 */ .notfound{min-height:100svh;display:grid;place-items:center;text-align:center;padding:6rem 0} .notfound .code{font-family:var(--mono);font-size:clamp(5rem,20vw,12rem);line-height:1;letter-spacing:-.06em;background:linear-gradient(120deg,var(--green-lit),var(--blue-lit));-webkit-background-clip:text;background-clip:text;color:transparent;animation:drift404 6s ease-in-out infinite} @keyframes drift404{50%{transform:translateY(-10px) rotate(-2deg)}} .notfound p{color:var(--text-2);max-width:40ch;margin-inline:auto} /* ---------- Nachrichtenportal ---------- */ .portal{min-height:100svh;padding:6.5rem 0 3rem;display:grid;align-items:stretch} .portal h1{font-size:var(--step-3)} .portal__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.5rem;align-items:start} .portal__intro p{color:var(--text-2);max-width:48ch} .status{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:.5rem .9rem;border:1px solid var(--line);border-radius:999px;margin-bottom:1.4rem} .status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:blink 1.6s infinite} .status--off::before{background:var(--warn);box-shadow:0 0 10px var(--warn)} .console{border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--glass);backdrop-filter:blur(12px);overflow:hidden;display:flex;flex-direction:column;min-height:min(70svh,680px);box-shadow:var(--shadow);position:relative} .console::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--green),var(--blue),transparent);opacity:.8;z-index:2} .console .radar{position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:conic-gradient(from 0deg,rgba(73,209,127,.25),transparent 25%);animation:spin 5s linear infinite;pointer-events:none;opacity:.5;z-index:0} .console__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.2rem;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);position:relative;z-index:1} .console__bar b{color:var(--ice);font-weight:500} .console__bar .id{color:var(--accent-2)} .log{flex:1;overflow-y:auto;padding:1.2rem;display:flex;flex-direction:column;gap:.8rem;scroll-behavior:smooth;position:relative;z-index:1} .msg{max-width:82%;padding:.8rem 1rem;border-radius:16px;font-size:var(--step--1);line-height:1.55;position:relative;white-space:pre-wrap;word-wrap:break-word;animation:msgIn .5s var(--ease-out) both} @keyframes msgIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}} .msg time{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;opacity:.65;margin-top:.4rem} .msg--me{align-self:flex-end;background:var(--blue);color:var(--on-blue);border-bottom-right-radius:4px} .msg--cw{align-self:flex-start;background:var(--deck-2);border-bottom-left-radius:4px;border:1px solid var(--line)} .msg--sys{align-self:center;max-width:95%;text-align:center;background:transparent;color:var(--muted);font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;border:1px dashed var(--line-2)} .msg--sys a{color:var(--green-lit)} .msg--err{border-color:var(--err);color:var(--err-text)} .linkbox{display:flex;gap:.5rem;align-items:center;margin-top:.5rem;font-family:var(--mono);font-size:.68rem;text-transform:none;letter-spacing:0} .linkbox code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--glass-2);padding:.4rem .6rem;border-radius:6px;color:var(--text-2)} .linkbox button{background:var(--deck-2);border:1px solid var(--line-2);border-radius:6px;padding:.4rem .6rem;cursor:pointer;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ice)} .typing{display:inline-flex;gap:4px;align-self:flex-start;padding:.7rem .9rem;background:var(--deck-2);border-radius:14px;border-bottom-left-radius:4px} .typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dot 1s infinite} .typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s} .composer{border-top:1px solid var(--line);padding:1rem 1.2rem;background:var(--glass-2);position:relative;z-index:1} .composer form{display:grid;gap:.8rem} .composer .row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem} .composer label{display:grid;gap:.3rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .composer input,.composer textarea{width:100%;font:inherit;font-size:var(--step--1);color:var(--ice);background:var(--field);border:1px solid var(--line-2);border-radius:10px;padding:.7rem .85rem;transition:border-color .3s,box-shadow .3s} .composer input:focus,.composer textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(97,145,251,.25)} .composer textarea{min-height:110px;resize:vertical} .composer .check{display:flex;gap:.6rem;align-items:flex-start;font:inherit;font-size:.8rem;color:var(--text-2);text-transform:none;letter-spacing:0} .composer .check input{width:auto;margin-top:.2rem;accent-color:var(--green)} .composer .actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap} .composer .hp{position:absolute;left:-9999px;opacity:0;height:0;width:0} .composer form.reply,.reply{display:flex;gap:.7rem;align-items:flex-end} .reply textarea{flex:1;min-height:52px;max-height:200px} .reply .btn{flex:none} .launchfx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3} .launchfx i{position:absolute;left:50%;bottom:-10%;width:6px;height:6px;border-radius:50%;background:var(--ice);box-shadow:0 0 12px var(--green),0 0 30px var(--blue);animation:launch 1.1s var(--ease) forwards} .launchfx i::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:120px;margin-left:-1px;background:linear-gradient(var(--green),transparent)} @keyframes launch{to{transform:translateY(-130vh)}} @media (max-width:900px){.portal__grid{grid-template-columns:1fr}.composer .row{grid-template-columns:1fr}.portal{padding-top:5.5rem}} /* Admin (Posteingang) */ .admin{padding:6rem 0 4rem} .admin__grid{display:grid;grid-template-columns:320px 1fr;gap:1.5rem;align-items:start} .inbox{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--glass)} .inbox a{display:block;padding:.9rem 1rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text-2);transition:background .2s} .inbox a:hover,.inbox a.active{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--ice)} .inbox a b{display:block;color:var(--ice);font-weight:600} .inbox a small{display:block;font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.25rem} .inbox a.unread b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:.5rem;box-shadow:0 0 8px var(--green)} .inbox a.closed{opacity:.55} .admin .console{min-height:60svh} .admin form.login{max-width:380px;margin:0 auto;display:grid;gap:.9rem} .admin form.login input{font:inherit;color:var(--ice);background:var(--field);border:1px solid var(--line-2);border-radius:10px;padding:.8rem .9rem} .notice{padding:.8rem 1rem;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--glass);color:var(--text-2);font-size:var(--step--1)} .notice--err{border-color:var(--err);color:var(--err-text)} @media (max-width:860px){.admin__grid{grid-template-columns:1fr}} /* ---------- Reduzierte Bewegung ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important} .rv,.rv-stagger>*,.hero__lead,.hero__cta,.orbit,.hero h1 .w,h2 .ch,.menu__nav a,.menu__aside{opacity:1;transform:none} .rotor span{opacity:0}.rotor span:first-child{opacity:1;transform:none} .nebula,.spot,.hero__scroll,.process__probe::after,.rail,.boot,.footer .comet,.console .radar{display:none!important} .space canvas{opacity:.6} .project{transform:none!important} .skew{transform:none!important} } /* ---------- Projekt-Overlay ---------- */ .project{cursor:pointer} .project__more{margin-left:auto} .status-badge{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .status-badge[hidden]{display:none} .status-dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--muted)} .status-dot.is-ok{background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 2.2s infinite} .status-dot.is-off{background:var(--err);box-shadow:0 0 8px var(--err)} .pdlg{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:1rem} .pdlg[hidden]{display:none} .pdlg__backdrop{position:absolute;inset:0;background:rgba(6,8,15,.7);backdrop-filter:blur(6px);animation:fadeIn .3s both} @keyframes fadeIn{from{opacity:0}} .pdlg__panel{--ax:var(--green);position:relative;width:min(100%,1080px);max-height:calc(100svh - 2rem);overflow:auto;background:var(--deck);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow);display:grid;grid-template-columns:1.1fr .9fr;animation:dlgIn .45s var(--ease-out) both;outline:none} @keyframes dlgIn{from{opacity:0;transform:translateY(24px) scale(.98)}} .pdlg__panel::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--ax),var(--blue));z-index:2} .pdlg__close{position:absolute;right:.8rem;top:.8rem;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:var(--bar);color:var(--ice);cursor:pointer;font-size:1rem;display:grid;place-items:center;transition:transform .3s,border-color .3s} .pdlg__close:hover{transform:rotate(90deg);border-color:var(--ice)} .pdlg__media{position:relative;background:var(--abyss);overflow:hidden;border-right:1px solid var(--line);padding:2.2rem 2rem 2.4rem;display:flex;align-items:flex-start} .pdlg__frame{position:relative;width:100%;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)} .pdlg__frame::before{content:"";display:block;height:20px;background:var(--frame-bar);border-bottom:1px solid var(--frame-line);background-image:radial-gradient(circle at 12px 10px,#ff5f57 4px,transparent 5px),radial-gradient(circle at 28px 10px,#febc2e 4px,transparent 5px),radial-gradient(circle at 44px 10px,#28c840 4px,transparent 5px)} .pdlg__frame img{width:100%;height:auto;display:block;will-change:transform} .pdlg__mob{position:absolute;right:1rem;bottom:.8rem;width:23%;border-radius:12px;border:3px solid var(--phone);overflow:hidden;background:#fff;box-shadow:0 20px 50px -14px rgba(0,0,0,.8);animation:float 6s ease-in-out infinite} .pdlg__mob img{width:100%;height:auto;display:block} .pdlg__body{padding:2.2rem 2rem 1.6rem} .pdlg__body h2{font-size:var(--step-2);margin:.3rem 0 .6rem} .pdlg__body .project__meta b{color:color-mix(in srgb,var(--ax) var(--ax-mix),var(--ice))} .pdlg__status{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem} .pdlg__status[hidden]{display:none} .pdlg__live{margin-left:auto;color:var(--accent)} .pdlg__abc{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;margin:0 0 1.2rem;font-size:var(--step--1)} .pdlg__abc dt{font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding-top:.25rem} .pdlg__abc dd{margin:0;color:var(--text-2)} .pdlg__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:0 0 1.2rem} .pdlg__facts dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .pdlg__facts dd{margin:0;font-family:var(--disp);font-weight:600;font-size:var(--step-0);line-height:1.2} .pdlg__facts dt:nth-of-type(n){grid-row:1}.pdlg__facts dd:nth-of-type(n){grid-row:2} .pdlg__nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line)} @media (max-width:860px){.pdlg__panel{grid-template-columns:1fr}.pdlg__media{border-right:0;border-bottom:1px solid var(--line);padding:1.4rem 1.2rem 1.6rem}.pdlg__body{padding:1.5rem 1.2rem 1.2rem}.pdlg__facts{grid-template-columns:1fr 1fr}.pdlg__abc{grid-template-columns:1fr}.pdlg__abc dt{padding-top:.4rem}} @media (prefers-reduced-motion:reduce){.pdlg__mob{animation:none}} /* ---------- Website-Check ---------- */ .check{padding-top:7rem} .check__head{max-width:760px;margin-bottom:2.5rem} .check__head h1{font-size:var(--step-3)} .check__intro{color:var(--text-2);max-width:60ch} .check__form{margin-top:1.6rem} .check__field{display:flex;align-items:stretch;border:1px solid var(--line-2);border-radius:999px;background:var(--field);padding:.35rem .35rem .35rem 1.1rem;gap:.3rem;transition:border-color .3s,box-shadow .3s;max-width:640px} .check__field:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(97,145,251,.25)} .check__proto{align-self:center;font-family:var(--mono);font-size:.8rem;color:var(--muted);letter-spacing:.04em} .check__field input{flex:1;min-width:0;border:0;background:transparent;color:var(--ice);font:inherit;font-size:var(--step-0);padding:.5rem .4rem;outline:none} .check__field .btn{flex:none} .check__err{color:var(--err-text);font-size:var(--step--1);margin:.7rem 0 0} .check__err[hidden]{display:none} .check__scan{display:grid;grid-template-columns:120px 1fr;gap:1.6rem;align-items:center;max-width:640px;padding:1.4rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass);margin-bottom:2rem;animation:fadeUp .4s var(--ease-out) both} .check__scan[hidden]{display:none} .check__radar{position:relative;width:120px;height:120px;border-radius:50%;border:1px solid var(--line-2);background:radial-gradient(circle,transparent 30%,var(--line) 31%,transparent 32%,transparent 60%,var(--line) 61%,transparent 62%)} .check__radar::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)} .check__radar i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(73,209,127,.5),transparent 30%);animation:spin 1.6s linear infinite} .check__steps{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .check__steps li{display:flex;align-items:center;gap:.6rem;opacity:.45;transition:opacity .3s,color .3s} .check__steps li::before{content:"";width:8px;height:8px;border-radius:50%;border:1px solid var(--line-2);flex:none} .check__steps li.is-on{opacity:1;color:var(--ice)} .check__steps li.is-on::before{background:var(--blue);border-color:var(--blue);box-shadow:0 0 8px var(--blue);animation:blink 1s infinite} .check__steps li.is-done{opacity:.8} .check__steps li.is-done::before{background:var(--green);border-color:var(--green);animation:none} .check__result[hidden]{display:none} .score{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center;padding:1.6rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass);margin-bottom:1.4rem} .score__dial{position:relative;width:150px;height:150px} .score__ring{width:100%;height:100%;transform:rotate(-90deg)} .score__track{fill:none;stroke:var(--line);stroke-width:8} .score__bar{fill:none;stroke:url(#scoreGrad);stroke:var(--green);stroke-width:8;stroke-linecap:round} .score__num{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;gap:.1rem;padding-top:3.2rem;font-family:var(--disp);font-weight:700} .score__num b{font-size:2.6rem;line-height:1;letter-spacing:-.04em} .score__num small{color:var(--muted);font-size:.9rem} .score__grade{font-size:var(--step-2);margin:0 0 .4rem} .grade--station{color:var(--green-lit)}.grade--orbiter{color:var(--accent-2)}.grade--sonde{color:var(--err-text)} .score--orbiter .score__bar{stroke:var(--blue)}.score--sonde .score__bar{stroke:var(--err)} .score__url{color:var(--text-2);font-size:var(--step--1);margin:0 0 .6rem;overflow-wrap:anywhere} .score__legend{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0} .score__legend span{display:inline-flex;align-items:center;gap:.4rem} .score__legend b{color:var(--ice);font-weight:500} .st{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none;background:var(--muted)} .st--ok{background:var(--green);box-shadow:0 0 6px var(--green)} .st--warn{background:var(--warn);box-shadow:0 0 6px var(--warn)} .st--fail{background:var(--err);box-shadow:0 0 6px var(--err)} .cats{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:1.6rem} .cat{padding:1.3rem 1.4rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass)} .cat h3{display:flex;align-items:center;gap:.6rem;font-size:var(--step-1);margin:0 0 .9rem} .cat h3 small{margin-left:auto;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--muted);font-weight:500} .cat ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem} .it{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .7rem;border-radius:var(--r-md);border:1px solid transparent;font-size:var(--step--1)} .it .st{margin-top:.45rem} .it b{display:block;font-weight:600} .it span{color:var(--muted);overflow-wrap:anywhere} .it--warn{border-color:color-mix(in srgb,var(--warn) 35%,transparent);background:color-mix(in srgb,var(--warn) 7%,transparent)} .it--fail{border-color:color-mix(in srgb,var(--err) 40%,transparent);background:color-mix(in srgb,var(--err) 8%,transparent)} .check__cta .btn{margin-right:.6rem;margin-bottom:.5rem} .check__note{font-size:var(--step--1);margin-top:2rem;max-width:70ch} @media (max-width:760px){.cats{grid-template-columns:1fr}.score{grid-template-columns:1fr;justify-items:center;text-align:center}.score__legend{justify-content:center}.check__scan{grid-template-columns:1fr;justify-items:center}.check__field{flex-wrap:wrap;border-radius:var(--r-lg);padding:.5rem}.check__field .btn{width:100%;justify-content:center}}