/* ============================================================ Ulto — unified stylesheet für alle Seiten Scope über (index) bzw. (imprint, privacy). Geteilte Basis oben, seiten-spezifisch unten. ============================================================ */ /* ---- Fonts self-hosted (DSGVO — keine Remote-Requests) ---- */ @font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:400;font-display:swap; src:url("fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2")} @font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:500;font-display:swap; src:url("fonts/ibm-plex-serif-latin-500-normal.woff2") format("woff2")} @font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:600;font-display:swap; src:url("fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap; src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap; src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")} /* ---- Geteilte Tokens (Stone-Palette) + Reset ---- */ :root{--bg:#edeae1;--ink:#141414;--dim:#5e5c53;--line:#c9c5b8;--ghost:#dcd8ca; --mono:"IBM Plex Mono",ui-monospace,monospace; --serif:"IBM Plex Serif",Georgia,serif} *{margin:0;padding:0;box-sizing:border-box} html{overflow-x:hidden} /* ============================================================ HOME (index.html) — „AIR": schmaler Satzspiegel, Grain, Animationen ============================================================ */ body.home{background:var(--bg);color:var(--ink);font-family:var(--serif);text-wrap:pretty; font-size:18.5px;line-height:1.8;overflow-x:hidden} body.home::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50; opacity:.035;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")} .home .wrap{max-width:720px;margin:0 auto;padding:0 32px;position:relative} /* Links: stehende Haarlinie, bei Hover wächst eine Tinten-Linie von links darüber */ .home a{color:var(--ink);text-decoration:none; background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--line),var(--line)); background-size:0% 1px,100% 1px;background-position:0 100%,0 100%; background-repeat:no-repeat;transition:background-size .25s ease; padding-bottom:1px} .home a:hover{background-size:100% 1px,100% 1px} .home a:focus-visible{background-size:100% 1px,100% 1px;outline:2px solid var(--ink);outline-offset:3px;border-radius:1px} .home .label{font-family:var(--mono);font-size:11.5px;letter-spacing:.26em; text-transform:uppercase;color:var(--dim)} .home header{padding:128px 0 88px;position:relative} /* Kopflinie zieht sich einmalig von links */ .home header::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px; background:var(--ink);transform:scaleX(0);transform-origin:left; animation:grow .9s .5s ease forwards} @keyframes grow{to{transform:scaleX(1)}} .home .wm{position:absolute;right:-480px;top:40px;width:540px;opacity:.12;pointer-events:none} .home .wm2{right:auto;left:-560px;top:25px;width:560px;opacity:.12;transform:none} .home .wm3{right:-460px;left:auto;top:auto;bottom:-40px;width:520px;opacity:.12;transform:none} @media (max-width:640px){ .home .wm{right:-175px;top:80px;width:400px} .home .wm2{left:-290px;top:190px;width:460px} .home .wm3{right:-190px;top:auto;bottom:15px;width:430px} } /* Wasserzeichen zeichnet sich beim Laden wie am Plotter (pathLength via JS) */ .home .wm .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s ease-out forwards} @keyframes draw{to{stroke-dashoffset:0}} .home .claim{margin-top:88px;font-size:clamp(28px,4vw,42px);font-weight:600;text-wrap:balance; line-height:1.2;letter-spacing:-.005em;max-width:16ch;position:relative} .home .vision{margin-top:36px;max-width:520px;font-size:19px;color:#3d3a31;position:relative} .home .vision em{color:var(--ink);font-style:normal;font-weight:600} .home section{padding:104px 0;position:relative} /* Trennlinie wächst von links, sobald die Sektion ins Bild kommt */ .home section::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px; background:var(--line);transform:scaleX(0);transform-origin:left; transition:transform .7s ease .15s} .home section.in::after{transform:scaleX(1)} .home .shead{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:58px} .home .shead .big{font-family:var(--mono);font-size:44px;font-weight:400; color:#c9c5b8;line-height:.9;user-select:none} .home .shead h2{font-family:var(--mono);font-size:18px;letter-spacing:.3em; text-transform:uppercase;color:#3d3a31;font-weight:400} .home .rv{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease} .home .rv.in{opacity:1;transform:none} /* Technologie-Blöcke erscheinen gestaffelt (Setzkasten statt Diashow) */ .home .rv .pillar{opacity:0;transform:translateY(10px); transition:opacity .5s ease,transform .5s ease} .home .rv.in .pillar{opacity:1;transform:none} .home .rv.in .pillar:nth-child(2){transition-delay:.05s} .home .rv.in .pillar:nth-child(3){transition-delay:.13s} .home .rv.in .pillar:nth-child(4){transition-delay:.21s} .home .rv.in .pillar:nth-child(5){transition-delay:.29s} @media(prefers-reduced-motion:reduce){ .home .rv,.home .rv .pillar{opacity:1;transform:none;transition:none} .home header::after,.home section::after{transform:none;animation:none;transition:none} .home .wm .draw{stroke-dasharray:none;stroke-dashoffset:0;animation:none} } .home .pillar{padding:36px 0;border-top:1px solid var(--line)} .home .pillar:first-of-type{border-top:none;padding-top:0} .home .pillar .no{font-family:var(--mono);font-size:12px;color:var(--dim)} .home .pillar h3{font-size:23px;font-weight:600;margin:8px 0 10px} .home .pillar p{color:#3d3a31;max-width:560px;font-size:17px} .home .ip{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono); font-size:10.5px;letter-spacing:.18em;color:var(--ink);margin-top:16px} .home .ip::before{content:"";width:8px;height:10px;background:var(--ink);transform:skew(-18deg)} .home .prog{display:grid;grid-template-columns:180px 1fr;gap:16px 40px;font-size:18px} .home .prog .code{font-family:var(--mono);font-size:14px;letter-spacing:.08em} .home .prog .desc{color:var(--dim)} .home .apps p{font-size:18px;max-width:640px;color:#3d3a31;line-height:2} .home .apps .sep{color:var(--line);padding:0 10px} .home .block .strong{color:#3d3a31;font-size:18.5px;max-width:600px;margin-bottom:16px;line-height:1.8} .home .block .quiet{color:var(--dim);max-width:580px;font-family:var(--mono); font-size:14px;letter-spacing:.02em;line-height:1.9} .home .contact .mail{font-size:18px;font-weight:500;margin-bottom:12px} .home .contact .mail a{background:none} .home .contact p{color:var(--dim);margin-bottom:4px;max-width:580px; font-family:var(--mono);font-size:14px;letter-spacing:.02em;line-height:1.9} .home footer{padding:56px 0 96px;font-family:var(--mono);font-size:12px; color:var(--dim);line-height:2.2} .home footer .mark{color:var(--ink)} .home footer a{color:var(--dim);border-bottom-color:var(--line)} @media print{body.home::after{display:none}body.home{background:#fff}.home .rv{opacity:1;transform:none}} /* ============================================================ LEGAL (imprint.html, privacy.html) — schlicht, keine Deko ============================================================ */ body.legal{background:var(--bg);color:var(--ink);font-family:var(--serif);text-wrap:pretty; font-size:16.5px;line-height:1.75} .legal .wrap{max-width:720px;margin:0 auto;padding:64px 32px 80px} .legal a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)} .legal a:hover{border-bottom-color:var(--ink)} .legal .back{font-family:var(--mono);font-size:12px;letter-spacing:.18em; text-transform:uppercase;color:var(--dim);border-bottom:none} .legal .back:hover{color:var(--ink)} .legal h1{font-size:26px;font-weight:600;margin:40px 0 8px; padding-bottom:20px;border-bottom:2px solid var(--ink)} .legal .meta{font-family:var(--mono);font-size:12px;color:var(--dim); letter-spacing:.06em;margin-bottom:36px} .legal h2{font-family:var(--mono);font-size:12px;letter-spacing:.2em; text-transform:uppercase;color:#3d3a31;font-weight:400;margin:34px 0 10px} .legal p{margin-bottom:12px;max-width:640px} .legal footer{margin-top:56px;padding-top:22px;border-top:1px solid var(--line); font-family:var(--mono);font-size:12px;color:var(--dim);line-height:2} .legal footer a{color:var(--dim)}