/* ============================================================ LHF/OS — gemeinsames Stylesheet der Multipage-Site Marke: Signal/Acid — Tokens aus 09_Marketing_und_CD/Designsystem/ ============================================================ */ :root{ --ink:#0D0F12; --ink-800:#11161C; --ink-700:#1A2028; --ink-600:#2A323B; --acid:#C7F23D; --acid-600:#A9D62A; --slate:#6B7682; --slate-400:#9AA0A8; --paper:#EDEFF1; --white:#FFFFFF; --font-display:'Space Grotesk',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace; --font-body:'Hanken Grotesk',system-ui,sans-serif; --tracking-label:.14em; --ease-out:cubic-bezier(.16,1,.3,1); --container:1120px; } *{margin:0;padding:0;box-sizing:border-box} body{background:var(--ink);color:var(--paper);font-family:var(--font-body);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden} ::selection{background:var(--acid);color:var(--ink)} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--acid);outline-offset:3px} .skip-link{position:absolute;left:-9999px;top:0;z-index:10001;background:var(--acid);color:var(--ink); font-family:var(--font-mono);font-size:12px;padding:10px 16px;text-transform:uppercase;letter-spacing:var(--tracking-label)} .skip-link:focus{left:0} .container{max-width:var(--container);margin:0 auto;padding:0 24px;position:relative} .label{font-family:var(--font-mono);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--slate)} .label .sl{color:var(--acid)} /* ---- Seitenwechsel: durchgehender Wipe im OS-Thema ---- Austritt: Overlay schiebt sich von unten über die Seite und tippt den cd-Befehl. Eintritt: Overlay deckt die neue Seite bereits und schiebt sich nach oben weg, während der Inhalt von unten nachrückt. (html.nav-in kommt aus dem Head-Inline-Script) */ html.nav-in body{opacity:0} /* Sofort-Deckung ab dem ersten Frame (Pseudo auf , unabhängig vom Body) */ html.nav-in::before{content:'';position:fixed;inset:0;background:var(--ink-800);z-index:9000} body.nav-ready{opacity:1} .nav-ready main{animation:pageIn .55s var(--ease-out) both} @keyframes pageIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.nav-ready main{animation:none}} .ptrans{position:fixed;inset:0;z-index:9001;background:var(--ink-800);display:flex;align-items:flex-end; padding:44px 48px;transform:translateY(102%);pointer-events:none; border-top:1px solid var(--ink-600); transition:transform .34s var(--ease-out)} .ptrans.is-on{transform:none;pointer-events:auto} .ptrans.is-out{transform:translateY(-102%);transition:transform .42s cubic-bezier(.55,0,.25,1)} .ptrans.no-anim{transition:none} .ptrans .pt-line{font-family:var(--font-mono);font-size:14px;color:var(--paper);letter-spacing:.02em} .ptrans .pt-line .p{color:var(--acid)} .ptrans .pt-line .ok{color:var(--acid)} .ptrans .pt-bar{position:absolute;left:0;bottom:0;height:2px;background:var(--acid);width:0%;transition:width .4s linear} .ptrans.is-on .pt-bar{width:100%} /* ---- Scanlines + Scan-Balken ---- */ .scanlines{position:fixed;inset:0;z-index:90;pointer-events:none; background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px)} .scanbar{position:fixed;left:0;right:0;top:0;height:80px;z-index:90;pointer-events:none; background:linear-gradient(rgba(199,242,61,0),rgba(199,242,61,.045),rgba(199,242,61,0)); transform:translateY(-15vh);will-change:transform;animation:scan 9s linear infinite} @keyframes scan{0%{transform:translateY(-15vh)}100%{transform:translateY(115vh)}} @media (prefers-reduced-motion:reduce){.scanbar{display:none}} /* ---- Boot-Overlay (nur index) ---- */ .boot{position:fixed;inset:0;z-index:10000;background:var(--ink);display:flex;align-items:center;justify-content:center; transition:opacity .5s ease,visibility .5s} .boot.is-done{opacity:0;visibility:hidden;pointer-events:none} .boot-inner{width:min(560px,88vw);font-family:var(--font-mono);font-size:12.5px;line-height:1.9;color:var(--slate-400)} .boot-title{color:var(--paper);font-weight:600;letter-spacing:.08em;margin-bottom:14px} .boot-title .sl{color:var(--acid)} .boot-line{white-space:pre-wrap;min-height:1.9em;opacity:0;transform:translateY(2px)} .boot-line.is-on{opacity:1;transform:none;transition:opacity .12s,transform .12s} .boot-line .ok{color:var(--acid)} .boot-line .warn{color:var(--slate)} .boot-bar{height:2px;background:var(--ink-700);margin-top:20px;overflow:hidden} .boot-bar i{display:block;height:100%;background:var(--acid);transform:scaleX(0);transform-origin:left;transition:transform .25s linear} .boot-skip{margin-top:14px;font-size:10.5px;color:var(--ink-600);letter-spacing:.12em;text-transform:uppercase} /* ---- Custom Cursor ---- */ .cursor-dot{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;width:6px;height:6px;margin:-3px 0 0 -3px; background:var(--acid);border-radius:1px;display:none;will-change:transform} .cursor-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;width:38px;height:38px;margin:-19px 0 0 -19px; border:1px solid rgba(199,242,61,.5);border-radius:3px;display:none;align-items:center;justify-content:center; font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--acid);text-transform:uppercase; will-change:transform; transition:width .25s var(--ease-out),height .25s var(--ease-out),margin .25s var(--ease-out),background .25s} .cursor-ring.is-act{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(199,242,61,.08)} body.has-cursor .cursor-dot,body.has-cursor .cursor-ring{display:flex} body.has-cursor,body.has-cursor a,body.has-cursor button,body.has-cursor [data-tilt]{cursor:none} /* ---- Navigation ---- */ .nav{position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid transparent;transition:background .3s,border-color .3s} .nav.is-scrolled{background:rgba(13,15,18,.85);backdrop-filter:blur(10px);border-color:var(--ink-700)} .nav-inner{max-width:var(--container);margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper)} .brand-mark{width:34px;height:34px;border:2px solid var(--paper);border-radius:3px;display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1} .brand-mark .sl{color:var(--acid)} .brand-word{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em} .brand-word .dot{color:var(--acid)} .nav-status{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--slate);text-transform:uppercase} .nav-status i{width:7px;height:7px;background:var(--acid);border-radius:1px;animation:blink 2.4s steps(1) infinite} @keyframes blink{0%,70%{opacity:1}71%,100%{opacity:.25}} @media (prefers-reduced-motion:reduce){.nav-status i{animation:none}} .nav-status.degraded i{background:var(--slate);animation:none} .mq-status.degraded{color:var(--slate)} .nav-links{display:flex;gap:26px;list-style:none} .nav-links a{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--slate);text-decoration:none;transition:color .15s} .nav-links a:hover{color:var(--white)} .nav-links a.is-active{color:var(--white)} .nav-links a.is-active::before{content:'▮ ';color:var(--acid);font-size:9px;vertical-align:1px} @media(max-width:860px){.nav-status{display:none}} @media(max-width:860px){.nav-links{display:none}} /* Burger (wird von os.js injiziert) */ .nav-burger{display:none;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--paper);background:none;border:1px solid var(--ink-600);border-radius:3px;padding:9px 13px;cursor:pointer} .nav-burger:hover{border-color:var(--slate)} @media(max-width:860px){.nav-burger{display:inline-flex}} /* Mobile-Menü als Vollbild-Overlay */ .mnav{position:fixed;inset:0;z-index:8500;background:rgba(13,15,18,.97);backdrop-filter:blur(8px); display:flex;flex-direction:column;justify-content:center;padding:32px 28px; opacity:0;pointer-events:none;transition:opacity .28s ease} .mnav.is-on{opacity:1;pointer-events:auto} .mnav-x{position:absolute;top:20px;right:22px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em; text-transform:uppercase;color:var(--slate);background:none;border:1px solid var(--ink-600);border-radius:3px; padding:9px 13px;cursor:pointer} .mnav a{font-family:var(--font-mono);font-size:clamp(19px,5.6vw,24px);letter-spacing:.04em;color:var(--paper); text-decoration:none;padding:17px 2px;border-bottom:1px solid var(--ink-700); opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)} .mnav.is-on a{opacity:1;transform:none} .mnav a .p{color:var(--acid)} .mnav a.is-active{color:var(--acid)} .mnav .mnav-legal{display:flex;gap:22px;margin-top:26px} .mnav .mnav-legal a{font-size:12px;border:0;color:var(--slate);padding:0;letter-spacing:.12em;text-transform:uppercase} /* ---- Hero (index: 280vh Morph-Strecke) ---- */ .hero{position:relative;height:280vh} .hero-sticky{position:sticky;top:0;height:100svh;overflow:hidden} #mono-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1} .hero-fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:700;font-size:min(40vh,32vw);color:var(--ink-700);line-height:1;user-select:none} .hero-fallback b{color:var(--acid);font-weight:700} body.no-three .hero-fallback{display:flex} body.no-three #mono-canvas{display:none} body.no-three .hero{height:100svh} @media (prefers-reduced-motion:reduce){.hero{height:100svh}} .hero-grid{position:absolute;inset:0;pointer-events:none;background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:38px 38px} .hero-copy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center; will-change:transform,opacity;pointer-events:none} .hero-copy .container{pointer-events:auto} .hero-copy .label{display:inline-block;background:rgba(13,15,18,.78);border:1px solid var(--ink-700); border-radius:3px;padding:8px 12px;backdrop-filter:blur(4px)} .hero-copy h1{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.02; font-size:clamp(44px,7.6vw,96px);margin:22px 0 26px;color:var(--white)} .hero-copy h1 .dot{color:var(--acid)} .hero-copy p{max-width:520px;font-size:18px;color:var(--slate-400)} .hero-ctas{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap} .hero-decay{position:absolute;left:24px;bottom:28px;z-index:2;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--slate);opacity:0;transition:opacity .4s} .hero-decay .sl{color:var(--acid)} .hero-decay.is-on{opacity:1} /* ---- Unterseiten-Hero ---- */ .page-hero{padding:170px 0 70px;position:relative;z-index:1} .page-hero .crumb{font-family:var(--font-mono);font-size:12px;color:var(--slate);letter-spacing:.06em;margin-bottom:22px} .page-hero .crumb .p{color:var(--acid)} .page-hero h1{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.05; font-size:clamp(36px,5.6vw,64px);color:var(--white);margin:14px 0 20px} .page-hero h1 .dot{color:var(--acid)} .page-hero .sub{max-width:620px;font-size:17.5px;color:var(--slate-400)} .page-grid-bg{position:absolute;inset:0;pointer-events:none;z-index:-1; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:38px 38px; mask-image:linear-gradient(#000 55%,transparent)} /* ---- Buttons ---- */ .btn{display:inline-flex;align-items:center;gap:10px;border-radius:4px;text-decoration:none; font-family:var(--font-mono);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-label); padding:16px 26px;border:1px solid transparent;background:none;cursor:pointer; transition:background .15s,border-color .15s;will-change:transform;color:var(--paper)} .btn-acid{background:var(--acid);color:var(--ink)} .btn-acid:hover{background:var(--acid-600)} .btn-ghost{border-color:var(--ink-600)} .btn-ghost:hover{border-color:var(--slate)} /* ---- Marquee ---- */ .marquee{border-top:1px solid var(--ink-700);border-bottom:1px solid var(--ink-700);overflow:hidden; background:var(--ink-800);position:relative;z-index:1} .marquee-track{display:flex;white-space:nowrap;width:max-content;animation:mq 26s linear infinite;padding:16px 0} .marquee:hover .marquee-track{animation-play-state:paused} @keyframes mq{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.marquee-track{animation:none}} .mq-item{font-family:var(--font-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);padding:0 28px} .mq-item .sl{color:var(--acid)} /* ---- Sektionen ---- */ section{position:relative;z-index:1;background:var(--ink)} .section{padding:120px 0} .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:56px;flex-wrap:wrap} .section-head h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.08; font-size:clamp(28px,4.2vw,44px);color:var(--white);margin-top:14px} .count{font-family:var(--font-mono);font-size:12px;color:var(--ink-600);letter-spacing:var(--tracking-label)} .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)} .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} .more-link{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:var(--tracking-label); color:var(--slate);text-decoration:none;transition:color .15s} .more-link:hover{color:var(--acid)} /* ---- Module (man-pages) ---- */ .mods{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;perspective:1200px} @media(max-width:900px){.mods{grid-template-columns:1fr}} .mod{background:var(--ink-800);border:1px solid var(--ink-700);border-radius:6px;overflow:hidden; transition:border-color .3s;transform-style:preserve-3d;will-change:transform;text-decoration:none;display:block;color:inherit} .mod:hover{border-color:var(--ink-600)} .mod-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--ink-700);background:var(--ink)} .mod-bar i{width:9px;height:9px;border-radius:1px;background:var(--ink-600)} .mod-bar i:first-child{background:var(--acid)} .mod-bar span{font-family:var(--font-mono);font-size:11px;color:var(--slate);letter-spacing:.08em;margin-left:6px} .mod-body{padding:26px 24px 30px;font-size:15px} .mod-body .mono-k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);display:block;margin:18px 0 4px} .mod-body .mono-k:first-child{margin-top:0} .mod-body h3{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.01em;color:var(--white)} .mod-body p{color:var(--slate-400);font-size:14.5px} .mod-body code{font-family:var(--font-mono);font-size:12.5px;color:var(--acid);background:rgba(199,242,61,.07); border:1px solid rgba(199,242,61,.18);border-radius:3px;padding:3px 8px;display:inline-block;margin-top:4px} /* Options-Liste in den Modul-Detailkarten */ .spec-list{list-style:none;margin-top:6px} .spec-list li{padding:7px 0;border-bottom:1px solid var(--ink-700);color:var(--slate-400);font-size:14.5px;display:flex;gap:10px} .spec-list li:last-child{border-bottom:0} .spec-list li::before{content:'/';font-family:var(--font-mono);color:var(--acid);font-weight:600} /* ---- Pipeline (CI-Stages) ---- */ .pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative} @media(max-width:900px){.pipe{grid-template-columns:1fr 1fr}} @media(max-width:560px){.pipe{grid-template-columns:1fr}} .stage{background:var(--ink-800);border:1px solid var(--ink-700);border-radius:6px;padding:24px 22px 28px;position:relative;transition:border-color .4s} .stage.is-ok{border-color:rgba(199,242,61,.35)} .stage .st-status{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--slate);text-transform:uppercase} .stage .st-status::before{content:'[ ';color:var(--ink-600)} .stage .st-status::after{content:' ]';color:var(--ink-600)} .stage.is-run .st-status{color:var(--paper)} .stage.is-ok .st-status{color:var(--acid)} .stage h3{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--white);margin:26px 0 8px;letter-spacing:-.01em} .stage p{color:var(--slate-400);font-size:14px} .stage .st-time{position:absolute;top:22px;right:20px;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-600);letter-spacing:.08em} .stage.is-ok .st-time{color:var(--slate)} /* Detailblöcke unter der Pipeline */ .stage-detail{display:grid;grid-template-columns:180px 1fr 280px;gap:28px;padding:36px 0;border-top:1px solid var(--ink-700);align-items:start} .stage-detail:last-of-type{border-bottom:1px solid var(--ink-700)} @media(max-width:900px){.stage-detail{grid-template-columns:1fr}} .stage-detail .sd-id{font-family:var(--font-mono);font-size:12px;color:var(--slate);letter-spacing:.1em;text-transform:uppercase} .stage-detail .sd-id .sl{color:var(--acid)} .stage-detail h3{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--white);letter-spacing:-.01em;margin-bottom:10px} .stage-detail p{color:var(--slate-400);font-size:15px;max-width:520px} .stage-detail .sd-out{font-family:var(--font-mono);font-size:11.5px;color:var(--slate);line-height:2} .stage-detail .sd-out b{color:var(--slate-400);font-weight:500;display:block;letter-spacing:.1em;text-transform:uppercase;font-size:10.5px;margin-bottom:4px} .stage-detail .sd-out .ok{color:var(--acid)} /* ---- Grundsätze ---- */ .principles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:900px){.principles{grid-template-columns:1fr}} .principle{border:1px solid var(--ink-700);border-radius:6px;padding:28px 26px;background:var(--ink-800)} .principle .pr-idx{font-family:var(--font-mono);font-size:12px;color:var(--slate);letter-spacing:.1em} .principle .pr-idx .sl{color:var(--acid)} .principle h3{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--white);margin:20px 0 8px;letter-spacing:-.01em} .principle p{color:var(--slate-400);font-size:14.5px} /* ---- Deploy-Log (Referenzen) ---- */ .deploys{border:1px solid var(--ink-700);border-radius:6px;overflow:hidden;font-family:var(--font-mono)} .dep{display:grid;grid-template-columns:110px 1fr 190px 120px;gap:18px;align-items:center; padding:22px 24px;background:var(--ink-800);border-bottom:1px solid var(--ink-700);font-size:12.5px; color:var(--slate-400);letter-spacing:.04em;text-decoration:none;transition:background .2s} .dep:last-child{border-bottom:0} .dep:hover{background:var(--ink-700)} @media(max-width:760px){.dep{grid-template-columns:90px 1fr;row-gap:6px}} .dep .d-id{color:var(--slate)} .dep .d-name{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--paper);letter-spacing:-.01em} .dep .d-status{color:var(--ink-600);text-transform:uppercase;font-size:10.5px;letter-spacing:.12em} .dep .d-status.q{color:var(--slate)} .dep .d-status.y{color:var(--acid)} .dep .d-go{text-align:right;color:var(--ink-600);transition:color .2s,transform .3s var(--ease-out)} .dep:hover .d-go{color:var(--acid);transform:translateX(3px)} @media(max-width:760px){.dep .d-status,.dep .d-go{grid-column:2}} /* Referenz-Platzhalterkarten */ .refs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:900px){.refs{grid-template-columns:1fr}} .ref{position:relative;border:1px solid var(--ink-700);border-radius:6px;background:var(--ink-800);aspect-ratio:4/3; display:flex;flex-direction:column;justify-content:flex-end;padding:24px;overflow:hidden;text-decoration:none;transition:border-color .3s} .ref:hover{border-color:var(--ink-600)} .ref .ref-grid{position:absolute;inset:0;background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:34px 34px;transition:transform .8s var(--ease-out)} .ref:hover .ref-grid{transform:scale(1.08)} .ref .ref-slash{position:absolute;top:18px;right:22px;font-family:var(--font-mono);font-size:44px;color:var(--ink-700);transition:color .3s;user-select:none} .ref:hover .ref-slash{color:var(--acid)} .ref .label{position:relative} .ref h3{position:relative;font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--slate-400);margin-top:8px;transition:color .3s} .ref:hover h3{color:var(--white)} /* ---- CTA-Band ---- */ .band{border-top:1px solid var(--ink-700);border-bottom:1px solid var(--ink-700);background:var(--ink-800); padding:56px 0;position:relative;z-index:1} .band-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap} .band h3{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,3vw,30px);letter-spacing:-.01em;color:var(--white)} .band h3 .dot{color:var(--acid)} .band p{color:var(--slate-400);font-size:15px;margin-top:6px} /* ---- Kontakt ---- */ .cmdline{font-family:var(--font-mono);font-size:clamp(17px,2.6vw,26px);color:var(--paper);margin:10px 0 8px;min-height:1.6em} .cmdline .pr{color:var(--acid)} .cmdline .caret{display:inline-block;width:.55em;height:1.15em;background:var(--acid);vertical-align:text-bottom; animation:caret 1.05s steps(1) infinite;margin-left:2px} @keyframes caret{50%{opacity:0}} @media (prefers-reduced-motion:reduce){.cmdline .caret{animation:none}} .contact-meta{display:flex;gap:34px;margin-top:40px;flex-wrap:wrap} .contact-meta b{color:var(--slate);font-weight:500} /* Terminal-Formular */ .tform{max-width:640px;margin-top:44px;border:1px solid var(--ink-700);border-radius:6px;overflow:hidden;background:var(--ink-800)} .tform-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--ink-700);background:var(--ink)} .tform-bar i{width:9px;height:9px;border-radius:1px;background:var(--ink-600)} .tform-bar i:first-child{background:var(--acid)} .tform-bar span{font-family:var(--font-mono);font-size:11px;color:var(--slate);letter-spacing:.08em;margin-left:6px} .tform-body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:16px} .tfield{display:flex;flex-direction:column;gap:6px} .tfield label{font-family:var(--font-mono);font-size:11px;color:var(--slate);letter-spacing:.12em;text-transform:uppercase} .tfield label .p{color:var(--acid)} .tfield input,.tfield textarea{background:var(--ink);border:1px solid var(--ink-600);border-radius:3px;color:var(--paper); font-family:var(--font-mono);font-size:13.5px;padding:12px 14px;resize:vertical;min-height:0} .tfield textarea{min-height:120px} .tfield input:focus,.tfield textarea:focus{border-color:var(--acid);outline:none} .tform-note{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-600);letter-spacing:.06em;line-height:1.8} /* ---- Footer ---- */ footer{border-top:1px solid var(--ink-700);padding:44px 0 60px;position:relative;z-index:1;background:var(--ink)} .foot-inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap} .foot-claim{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--slate-400)} .foot-claim .dot{color:var(--acid)} .foot-links{display:flex;gap:22px;list-style:none} .foot-links a{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--slate);text-decoration:none;transition:color .15s} .foot-links a:hover{color:var(--white)} .foot-legal{font-family:var(--font-mono);font-size:11px;color:var(--ink-600);letter-spacing:.06em;margin-top:16px;width:100%} .foot-uptime{font-family:var(--font-mono);font-size:11px;color:var(--slate);letter-spacing:.08em} .foot-uptime .sl{color:var(--acid)} /* ---- Rechtsseiten ---- */ .legal{max-width:720px;padding-bottom:60px} .legal h2{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--white);letter-spacing:-.01em;margin:44px 0 12px} .legal p,.legal li{color:var(--slate-400);font-size:15px} .legal ul{padding-left:20px;margin:10px 0} .legal .mono{font-family:var(--font-mono);font-size:13px;color:var(--slate)} .draft-note{display:inline-block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--acid);border:1px solid var(--acid);border-radius:2px;padding:6px 10px;margin-bottom:26px} /* ---- Terminal (der rote Faden, persistiert über Seiten) ---- */ .term{position:fixed;right:20px;bottom:20px;z-index:200;width:390px;max-height:46vh;display:flex;flex-direction:column; background:rgba(17,22,28,.94);backdrop-filter:blur(10px);border:1px solid var(--ink-600);border-radius:6px; box-shadow:0 8px 40px rgba(0,0,0,.5);overflow:hidden;font-family:var(--font-mono);font-size:11.5px; transition:transform .45s var(--ease-out)} .term.is-min{transform:translateY(calc(100% - 37px))} .term.no-anim{transition:none} @media(max-width:900px){.term{display:none}} .term-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--ink);border-bottom:1px solid var(--ink-700); user-select:none;cursor:pointer} .term-bar .t-dot{width:9px;height:9px;border-radius:1px;background:var(--ink-600)} .term-bar .t-dot.a{background:var(--acid)} .term-bar .t-title{color:var(--slate);letter-spacing:.06em;margin-left:6px;flex:1} .term-bar .t-min{color:var(--slate);background:none;border:0;font-family:inherit;font-size:13px;padding:0 4px;cursor:pointer} .term.has-news .t-title{color:var(--acid)} .term-body{padding:12px 14px;overflow-y:auto;flex:1;min-height:120px;scrollbar-width:thin;scrollbar-color:var(--ink-600) transparent} .term-body .tl{white-space:pre-wrap;word-break:break-word;line-height:1.75;color:var(--slate-400)} .term-body .tl .p{color:var(--acid)} .term-body .tl.cmd{color:var(--paper)} .term-body .tl.ok{color:var(--acid)} .term-body .tl.dim{color:var(--ink-600)} .term-input{display:flex;gap:8px;align-items:center;border-top:1px solid var(--ink-700);padding:9px 14px;background:var(--ink)} .term-input .p{color:var(--acid);white-space:nowrap} .term-input input{flex:1;background:none;border:0;outline:none;color:var(--paper);font-family:inherit;font-size:11.5px;letter-spacing:.02em} /* Mobile: schmale Statuszeile als Terminal-Ersatz */ .statusbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:200;background:rgba(13,15,18,.92); backdrop-filter:blur(8px);border-top:1px solid var(--ink-700);padding:9px 14px; font-family:var(--font-mono);font-size:10.5px;color:var(--slate-400);letter-spacing:.05em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .statusbar .p{color:var(--acid)} @media(max-width:900px){.statusbar{display:block}} /* ---- Projekt-Fenster (Details beim Klick auf Projekte) ---- */ [data-project]{cursor:pointer} .pwin-backdrop{position:fixed;inset:0;z-index:8000;background:rgba(13,15,18,.72);backdrop-filter:blur(6px); opacity:0;pointer-events:none;transition:opacity .25s ease} .pwin-backdrop.is-on{opacity:1;pointer-events:auto} .pwin{position:fixed;z-index:8001;left:50%;top:50%;width:min(720px,calc(100vw - 28px)); max-height:min(84vh,780px);display:flex;flex-direction:column;overflow:hidden; background:var(--ink-800);border:1px solid var(--ink-600);border-radius:6px; box-shadow:0 24px 80px rgba(0,0,0,.6); opacity:0;pointer-events:none;transform:translate(-50%,-50%) translateY(16px) scale(.985); transition:opacity .28s var(--ease-out),transform .28s var(--ease-out)} .pwin.is-on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)} .pwin-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--ink-700);background:var(--ink);flex-shrink:0} .pwin-bar i{width:9px;height:9px;border-radius:1px;background:var(--ink-600)} .pwin-bar i:first-child{background:var(--acid)} .pwin-bar span{font-family:var(--font-mono);font-size:11px;color:var(--slate);letter-spacing:.08em;margin-left:6px;flex:1; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pw-x{font-family:var(--font-mono);font-size:12px;color:var(--slate);background:none;border:1px solid var(--ink-600); border-radius:3px;padding:5px 10px;cursor:pointer} .pw-x:hover{color:var(--paper);border-color:var(--slate)} .pwin-body{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ink-600) transparent} .pwin-shot{background:var(--ink);border-bottom:1px solid var(--ink-700);padding:26px;min-height:200px; display:flex;align-items:center;justify-content:center; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:30px 30px} .pwin-info{padding:24px 26px 30px} .pw-status{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; border:1px solid var(--ink-600);border-radius:2px;padding:5px 9px;color:var(--slate);display:inline-block} .pw-status.live{color:var(--acid);border-color:rgba(199,242,61,.4)} .pwin-info h3{font-family:var(--font-display);font-weight:600;font-size:23px;letter-spacing:-.01em;color:var(--white);margin:16px 0 10px} .pwin-info p{color:var(--slate-400);font-size:15px} .pwin-meta{display:grid;grid-template-columns:130px 1fr;gap:8px 18px;margin-top:22px; font-family:var(--font-mono);font-size:12px;letter-spacing:.03em} .pwin-meta dt{color:var(--slate);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;padding-top:1px} .pwin-meta dd{color:var(--paper)} /* Mini-Mock „Screenshots" im Fenster */ .pw-mock{width:min(420px,100%);border:1px solid var(--ink-600);border-radius:6px;overflow:hidden;background:var(--ink-800)} .pw-mock-bar{display:flex;gap:6px;padding:9px 12px;background:var(--ink);border-bottom:1px solid var(--ink-700)} .pw-mock-bar i{width:7px;height:7px;border-radius:1px;background:var(--ink-600)} .pw-mock-bar i:first-child{background:var(--acid)} .pw-mock-body{padding:18px;display:flex;flex-direction:column;gap:9px} .pw-line{height:9px;border-radius:2px;background:var(--ink-600)} .pw-line.w60{width:60%}.pw-line.w40{width:40%}.pw-line.w80{width:80%} .pw-line.acid{background:var(--acid);height:12px;width:34%} .pw-term{font-family:var(--font-mono);font-size:12px;line-height:2;color:var(--slate-400);text-align:left;width:min(420px,100%)} .pw-term .ok{color:var(--acid)} .pw-wip{font-family:var(--font-mono);font-size:12.5px;color:var(--slate);letter-spacing:.08em;text-transform:uppercase; border:1.5px dashed var(--ink-600);border-radius:4px;padding:34px 26px;text-align:center;width:min(420px,100%)} .pw-wip .sl{color:var(--acid)} @media(max-width:640px){ .pwin{width:calc(100vw - 16px);max-height:90vh} .pwin-shot{padding:18px;min-height:150px} .pwin-info{padding:20px 18px 26px} .pwin-meta{grid-template-columns:1fr;gap:2px} .pwin-meta dt{margin-top:10px} } /* ---- cat /leon (Über-Sektion) ---- */ .about{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:start} @media(max-width:860px){.about{grid-template-columns:1fr;gap:28px}} .about-photo{position:relative;aspect-ratio:4/5;border:1px solid var(--ink-700);border-radius:6px; background:var(--ink-800);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:20px} .about-photo .label{position:relative} .about-slash{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%); font-family:var(--font-display);font-weight:700;font-size:84px;color:var(--ink-700);user-select:none} .about-slash b{color:var(--acid);font-weight:700} .about-text h3{font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.6vw,26px); letter-spacing:-.01em;color:var(--white);margin-bottom:16px;line-height:1.3} .about-text p{color:var(--slate-400);font-size:15.5px;max-width:560px;margin-bottom:14px} .about-meta{margin-top:26px} /* ---- 404 ---- */ .err-code{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1; font-size:clamp(90px,22vw,220px);color:var(--ink-700);user-select:none} .err-code b{color:var(--acid);font-weight:700} .err-ls{font-family:var(--font-mono);font-size:13px;line-height:2.2;color:var(--slate-400); border:1px solid var(--ink-700);border-radius:6px;background:var(--ink-800); padding:18px 22px;max-width:480px;margin:34px 0} .err-ls .p{color:var(--acid)} .err-ls a{color:var(--paper);text-decoration:none} .err-ls a:hover{color:var(--acid)} /* ---- Mobile-Feinschliff ---- */ @media(max-width:860px){ .page-hero{padding:128px 0 50px} .section{padding:76px 0} .band{padding:44px 0} .section-head{margin-bottom:38px} footer{padding-bottom:104px} /* Platz für die Statuszeile */ } @media(max-width:560px){ .hero-ctas{width:100%} .hero-ctas .btn{flex:1 1 100%;justify-content:center} .band-inner .btn{width:100%;justify-content:center} .container{padding:0 18px} .nav-inner{padding:0 18px} }