/* wireon.ch — Stile zur Design-Übergabe (design/wireon.html). Schriften selbst gehostet, damit die Seite an keinem Drittanbieter hängt: IBM Plex Sans (variabel, 400–700) und IBM Plex Mono, SIL Open Font License. */ @font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/plex-sans-var-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/plexmono-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/plexmono-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root{ --bg:#ffffff; --fg:#000000; --muted:#6a6a6a; --line:hsla(var(--hue),var(--sat),38%,.34); --faint:#f5f5f5; --sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --hue:214; --sat:78%; --acc:hsl(var(--hue),var(--sat),42%); --acc-ink:#ffffff; --acc-text:hsl(var(--hue),var(--sat),42%); --pad:clamp(4rem,9vh,7rem); --ease:cubic-bezier(.22,1,.36,1); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#000000; --fg:#ffffff; --muted:#909090; --line:hsla(var(--hue),var(--sat),62%,.34); --faint:#0f0f0f; --acc:hsl(var(--hue),var(--sat),62%); --acc-ink:#000000; --acc-text:hsl(var(--hue),var(--sat),62%); } } :root[data-theme="dark"]{ --bg:#000000; --fg:#ffffff; --muted:#909090; --line:hsla(var(--hue),var(--sat),62%,.34); --faint:#0f0f0f; --acc:hsl(var(--hue),var(--sat),62%); --acc-ink:#000000; --acc-text:hsl(var(--hue),var(--sat),62%); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* Springt der Fokus an den unteren Rand, soll die feste Leiste das Ziel nicht verdecken — deshalb hält das Scrollen davor an. */ @media (max-width:760px){ html{scroll-padding-bottom:calc(5rem + env(safe-area-inset-bottom,0px))} } body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:18px; line-height:1.58; letter-spacing:-0.004em; -webkit-font-smoothing:antialiased; overflow-x:hidden; } ::selection{background:var(--acc); color:var(--acc-ink)} a{color:inherit} button{font:inherit; color:inherit} :focus-visible{outline:2px solid var(--acc); outline-offset:3px} svg{max-width:100%} .ic{width:1em; height:1em; fill:currentColor; flex:none; vertical-align:-0.13em} .wrap{width:min(1240px, 100% - 2.6rem); margin-inline:auto} .mono{font-family:var(--mono); font-size:.78rem; letter-spacing:0} .dim{color:var(--muted)} .band{padding:var(--pad) 0; border-top:1px solid var(--line)} .band.first{border-top:0} h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-0.035em; line-height:1.03} h1{font-size:clamp(2.6rem,6.6vw,5.2rem); font-weight:700; letter-spacing:-0.045em} h2{font-size:clamp(1.9rem,4.2vw,3.3rem)} h3{font-size:1.15rem; letter-spacing:-0.015em; line-height:1.3} p{margin:0 0 1.1rem} .lead{font-size:clamp(1.14rem,1.9vw,1.46rem); line-height:1.5; color:var(--muted); max-width:36em} .body{max-width:34em} .body p:last-child,.lead:last-child{margin-bottom:0} .eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.76rem; color:var(--muted); margin-bottom:1.6rem} .eyebrow .ic{font-size:1rem; color:var(--acc)} /* --- zeilenaufzug für titel --- */ .rise > span{display:block; overflow:hidden} .rise i{display:block; font-style:normal; transform:translateY(110%)} [data-route].on .rise i{animation:up .75s var(--ease) forwards} [data-route].on .rise span:nth-child(2) i{animation-delay:.07s} [data-route].on .rise span:nth-child(3) i{animation-delay:.14s} @keyframes up{to{transform:translateY(0)}} /* --- header --- */ .top{position:sticky; top:0; z-index:60; background:var(--bg); border-bottom:1px solid var(--line)} .top .wrap{display:flex; align-items:center; gap:1.4rem; height:64px} .progress{position:absolute; left:0; bottom:-1px; height:2px; background:var(--acc); width:0} .routeflash{position:absolute; left:0; bottom:-1px; height:2px; background:var(--acc); width:0; opacity:0} .routeflash.run{animation:flash .6s ease forwards} @keyframes flash{0%{width:0;opacity:1}70%{width:100%;opacity:1}100%{width:100%;opacity:0}} .brand{display:flex; align-items:center; gap:.62rem; text-decoration:none} .brand svg{fill:currentColor; transition:transform .5s var(--ease)} .brand:hover .m{opacity:.55} .crumb{color:var(--muted); margin-right:auto; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .tools{display:flex; align-items:center; gap:.4rem} .iconbtn{display:inline-flex; align-items:center; gap:.4rem; background:none; border:1px solid var(--line); padding:.42rem .6rem; cursor:pointer; font-family:var(--mono); font-size:.74rem; color:var(--muted); transition:color .18s ease,border-color .18s ease} .iconbtn:hover{color:var(--fg); border-color:var(--acc)} .iconbtn .ic{font-size:1.05rem; transition:transform .45s var(--ease)} #theme:hover .ic{transform:rotate(180deg)} .accwrap{position:relative} .accbtn .sw{width:14px; height:14px; background:var(--acc); display:block} .accpop{position:absolute; right:0; top:calc(100% + .5rem); background:var(--bg); border:1px solid var(--acc); padding:.8rem; z-index:70; width:18rem} .accpop[hidden]{display:none} .accfield{position:relative; height:130px; border:1px solid var(--line); cursor:crosshair; touch-action:none; background:linear-gradient(to bottom, rgba(128,128,128,0) 0%, rgba(128,128,128,.98) 100%), linear-gradient(to right, hsl(0,85%,50%), hsl(45,85%,50%), hsl(90,85%,50%), hsl(135,85%,50%), hsl(180,85%,50%), hsl(225,85%,50%), hsl(270,85%,50%), hsl(315,85%,50%), hsl(360,85%,50%))} .accdot{position:absolute; width:13px; height:13px; border:2px solid #fff; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; box-shadow:0 0 0 1px rgba(0,0,0,.65)} .accnow{display:flex; align-items:center; gap:.5rem; margin-top:.7rem; font-family:var(--mono); font-size:.74rem; color:var(--muted)} .accnow i{width:16px; height:16px; background:var(--acc); display:block; font-style:normal} .accpop .row{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.8rem; font-family:var(--mono); font-size:.74rem; color:var(--muted)} .accpop input[type=color]{width:34px; height:24px; padding:0; border:1px solid var(--line); background:none; cursor:pointer} .accpop .row button{background:none; border:1px solid var(--line); font-family:var(--mono); font-size:.74rem; color:var(--muted); padding:.3rem .55rem; cursor:pointer} .accpop .row button:hover{color:var(--fg); border-color:var(--acc)} .only-desk{display:inline-flex} @media (max-width:1000px){ .only-desk{display:none} .crumb{font-size:.72rem} } /* --- leiste unten (nur smartphone) --- */ /* Auf dem Telefon führt eine feste Leiste am unteren Rand durch die Bereiche. Sie ersetzt dort das Menü; auf grösseren Schirmen gibt es sie nicht. */ .tabbar{display:none} @media (max-width:760px){ .tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:45; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:var(--bg); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom, 0px); } .tabbar a{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.28rem; padding:.62rem .15rem .56rem; text-decoration:none; color:var(--muted); font-family:var(--mono); font-size:.62rem; letter-spacing:.01em; -webkit-tap-highlight-color:transparent; transition:color .18s ease; } .tabbar a .ic{font-size:1.32rem; transition:transform .25s var(--ease)} .tabbar a:active .ic{transform:scale(.88)} .tabbar a[aria-current="page"]{color:var(--fg)} .tabbar a[aria-current="page"] .ic{color:var(--acc)} /* der Strich oben zeigt zusätzlich, wo man steht */ .tabbar a[aria-current="page"]::before{ content:''; position:absolute; top:-1px; left:0; right:0; height:2px; background:var(--acc); } /* das Menü wäre neben der Leiste doppelt */ #openmenu{display:none} /* Platz schaffen, sonst deckt die Leiste den Fuss zu */ body{padding-bottom:calc(4rem + env(safe-area-inset-bottom, 0px))} } @media (max-width:360px){ .tabbar a{font-size:.56rem; padding-left:.05rem; padding-right:.05rem} .tabbar a .ic{font-size:1.2rem} } /* --- ticker --- */ .ticker{border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:.62rem 0; background:var(--faint)} .ticker .rail{display:flex; width:max-content; animation:slide 34s linear infinite; font-family:var(--mono); font-size:.76rem; color:var(--muted)} .ticker:hover .rail{animation-play-state:paused} /* Abstand als Aussenabstand am Wort, nicht als gap: nur so ist die Strecke einer Runde exakt die Breite einer Kopie und der Lauf nahtlos. */ .ticker .rail > span{display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; margin-right:2.6rem} /* --weg setzt das Skript auf die exakte Breite einer Kopie. */ @keyframes slide{to{transform:translateX(calc(-1 * var(--weg, 50%)))}} /* --- partikel-navigation --- */ .navlayer{position:fixed; inset:0; z-index:90} .navlayer[hidden]{display:none} .navlayer .veil{position:absolute; inset:0; background:var(--bg); opacity:0; transition:opacity .45s var(--ease)} .navlayer.on .veil{opacity:.98} #navcanvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:1; transition:opacity .5s ease} .navlayer.ready #navcanvas{opacity:0} .navtop{position:absolute; top:0; left:0; right:0; height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 1.3rem; opacity:0; transition:opacity .35s ease .1s} .navlayer.ready .navtop{opacity:1} .navmenu{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(1240px,100% - 2.6rem)} .navmenu a{position:relative; display:block; text-decoration:none; padding:.14rem 0 .14rem 2.6rem; width:max-content; max-width:100%} .navmenu .nvtxt{display:inline-block; font-family:var(--sans); font-weight:700; font-size:clamp(2rem,7vw,4.6rem); line-height:1.16; letter-spacing:-0.05em; opacity:0; transition:opacity .14s ease} .navlayer.ready .navmenu .nvtxt{opacity:1} .navmenu a::before{content:''; position:absolute; left:0; top:50%; width:16px; height:2px; background:var(--acc); transform:scaleX(0); transform-origin:left; transition:transform .32s var(--ease)} .navlayer.ready .navmenu a:hover::before, .navlayer.ready .navmenu a:focus-visible::before, .navlayer.ready .navmenu a[aria-current="page"]::before{transform:scaleX(1)} .navmenu a:not([aria-current="page"]):not(:hover) .nvtxt{color:var(--fg)} .navfoot{position:absolute; left:0; right:0; bottom:1.5rem; display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:space-between; padding:0 1.3rem; font-family:var(--mono); font-size:.76rem; color:var(--muted); opacity:0; transition:opacity .35s ease .18s} .navlayer.ready .navfoot{opacity:1} @media (max-width:620px){ .navmenu{top:auto; bottom:5.5rem; transform:translate(-50%,0)} } /* --- palette --- */ .palette{position:fixed; inset:0; z-index:80; display:grid; place-items:start center; padding-top:12vh} .palette[hidden]{display:none} .palette .veil{position:absolute; inset:0; background:var(--bg); opacity:.88; animation:vfade .2s ease} @keyframes vfade{from{opacity:0}} .palette .box{position:relative; width:min(560px,92vw); border:1px solid var(--acc); background:var(--bg); animation:boxin .26s var(--ease)} @keyframes boxin{from{opacity:0; transform:translateY(-10px) scale(.98)}} .palette .field{display:flex; align-items:center; gap:.6rem; padding:.85rem 1rem; border-bottom:1px solid var(--line)} .palette input{flex:1; border:0; background:none; color:var(--fg); font-family:var(--mono); font-size:.95rem; padding:0} .palette input:focus{outline:none} .palette ul{list-style:none; margin:0; padding:.35rem; max-height:52vh; overflow:auto} .palette li button{width:100%; display:flex; align-items:center; gap:.7rem; background:none; border:0; cursor:pointer; padding:.62rem .7rem; text-align:left; font-family:var(--mono); font-size:.85rem} .palette li[data-sel="1"] button{background:var(--fg); color:var(--bg)} .palette li button .tag{margin-left:auto; font-size:.7rem; opacity:.55} /* --- buttons --- */ .btn{position:relative; display:inline-flex; align-items:center; gap:.55rem; font-family:var(--mono); font-size:.85rem; text-decoration:none; cursor:pointer; border:1px solid var(--acc); background:transparent; color:var(--fg); padding:.8rem 1.15rem; overflow:hidden; transition:color .28s ease, border-color .28s ease} .btn span, .btn .ic{position:relative; z-index:1} .btn::before{content:''; position:absolute; inset:0; background:var(--acc); transform:translateY(0); transition:transform .32s var(--ease)} .btn:hover::before{transform:translateY(-101%)} .btn{color:var(--acc-ink)} .btn:hover{color:var(--fg)} .btn.ghost{border-color:var(--line); color:var(--fg)} .btn.ghost:hover{color:var(--acc-ink)} .btn.ghost::before{transform:translateY(101%)} .btn.ghost:hover{color:var(--acc-ink); border-color:var(--acc)} .btn.ghost:hover::before{transform:translateY(0)} .btn[disabled]{opacity:.45; cursor:default} .btn .ic{font-size:1.05rem} .cta{display:flex; flex-wrap:wrap; gap:.65rem; margin-top:2.2rem} /* --- routes --- */ [data-route]{display:none} [data-route].on{display:block} /* ========================================================== ohne javascript Bereiche werden über die Klasse "on" eingeblendet, und viele Elemente warten auf eine Klasse, die erst das Skript setzt. Wer ohne JavaScript liest — und so lesen die meisten KI-Crawler — sähe sonst eine leere Seite. Die Klasse no-js am nimmt das Inline-Skript im Kopf sofort wieder weg; für alle anderen bleibt der ganze Inhalt sichtbar. ========================================================== */ .no-js [data-route]{display:block} .no-js .rise i{transform:none} .no-js [data-reveal]{opacity:1; transform:none} .no-js [data-stagger] > *{opacity:1; transform:none} .no-js .funnel .draw{stroke-dashoffset:0} .no-js .funnel .flabel, .no-js .funnel .node{opacity:1} .no-js .funnel .mark{opacity:1; transform:none} .no-js .tile .more{grid-template-rows:1fr} .no-js .navlayer, .no-js .palette{display:none} /* Nebenseiten (Impressum, Datenschutz, 404) haben keinen Bereich. Ihre Überschrift läge sonst für immer unter der Abschneidekante. */ body.single .rise i{animation:up .75s var(--ease) forwards} /* --- hero --- */ .hero{position:relative; overflow:hidden; display:flex; align-items:center; min-height:min(84vh,760px); padding-top:clamp(3rem,8vh,5.5rem); padding-bottom:clamp(3rem,8vh,5rem)} .hero > canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.22; transition:opacity .7s var(--ease)} .hero.live > canvas{opacity:.4} .hero-inner{position:relative; z-index:1} .hero-copy{max-width:44rem} @media (max-width:760px){ .hero{min-height:auto} .hero > canvas{opacity:.16} } .line2{display:block; font-family:var(--mono); font-weight:400; letter-spacing:-0.02em; font-size:clamp(1.3rem,3.3vw,2.4rem); margin-top:.55em} .caret{display:inline-block; width:.5em; height:1em; background:var(--acc); vertical-align:-0.13em; margin-left:.08em} .blink{animation:blink 1.1s step-end infinite} @keyframes blink{50%{opacity:0}} .hero-facts{display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:2.4rem; font-family:var(--mono); font-size:.78rem; color:var(--muted)} .hero-facts span{display:inline-flex; align-items:center; gap:.42rem} /* --- claims --- */ .claims{border-top:1px solid var(--line)} .claims div{display:flex; gap:1rem; align-items:flex-start; border-bottom:1px solid var(--line); padding:1.35rem 0; font-size:clamp(1.12rem,2.1vw,1.52rem); line-height:1.4; letter-spacing:-0.015em; transition:padding-left .3s var(--ease)} .claims div:hover{padding-left:.7rem} .claims .ic{font-size:1.3rem; color:var(--muted); margin-top:.2em; transition:transform .3s var(--ease)} .claims div:hover .ic{transform:scale(1.35)} /* --- übersetzer --- */ .term{position:relative; border:1px solid var(--acc); max-width:50rem; overflow:hidden} .term.busy::after{content:''; position:absolute; left:0; right:0; height:38%; top:0; background:linear-gradient(180deg, transparent, currentColor, transparent); opacity:.07; animation:scan 1.5s linear infinite; pointer-events:none} @keyframes scan{from{transform:translateY(-100%)}to{transform:translateY(300%)}} .term-bar{display:flex; justify-content:space-between; align-items:center; gap:1rem; background:var(--acc); color:var(--acc-ink); padding:.55rem .85rem; font-family:var(--mono); font-size:.76rem} .term-bar span{display:inline-flex; align-items:center; gap:.45rem} .term textarea{width:100%; display:block; border:0; background:transparent; color:var(--fg); resize:vertical; font-family:var(--mono); font-size:.92rem; line-height:1.65; padding:1.1rem .95rem; min-height:8rem} .term textarea:focus{outline:none} .term textarea::placeholder{color:var(--muted)} .term-foot{display:flex; justify-content:space-between; align-items:center; gap:1rem; border-top:1px solid var(--line); padding:.65rem .65rem .65rem .95rem} /* Auf dem Telefon stehen Knopf und Hinweis untereinander. Nebeneinander bleibt für beide zu wenig Platz: die Beschriftung bricht um und der ganze Fuss wirkt gequetscht. */ @media (max-width:620px){ .term-foot{flex-direction:column; align-items:stretch; gap:.75rem; padding:.85rem} .term-foot .btn{order:1; width:100%; justify-content:center} .term-foot #hint{order:2; text-align:center} } .chips{display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0 1.4rem; max-width:50rem} .chip{border:1px solid var(--line); background:none; cursor:pointer; padding:.38rem .7rem; font-family:var(--mono); font-size:.74rem; color:var(--muted); transition:color .2s ease,border-color .2s ease,transform .2s var(--ease)} .chip:hover{border-color:var(--acc); color:var(--fg)} .chip[aria-pressed="true"]{background:var(--acc); color:var(--acc-ink); border-color:var(--acc)} .out{max-width:50rem; margin-top:1.6rem; border-left:2px solid var(--acc); padding-left:1.5rem} .out[hidden]{display:none} .out .row{padding:1.05rem 0; border-bottom:1px solid var(--line); opacity:0; transform:translateY(10px); animation:rowin .45s var(--ease) forwards} .out .row:last-of-type{border-bottom:0} @keyframes rowin{to{opacity:1; transform:none}} .out .k{display:flex; align-items:center; gap:.45rem; font-family:var(--mono); font-size:.73rem; color:var(--muted); margin-bottom:.5rem} .out ul{margin:0; padding-left:1.15rem} .out li{margin-bottom:.35rem} .out .scaleword{font-family:var(--mono); font-size:1.08rem} .out .note{font-size:.88rem; color:var(--muted); margin:1rem 0 0} .status{font-family:var(--mono); font-size:.8rem; color:var(--muted); margin-top:1.1rem; max-width:50rem} .status[hidden]{display:none} /* --- split --- */ .split{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line)} /* Beidseitig gleicher Abstand — sonst klebt die linke Spalte am Rand. */ .split > div{padding:2rem; border-bottom:1px solid var(--line); transition:background .3s ease} .split > div:hover{background:var(--faint)} .split > div + div{border-left:1px solid var(--line)} .split h3{font-family:var(--mono); font-weight:400; font-size:.78rem; color:var(--muted); margin-bottom:1rem} .split p{font-size:1.14rem; line-height:1.5; max-width:24em; margin:0} @media (max-width:760px){ .split{grid-template-columns:1fr} .split > div{padding:1.5rem 0} .split > div + div{border-left:0} } /* --- prozess --- */ .steptabs{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); margin-top:2.4rem; position:relative} .steptabs button{background:none; border:0; border-bottom:2px solid var(--line); cursor:pointer; text-align:left; padding:1.1rem 1rem 1.1rem 0; display:flex; flex-direction:column; gap:.55rem; color:var(--muted); transition:color .22s ease} .steptabs button .n{display:flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.74rem} .steptabs button .n .ic{font-size:1.05rem; transition:transform .35s var(--ease)} .steptabs button:hover .ic{transform:translateY(-3px)} .steptabs button .t{font-family:var(--mono); font-size:1.02rem} .steptabs button:hover{color:var(--fg)} .steptabs button[aria-selected="true"]{color:var(--fg); border-bottom-color:var(--acc)} .steppanel{padding:2rem 0 0; max-width:36em; min-height:7rem} .steppanel p{font-size:1.2rem; line-height:1.5; animation:swap .38s var(--ease)} @keyframes swap{from{opacity:0; transform:translateY(8px)}} @media (max-width:820px){ .steptabs{grid-template-columns:1fr 1fr} } /* --- answers --- */ .answers{display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line)} .answers > div{display:flex; gap:.9rem; padding:1.7rem 2rem; border-bottom:1px solid var(--line); font-size:1.1rem; line-height:1.5; transition:background .3s ease} .answers > div:hover{background:var(--faint)} .answers > div:nth-child(even){border-left:1px solid var(--line)} .answers .ic{font-size:1.2rem; color:var(--muted); flex:none; margin-top:.2em; transition:transform .35s var(--ease), color .2s ease} .answers > div:hover .ic{transform:rotate(-8deg) scale(1.15); color:var(--fg)} @media (max-width:760px){ .answers{grid-template-columns:1fr} .answers > div{padding:1.4rem 0} .answers > div:nth-child(even){border-left:0} } /* --- bauen: karten --- */ .tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:2.4rem} .tile{position:relative; background:var(--bg); padding:1.9rem 1.6rem; cursor:pointer; text-align:left; border:0; display:flex; flex-direction:column; gap:.85rem; transition:background .25s ease} .tile::before{content:''; position:absolute; left:0; right:0; top:0; height:2px; background:var(--acc); transform:scaleX(0); transform-origin:left; transition:transform .42s var(--ease)} .tile:hover::before, .tile.open::before{transform:scaleX(1)} .tile:hover{background:var(--faint)} .tile .head{display:flex; align-items:center; justify-content:space-between; color:var(--muted)} .tile .head .ic{font-size:1.45rem; transition:transform .4s var(--ease)} .tile:hover .head .ic:first-child{transform:scale(1.18)} .tile h3{font-family:var(--mono); font-size:1.1rem; font-weight:400} .tile p{margin:0; font-size:1.04rem; color:var(--muted); line-height:1.5} /* Der Anriss bekommt die Höhe von zwei Zeilen, auch wenn er nur eine braucht. Dadurch sitzt die Trennlinie darunter in jeder Karte gleich hoch. */ .tile .k{min-height:3em} .tile .more{display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s var(--ease)} .tile.open .more{grid-template-rows:1fr} .tile .more > div{overflow:hidden} .tile .more p{padding-top:.9rem; color:var(--fg); border-top:1px solid var(--line); margin-top:.3rem} .tile .plus{transition:transform .35s var(--ease)} .tile.open .plus{transform:rotate(180deg)} @media (max-width:980px){ .tiles{grid-template-columns:1fr 1fr} } @media (max-width:660px){ .tiles{grid-template-columns:1fr} } /* --- team --- */ .people{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); margin-top:2.4rem} /* Beidseitig gleicher Abstand: nur so sind alle Spalten gleich breit, alle Fotos gleich gross und die linke Karte klebt nicht am Rand. */ .person{border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:1.8rem 1.6rem; transition:background .3s ease} .person:hover{background:var(--faint)} /* Rahmen bleibt stehen, nur unsichtbar: sonst wäre die letzte Spalte um die Rahmenbreite breiter und ihr Foto einen Tick grösser. */ .person:last-child{border-right-color:transparent} .person .shot{position:relative; aspect-ratio:4/5; border:1px solid var(--line); display:grid; place-items:center; margin-bottom:1.5rem; overflow:hidden; background-image:radial-gradient(var(--line) 1px, transparent 1.1px); background-size:7px 7px; } .person .shot span{font-family:var(--mono); font-size:1.5rem; color:var(--muted)} .person .shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04)} .person h3{font-size:1.32rem; margin-bottom:.4rem} .person .role{font-family:var(--mono); font-size:.82rem; color:var(--muted); display:block; margin-bottom:1.1rem} .person p{font-size:1.06rem; line-height:1.55; margin:0 0 1.2rem} .person .tags{display:flex; flex-wrap:wrap; gap:.4rem} .person .tags span{font-family:var(--mono); font-size:.74rem; color:var(--muted); border:1px solid var(--line); padding:.24rem .5rem} @media (max-width:1000px){ .people{grid-template-columns:1fr 1fr} .person{padding:1.5rem 1.2rem} .person:nth-child(even){border-right-color:transparent} } @media (max-width:620px){ .people{grid-template-columns:1fr} .person{border-right:0; padding:1.5rem 0 !important} } /* --- kontakt --- */ .contact-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:3rem; margin-top:2.6rem; align-items:start} @media (max-width:820px){ .contact-grid{grid-template-columns:1fr; gap:2rem} } .maillink{display:inline-flex; align-items:center; gap:.7rem; font-family:var(--mono); font-size:clamp(1.05rem,2.4vw,1.7rem); text-decoration:none; letter-spacing:-0.02em; position:relative; padding-bottom:.25rem} .maillink::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--acc); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)} .maillink:hover::after{transform:scaleX(1)} .copybtn{margin-left:.6rem} .addr{font-family:var(--mono); font-size:.85rem; color:var(--muted); line-height:1.9} .addr .row{display:flex; gap:.6rem; align-items:flex-start; margin-bottom:1rem} .addr .ic{font-size:1.05rem; margin-top:.35em} footer{border-top:1px solid var(--line); padding:2.6rem 0 3.2rem} .foot-grid{display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-end} footer .w{fill:currentColor; display:block; margin-bottom:1rem} footer .links{display:flex; flex-wrap:wrap; gap:1.3rem; font-family:var(--mono); font-size:.76rem} footer .links a{color:var(--muted); text-decoration:none; transition:color .2s ease} footer .links a:hover{color:var(--fg)} .legal{font-family:var(--mono); font-size:.7rem; color:var(--muted); margin-top:1.8rem; line-height:1.8} /* --- trichter: aus vielem wird eins --- */ .funnelwrap{margin-top:clamp(2.6rem,6vh,4.2rem); max-width:72rem} .funnel{display:block; width:100%; height:auto; overflow:visible} .funnel .cable{fill:none; stroke:var(--muted); stroke-width:2; transition:stroke .25s ease} .funnel .draw{stroke-dasharray:1; stroke-dashoffset:1} .funnelwrap.in .draw{stroke-dashoffset:0; transition:stroke-dashoffset 1.3s var(--ease) .15s} .funnel .pulse{fill:none; stroke:var(--acc); stroke-width:3.5; stroke-dasharray:.07 .93; stroke-dashoffset:1; opacity:0} .funnelwrap.in .pulse{opacity:1; animation:travel 3.2s linear infinite} .funnelwrap.in .g1 .pulse{animation-delay:.3s} .funnelwrap.in .g2 .pulse{animation-delay:.9s} .funnelwrap.in .g3 .pulse{animation-delay:1.5s} .funnelwrap.in .g4 .pulse{animation-delay:2.1s; animation-duration:3.8s} .funnel .flabel, .funnel .node{opacity:0} .funnelwrap.in .flabel, .funnelwrap.in .node{animation:fin .5s ease forwards} .funnelwrap.in .g1 .flabel, .funnelwrap.in .g1 .node{animation-delay:.1s} .funnelwrap.in .g2 .flabel, .funnelwrap.in .g2 .node{animation-delay:.28s} .funnelwrap.in .g3 .flabel, .funnelwrap.in .g3 .node{animation-delay:.46s} .funnelwrap.in .g4 .flabel, .funnelwrap.in .g4 .node{animation-delay:2s} @keyframes fin{to{opacity:1}} .funnel .mark{opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.55)} .funnelwrap.in .mark{animation:markin .55s var(--ease) 1.25s forwards} @keyframes markin{to{opacity:1; transform:scale(1)}} .funnelwrap.in .g4 .draw{transition-delay:1.7s} @keyframes travel{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} .funnel .flabel{font-family:var(--mono); font-size:24px; fill:var(--muted); transition:fill .25s ease} .funnel .node{fill:var(--bg); stroke:var(--muted); stroke-width:2; transition:stroke .25s ease, fill .25s ease} .funnel .hit{fill:transparent; cursor:pointer} .funnel .grp.hot .flabel{fill:var(--fg)} .funnel .grp.hot .cable{stroke:var(--fg)} .funnel .grp.hot .node{stroke:var(--fg); fill:var(--fg)} .funnel .mark{fill:var(--fg)} .funnelnote{margin-top:1.4rem; font-family:var(--mono); font-size:.82rem; color:var(--muted); min-height:2.8em; max-width:42em} @media (max-width:900px){ .funnel .flabel{font-size:34px} .funnel .cable{stroke-width:3} .funnel .pulse{stroke-width:5} .funnel .node{stroke-width:3} } /* --- rechtsseiten (impressum, datenschutz) und 404 --- */ .prose{max-width:44rem; margin-top:2.4rem} .prose h2{font-size:clamp(1.3rem,2.6vw,1.8rem); margin:2.6rem 0 .9rem} .prose h3{margin:1.8rem 0 .6rem} .prose p{margin:0 0 1rem} .prose ul{margin:0 0 1rem; padding-left:1.3rem} .prose li{margin-bottom:.4rem} .prose a{color:var(--acc-text)} .prose address{font-style:normal; font-family:var(--mono); font-size:.88rem; line-height:1.9; color:var(--muted)} .prose .widgetnote{font-family:var(--mono); font-size:.78rem; color:var(--muted)} /* Die Rechtstexte kommen von privacybee und werden nachgeladen. Das Element hält von Anfang an Platz frei, damit der Fuss beim Eintreffen nicht nach oben und unten springt. Der Wert steht pro Seite im Markup und liegt deutlich UNTER der tatsächlichen Texthöhe — dadurch ist er am fertigen Bild nie zu sehen. (Eine Reserve nur für :empty half nicht: das Widget setzt zuerst einen leeren Ladezustand, die Reserve klappte dann zusammen.) */ imprint-widget, privacybee-widget{ display:block; min-height:var(--reserve, 380px); } /* Der Baustein bringt seinen eigenen Grauton mit (#6b7280). Auf unserem schwarzen Grund erreicht der nur 4.34:1 und fällt damit unter die Lesbarkeitsgrenze. Wir setzen unseren eigenen Grauton ein, der in beiden Darstellungen über 5:1 liegt. */ .prose .prx_text, .prose .prx_h4, .prose .prx_listElement{ color:var(--muted); } /* Die aufklappbaren Karten bringen einen eigenen hellen Grund mit. Unser Grauton wäre darauf zu blass, ihrer auf unserem dunklen Grund zu dunkel. #757575 liegt auf beidem über 4.5:1 (4.54 auf Weiss, 4.63 auf Schwarz). */ .prose .prx_expandableName, .prose .prx_expandableRight, .prose .prx_expandableRightText, .prose .prx_expandableDescription{ color:#757575; } .backlink{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.8rem; color:var(--muted); text-decoration:none; margin-bottom:2rem} .backlink:hover{color:var(--fg)} .backlink .ic{transition:transform .3s var(--ease)} .backlink:hover .ic{transform:translateX(-3px)} .notfound{display:flex; align-items:center; min-height:min(70vh,620px)} .notfound .code{font-family:var(--mono); font-size:clamp(4rem,14vw,9rem); line-height:1; color:var(--acc-text); letter-spacing:-0.04em} /* ========================================================== eingabefelder auf touch-geräten iOS zoomt beim Antippen in ein Feld, dessen Schrift kleiner als 16px ist, und die Seite springt. Deshalb dort mindestens 16px. Die Regel hängt am Zeiger und nicht an der Breite: quer ist ein Telefon über 800px breit und eine Breitenregel würde es verfehlen. ========================================================== */ @media (hover: none) and (pointer: coarse){ /* max() hebt nur an, was zu klein ist — grössere Felder bleiben, wie sie sind */ .term textarea{ font-size:max(16px, .92rem); } .palette input{ font-size:max(16px, .95rem); } } [data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease), transform .55s var(--ease)} [data-reveal].in{opacity:1; transform:none} [data-stagger] > *{opacity:0; transform:translateY(14px)} [data-stagger].in > *{animation:rowin .5s var(--ease) forwards} @media (prefers-reduced-motion: reduce){ /* Auch die Verzögerungen weg — sonst wartet man trotz abgeschalteter Bewegung sekundenlang darauf, dass Text erscheint. */ *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; animation-delay:0s !important; transition-delay:0s !important} .rise i{transform:none} [data-reveal]{opacity:1; transform:none} [data-stagger] > *{opacity:1; transform:none} } /* Ohne JavaScript sind alle vier Prozesstexte zu sehen statt nur der aktive. */ .no-js .steppanel .steptext{display:block} /* --- kunden: liste und präsentation ------------------------------------- Weil im Container ein eigenes