/* ZERO Design — erzeugt von infrastructure/scripts/design/bauen.py aus dem Staging. Nicht von Hand ändern. */ @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(schrift/ibm-plex-mono-400.woff2) format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(schrift/ibm-plex-mono-600.woff2) format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(schrift/ibm-plex-sans-400.woff2) format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(schrift/ibm-plex-sans-500.woff2) format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(schrift/ibm-plex-sans-600.woff2) format('woff2')} @font-face{font-family:'Archivo Expanded';font-style:normal;font-weight:700;font-display:swap;src:url(schrift/archivo-expanded-700.woff2) format('woff2')} @font-face{font-family:'Archivo Expanded';font-style:normal;font-weight:800;font-display:swap;src:url(schrift/archivo-expanded-800.woff2) format('woff2')} :root{--zxf:1} :root[data-spd="fast"]{--zxf:.62} :root[data-spd="slow"]{--zxf:1.35} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}} #katalog{scroll-margin-top:var(--stick,86px)} :root{ --ground:#050807; --panel:#0B100E; --panel2:#0e1512; --ink:#E9EFEC; --dim:#6F7C77; --dim2:#8fa39a; --phos:#2BF598; --contour:#123227; --contour-mid:#1c5237; --gold:#e8c766; --exp:'Archivo Expanded',system-ui,sans-serif; --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; } *{box-sizing:border-box;margin:0;padding:0} body{background:var(--ground);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased} a{text-decoration:none;color:inherit} img{max-width:100%} .wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px)} /* topbar */ .topbar{border-bottom:1px solid var(--contour);font-family:var(--mono);font-size:.72rem;color:var(--dim)} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;flex-wrap:wrap;gap:6px} .pay{display:flex;gap:10px;align-items:center}.pay b{color:var(--ink);font-weight:500}.pay .off{opacity:.6}.pay .dot{color:var(--phos)} .lang b{color:var(--ink)}.lang .sep{opacity:.4;padding:0 6px} /* nav */ .nav{border-bottom:1px solid var(--contour);position:sticky;top:0;background:rgba(5,8,7,.86);backdrop-filter:blur(8px);z-index:40} .nav .wrap{display:flex;align-items:center;height:66px;gap:28px} .logo{font-family:var(--exp);font-weight:800;font-size:1.1rem;letter-spacing:.14em;color:var(--ink)} .logo .t{font-family:var(--mono);font-weight:400;font-size:.8rem;color:var(--dim);letter-spacing:.04em;margin-left:8px} .logo b{color:var(--phos)} .logo .lr,.logo .lo{color:var(--ink);transition:color .2s} :root[data-logoc="r"] .logo .lr{color:var(--phos)} :root[data-logoc="o"] .logo .lo{color:var(--phos)} /* geschlitzte Null im Schriftzug — Maße aus der Schrift gemessen */ .logo .lo.zn{display:inline-block;height:.7102em;width:.9034em; vertical-align:-.0425em;margin:0 .0537em;line-height:0} .logo .lo.zn svg{display:block;width:100%;height:100%;overflow:visible} .logo .lo.zn svg text{font-family:'Archivo Expanded','IBM Plex Sans',system-ui,sans-serif; font-weight:800;font-size:140.8px;letter-spacing:0} .menu{display:flex;gap:22px;font-size:.9rem;color:var(--dim2);margin-left:8px} .menu a:hover{color:var(--phos)}.menu a.on{color:var(--ink)} .cart{margin-left:auto;font-family:var(--mono);font-size:.82rem;border:1px solid var(--contour-mid);border-radius:3px;padding:9px 16px;color:var(--ink)} .cart:hover{border-color:var(--phos);color:var(--phos)} .burger{display:none;margin-left:auto;gap:14px;align-items:center;cursor:pointer} .burger .ic{width:22px;height:2px;background:var(--ink);position:relative} .burger .ic::before,.burger .ic::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink)} .burger .ic::before{top:-6px}.burger .ic::after{top:6px} .mobmenu{display:none;position:fixed;inset:0;z-index:110;background:rgba(3,6,4,.97);backdrop-filter:blur(6px);flex-direction:column;padding:80px 30px 40px;gap:2px} .mobmenu.open{display:flex} .mobmenu a{font-family:var(--exp);font-weight:700;font-size:1.4rem;color:var(--ink);padding:13px 0;border-bottom:1px solid var(--contour)} .mobmenu a:hover{color:var(--phos)} .mobmenu .x{position:absolute;top:22px;right:26px;font-family:var(--mono);font-size:1.6rem;color:var(--phos);cursor:pointer} /* buttons */ .btn{font-family:var(--mono);font-weight:600;font-size:.9rem;padding:13px 24px;border-radius:2px;display:inline-block;transition:all .18s;cursor:pointer;border:0} .btn-go{color:#04140c;background:var(--phos);border:1px solid var(--phos);box-shadow:0 0 26px rgba(43,245,152,.18)} .btn-go:hover{transform:translateY(-1px);box-shadow:0 0 34px rgba(43,245,152,.34)} .btn-ghost{color:var(--ink);background:transparent;border:1px solid var(--contour-mid)} .btn-ghost:hover{border-color:var(--phos);color:var(--phos)} .txtlink{font-family:var(--mono);font-size:.82rem;color:var(--dim2);text-decoration:underline;text-underline-offset:3px} .txtlink:hover{color:var(--phos)} /* hero */ .hero{position:relative;min-height:clamp(540px,72vh,700px);display:flex;align-items:center;overflow:hidden} .hero .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center; gap:clamp(24px,3vw,44px);width:100%} .hero .bloom{position:absolute;left:64%;top:48%;width:min(52vw,640px);height:min(52vw,640px);transform:translate(-50%,-50%); background:radial-gradient(closest-side,rgba(43,245,152,.15),rgba(43,245,152,.04) 44%,transparent 72%);filter:blur(46px);pointer-events:none} .copy{padding:0;z-index:3;max-width:600px} .sig{font-family:var(--mono);font-size:.84rem;color:var(--phos);letter-spacing:.02em;margin-bottom:20px} .sig .d{color:var(--dim)} h1{font-family:var(--exp);font-weight:800;line-height:1.0;letter-spacing:-.01em;font-size:clamp(2.2rem,4.6vw,3.9rem);text-wrap:balance} .sub{color:var(--dim2);font-size:clamp(.95rem,1.3vw,1.08rem);line-height:1.55;margin-top:20px;max-width:42ch} .actions{margin-top:32px;display:flex;gap:18px;flex-wrap:wrap;align-items:center} .stage{position:relative;display:flex;align-items:center;justify-content:center;z-index:2;padding:26px 0} .phone{position:relative;width:min(27vw,300px);filter:drop-shadow(0 40px 80px rgba(0,0,0,.6))} .phone svg{display:block;width:100%;height:auto} .termbox{z-index:3;position:absolute;left:14%;top:17%;width:72%;font-family:var(--mono);font-size:clamp(.56rem,.85vw,.74rem); color:var(--phos);letter-spacing:.02em;text-shadow:0 0 4px #04150c,0 0 9px #04150c,0 0 16px #04150c;line-height:1.9;background:linear-gradient(rgba(4,21,12,.72),rgba(4,21,12,.72));padding:9px 11px;border-radius:5px} .termbox .p{color:var(--ink)}.termbox .k{color:var(--dim2)}.termbox .v{color:var(--phos)} .termbox .cur{display:inline-block;width:.5ch;background:var(--phos);color:transparent;animation:blink 1.2s step-end infinite} @keyframes blink{50%{opacity:0}} .hero .corner{position:absolute;top:20px;right:24px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase} /* catalog */ .catalog{padding:44px 0 30px;border-top:1px solid var(--contour)} .kh{font-family:var(--exp);font-weight:800;color:var(--phos);font-size:1.4rem;letter-spacing:.02em} .kh::before{content:"// "} .tabs{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 8px;align-items:center} .tab{font-family:var(--mono);font-size:.8rem;padding:9px 15px;border:1px solid var(--contour);border-radius:5px;color:var(--dim2)} .tab:hover{border-color:var(--contour-mid);color:var(--ink)} .tab.on{color:#04140c;background:var(--phos);border-color:var(--phos);font-weight:600} .tab-onion{margin-left:auto;color:var(--dim);border-style:dashed} .tab i.wide{font-style:normal} .tabs .brk{display:none} /* erzwungener Zeilenumbruch, nur auf dem Handy */ /* Handy: zwei saubere Reihen zu je drei Knoepfen statt Flatterrand */ @media(max-width:640px){ .tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 8px} .tab{font-size:.72rem;padding:9px 4px;text-align:center;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .tab i.wide{display:none} /* "Codes & Voucher" -> "Codes" */ .tab-onion{margin-left:0} } .hint{font-family:var(--mono);font-size:.76rem;color:var(--dim);margin:18px 0 22px} /* featured — richer, home-like */ .feat{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:0;border:1px solid var(--contour-mid);border-radius:10px;overflow:hidden;margin-bottom:22px;background:var(--panel)} .feat .vis{position:relative;background:radial-gradient(120% 100% at 35% 15%,#0e1a13,#040806);display:flex;align-items:center;justify-content:center;padding:40px;border-right:1px solid var(--contour);overflow:hidden} .feat .glow{position:absolute;left:50%;top:50%;width:200px;height:200px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(43,245,152,.16),transparent 70%);filter:blur(24px);z-index:1} .feat .zphone{width:150px;filter:drop-shadow(0 22px 46px rgba(0,0,0,.65));z-index:2} /* phone with matrix rain ON the display */ .zphone{position:relative;display:block} .zphone svg.body{display:block;width:100%;height:auto} .scr{position:absolute;left:7.8%;top:3.7%;width:84.4%;height:92.6%;border-radius:8% / 4%;overflow:hidden;z-index:1;background:#04150c} .scr canvas{width:100%;height:100%;display:block;opacity:.62} .zmark{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none} .zmark svg{width:42%;height:auto;filter:drop-shadow(0 0 10px rgba(0,255,65,.55))} .phone .zphone{width:100%} .feat .info{padding:30px 32px;display:flex;flex-direction:column;gap:10px;justify-content:center} .feat .avail{font-family:var(--mono);font-size:.74rem;color:var(--dim);display:flex;align-items:center;gap:8px} .feat .avail .g{color:var(--phos)} .feat .fname{font-family:var(--exp);font-weight:800;font-size:1.9rem;color:var(--ink);line-height:1} .feat .fdesc{color:var(--dim2);font-size:.92rem;max-width:44ch;line-height:1.55} .feat .price{font-family:var(--exp);font-weight:800;font-size:1.5rem;color:var(--gold);margin-top:4px} .feat .price small{font-family:var(--mono);font-weight:400;font-size:.72rem;color:var(--dim);letter-spacing:.04em} .feat .fcta{align-self:flex-start;margin-top:10px} .feat .badge{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:var(--gold);border:1px solid #5a4d22;background:rgba(90,77,34,.14);padding:4px 9px;border-radius:4px;z-index:3} /* grid */ .subhead{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;margin:30px 0 14px;display:flex;align-items:center;gap:12px} .subhead::before{content:"//";color:var(--phos)} .subhead .ln{flex:1;height:1px;background:var(--contour)} .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .card{border:1px solid var(--contour);border-radius:9px;background:var(--panel);padding:18px;display:flex;flex-direction:column;gap:6px;transition:.18s;position:relative;min-height:190px} .card:hover{border-color:var(--phos);transform:translateY(-2px)} .card .cat{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;color:var(--dim);text-transform:uppercase} .card .pn{position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:.62rem;color:var(--dim);opacity:.7} .card .icon{height:60px;display:flex;align-items:center;justify-content:center;margin:8px 0} .card .icon svg{stroke:var(--phos);opacity:.85;fill:none} .card .cn{font-family:var(--sans);font-weight:600;font-size:1rem;color:var(--ink);margin-top:auto} .card .cp{font-family:var(--mono);font-size:.9rem;color:var(--gold);display:flex;justify-content:space-between;align-items:center} .card .cp .ar{color:var(--dim)}.card:hover .cp .ar{color:var(--phos)} /* generic page header (wizard/product/cart) */ .page{padding:40px 0 60px;min-height:70vh} .crumb{font-family:var(--mono);font-size:.74rem;color:var(--dim);margin-bottom:10px;max-width:896px} .crumb a:hover{color:var(--phos)}.crumb .s{opacity:.5;padding:0 6px} .ptitle{font-family:var(--exp);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-.01em} .psub{color:var(--dim2);font-size:.95rem;margin-top:8px;max-width:60ch} /* wizard steps */ .steps{display:flex;gap:8px;margin:24px 0 26px;flex-wrap:wrap} .step{font-family:var(--mono);font-size:.72rem;color:var(--dim);border:1px solid var(--contour);border-radius:5px;padding:8px 13px} .step.on{color:#04140c;background:var(--phos);border-color:var(--phos);font-weight:600} .step.done{color:var(--phos);border-color:var(--contour-mid)} .models2{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px} .mcard{border:1px solid var(--contour);border-radius:10px;background:var(--panel);padding:22px 20px;cursor:pointer;transition:.16s;position:relative;display:flex;flex-direction:column;gap:10px} .mcard:hover{border-color:var(--contour-mid)} .mcard.on{border-color:var(--phos);background:rgba(43,245,152,.05);box-shadow:0 0 30px rgba(43,245,152,.08)} .mcard .rd{position:absolute;top:18px;right:18px;width:16px;height:16px;border-radius:50%;border:1px solid var(--contour-mid)} .mcard.on .rd{border-color:var(--phos);background:var(--phos);box-shadow:0 0 8px rgba(43,245,152,.6)} .mcard .mph{width:60px;height:96px;border:2px solid var(--contour-mid);border-radius:12px;position:relative} .mcard.on .mph{border-color:var(--phos)} .mcard .mph::before{content:"";position:absolute;left:50%;top:9px;width:16px;height:3px;background:var(--contour-mid);border-radius:2px;transform:translateX(-50%)} .mcard .mn{font-family:var(--exp);font-weight:800;font-size:1.15rem;color:var(--ink)} .mcard .mspec{font-family:var(--mono);font-size:.74rem;color:var(--dim2);line-height:1.7} .mcard .mspec .v{color:var(--phos)} .mcard .mp{font-family:var(--exp);font-weight:800;color:var(--gold);font-size:1.2rem;margin-top:auto} .wact{display:flex;gap:14px;align-items:center;margin-top:30px;flex-wrap:wrap} .wsum{font-family:var(--mono);font-size:.82rem;color:var(--dim2);margin-left:auto} .wsum b{color:var(--gold)} /* product */ .pdp{display:grid;grid-template-columns:0.42fr 1fr;gap:30px;margin-top:24px;align-items:start; max-width:896px} /* 30% schmaler als der 1280er-Container */ .pdp .pvis{border:1px solid var(--contour);border-radius:12px;background:radial-gradient(120% 100% at 40% 20%,#0e1a13,#040806);min-height:150px;max-height:180px;display:flex;align-items:center;justify-content:center;padding:20px} .pdp .pvis svg{max-width:48px;max-height:76px;width:auto;height:auto} .pdp .pvis svg{stroke:var(--phos);fill:none;opacity:.9} .pdp .pcat{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--dim);text-transform:uppercase} .pdp .pn2{font-family:var(--exp);font-weight:800;font-size:2rem;margin:6px 0} .pdp .pprice{font-family:var(--exp);font-weight:800;color:var(--gold);font-size:1.6rem;margin:10px 0} .pdp .pdesc{color:var(--dim2);line-height:1.6;font-size:.95rem;margin-bottom:20px} .pdp ul{list-style:none;margin:14px 0 22px;font-size:.88rem;color:var(--ink)} .pdp li{padding:5px 0;font-family:var(--mono);font-size:.82rem;color:var(--dim2)} .pdp li::before{content:"› ";color:var(--phos)} /* cart */ .cart-tbl{border:1px solid var(--contour);border-radius:12px;overflow:hidden;margin-top:20px} .cart-row{display:flex;align-items:center;gap:16px;padding:18px 20px;border-bottom:1px solid var(--contour)} .cart-row:last-child{border-bottom:0} .cart-row .ci{width:44px;height:44px;border:1px solid var(--contour-mid);border-radius:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto} .cart-row .ci svg{stroke:var(--phos);fill:none} .cart-row .cinfo{flex:1} .cart-row .cn2{font-weight:600;color:var(--ink)} .cart-row .cmeta{font-family:var(--mono);font-size:.74rem;color:var(--dim)} .cart-row .cprice{font-family:var(--mono);color:var(--gold)} .cart-foot{display:flex;justify-content:space-between;align-items:center;padding:20px;flex-wrap:wrap;gap:14px} .cart-total{font-family:var(--exp);font-weight:800;font-size:1.3rem} .cart-total .g{color:var(--gold)} .paynote{font-family:var(--mono);font-size:.74rem;color:var(--dim);margin-top:16px} .paynote b{color:var(--phos)} /* footer */ .foot{border-top:1px solid var(--contour);margin-top:44px;padding:34px 0 26px;color:var(--dim)} .foot .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px} .foot .b{font-family:var(--exp);font-weight:800;letter-spacing:.14em;color:var(--ink);font-size:.95rem} .foot p{font-size:.82rem;color:var(--dim);margin-top:8px;max-width:24ch} .foot h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:10px} .foot ul{list-style:none;font-size:.85rem;line-height:1.9} .foot a:hover{color:var(--phos)} .foot .bottom{border-top:1px dashed var(--contour);margin-top:24px;padding-top:14px;font-family:var(--mono);font-size:.7rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px} /* responsive */ @media(max-width:900px){ .menu,.cart{display:none}.burger{display:flex} .hero{min-height:auto;padding-top:6px} .hero .hero-grid{grid-template-columns:1fr;gap:0} .copy{order:1;padding:6vh 0 2vh}.stage{order:2;padding:0 0 22px;justify-content:center} .phone{width:min(58vw,260px)} .feat{grid-template-columns:1fr}.feat .vis{border-right:0;border-bottom:1px solid var(--contour)} .grid{grid-template-columns:1fr 1fr;gap:12px} .models2{grid-template-columns:1fr} .pdp{grid-template-columns:1fr;gap:20px} .foot .wrap{grid-template-columns:1fr 1fr} } @media(max-width:560px){ .grid{grid-template-columns:1fr} .foot .wrap{grid-template-columns:1fr} .topbar .wrap{height:auto;padding:6px 0} .wsum{margin-left:0;width:100%} } /* --- Display-Text "trust no one" --- */ .scrtext{position:absolute;z-index:3;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center; font-family:var(--mono);font-size:clamp(.95rem,1.5vw,1.3rem);letter-spacing:.16em;line-height:1.5; color:var(--phos);text-transform:lowercase; text-shadow:0 0 5px #04150c,0 0 11px #04150c,0 0 20px #04150c,0 0 9px rgba(0,255,65,.35)} /* --- Logo: Original aus Production vs. Text-Variante --- */ .zlogo{display:block;width:92px} .zlogo svg{display:block;width:100%;height:auto} .zl-cell{font-family:ui-monospace,"JetBrains Mono","Fira Code",monospace;font-size:12px;font-weight:700; fill:var(--phos);text-anchor:middle;opacity:.85;transition:opacity .12s linear,fill .12s linear} .zl-cell[data-zl-locked="1"]{opacity:1} a.logo .logo-prod .t{font-family:var(--mono);font-weight:400;font-size:.8rem;color:var(--dim);letter-spacing:.04em} .zl-cell{font-size:13px} @media(max-width:900px){.zlogo{width:80px}} /* ===== Header-Varianten ===== */ :root[data-hdr="slim"] .nav .wrap,:root[data-hdr="hide"] .nav .wrap{height:42px} :root[data-hdr="slim"] .topbar .wrap,:root[data-hdr="hide"] .topbar .wrap{height:27px;font-size:.64rem} :root[data-hdr="slim"] .logo,:root[data-hdr="hide"] .logo{font-size:.92rem} :root[data-hdr="slim"] .zlogo,:root[data-hdr="hide"] .zlogo{width:74px} :root[data-hdr="slim"] .menu,:root[data-hdr="hide"] .menu{font-size:.82rem;gap:17px} :root[data-hdr="slim"] .cart,:root[data-hdr="hide"] .cart{padding:6px 12px;font-size:.74rem} :root[data-hdr="static"] .nav{position:static} :root[data-hdr="hide"] .nav{transition:transform .26s ease} :root[data-hdr="hide"].nav-away .nav{transform:translateY(-100%)} /* ===== Hero-Größen ===== */ :root[data-hero="m"] .hero{min-height:clamp(400px,52vh,500px)} :root[data-hero="m"] .phone{width:min(21vw,225px)} :root[data-hero="m"] h1{font-size:clamp(2rem,3.9vw,3.1rem)} :root[data-hero="m"] .actions{margin-top:24px} :root[data-hero="s"] .hero{min-height:clamp(320px,40vh,400px)} :root[data-hero="s"] .phone{width:min(16vw,175px)} :root[data-hero="s"] h1{font-size:clamp(1.8rem,3.2vw,2.5rem)} :root[data-hero="s"] .sub{font-size:.92rem;margin-top:14px;max-width:46ch} :root[data-hero="s"] .sig{margin-bottom:13px;font-size:.78rem} :root[data-hero="s"] .actions{margin-top:20px} :root[data-hero="s"] .stage{padding:16px 0} @media(max-width:900px){ :root[data-hero="m"] .phone{width:min(50vw,210px)} :root[data-hero="s"] .phone{width:min(42vw,175px)} } /* ===== Katalog: Phone-Hero einklappen ===== */ .feat{overflow:hidden;transform-origin:top center; transition:max-height calc(.68s * var(--zxf)) cubic-bezier(.65,0,.35,1), opacity calc(.4s * var(--zxf)) ease .06s, margin-bottom calc(.6s * var(--zxf)) cubic-bezier(.65,0,.35,1), transform .55s cubic-bezier(.65,0,.35,1), filter .35s ease, clip-path .45s ease; max-height:1200px} .feat.is-collapsed{max-height:0;opacity:0;margin-bottom:0;border-width:0;padding:0;visibility:hidden} /* alles außer der Null tritt zurück */ .feat.fx-fade .info,.feat.fx-fade .badge{transition:opacity .5s ease,filter .5s ease} .feat.fx-fade .vis{transition:background .6s ease} .feat.fx-fade .scr,.feat.fx-fade .zphone svg.body{transition:opacity .55s ease;opacity:0} /* B · Sog — die Null behält ihre Größe */ .feat.fx-suck .info,.feat.fx-suck .badge{transition:transform calc(.42s * var(--zxf)) cubic-bezier(.65,0,.35,1),opacity calc(.34s * var(--zxf)) ease,filter calc(.34s * var(--zxf)) ease; transform:translateX(-40px) scale(.94);opacity:0;filter:blur(3px)} .feat.fx-suck .scr,.feat.fx-suck .zphone svg.body{transition:opacity calc(.4s * var(--zxf)) ease;opacity:0} .feat.fx-suck .vis{transition:background calc(.5s * var(--zxf)) ease} .feat.fx-suck .glow{transition:opacity calc(.4s * var(--zxf)) ease;opacity:0} .feat.fx-suck .zmark svg{transition:filter .4s ease;filter:drop-shadow(0 0 26px rgba(0,255,65,.9)) brightness(1.7)} /* C · Bildröhre */ .feat.fx-crt{transition:clip-path .42s cubic-bezier(.7,0,.3,1),filter .42s ease} .feat.fx-crt{clip-path:inset(46% 0 46% 0);filter:brightness(2.2) contrast(1.4)} .feat.fx-crt .zmark{transition:transform .42s ease;transform:scale(1)} /* E · Entropie */ .feat.fx-dim{transition:filter .8s ease} .feat.fx-dim{filter:brightness(.55) saturate(.4)} .feat.fx-dim .zmark{filter:none} @media (prefers-reduced-motion: reduce){ .feat{transition:none} } /* ===== Hero -> Katalog: Übergang ===== */ :root[data-cut="fade"] .catalog,:root[data-cut="scroll"] .catalog{border-top:0} :root[data-cut="fade"] .hero::after,:root[data-cut="scroll"] .hero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:130px;pointer-events:none;z-index:4; background:linear-gradient(to bottom,transparent,var(--ground))} :root[data-cut="scroll"] .hero{min-height:clamp(520px,84vh,840px)} :root[data-cut="scroll"] .catalog{padding-top:70px} @keyframes cue{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(6px);opacity:1}} :root[data-cut="scroll"] .scrollcue{display:block} /* ===== Produktseite: Bild-Layouts ===== */ /* B · groß und über die Schrift gelegt (Desktop) */ :root[data-pdp="b"] .pdp{grid-template-columns:minmax(0,1fr) minmax(190px,330px); align-items:center;gap:0;max-width:1060px;position:relative} :root[data-pdp="b"] .pdp .pvis{order:2;position:relative;margin-left:clamp(-90px,-6vw,-40px); border:0;background:none;padding:0;min-height:0;max-height:none;justify-content:flex-end;z-index:4;pointer-events:none} :root[data-pdp="b"] .pdp .pvis>span{display:block;width:100%} :root[data-pdp="c"] .pdp .pvis>span{display:block} :root[data-pdp="b"] .pdp .pvis svg{width:100% !important;height:auto !important;max-width:330px;max-height:none; stroke-width:1;filter:drop-shadow(0 26px 60px rgba(0,0,0,.85)) drop-shadow(0 0 30px rgba(0,255,65,.20))} :root[data-pdp="b"] .pdp>div:last-child{order:1;position:relative;z-index:2;padding-right:0} :root[data-pdp="b"] .pdp .pn2{font-size:clamp(1.8rem,3.2vw,2.6rem);max-width:15ch} :root[data-pdp="b"] .pdp .pdesc{max-width:46ch} /* C · groß, oben über die volle Breite */ :root[data-pdp="c"] .pdp{grid-template-columns:1fr;max-width:820px} :root[data-pdp="c"] .pdp .pvis{min-height:260px;max-height:320px;margin-bottom:6px} :root[data-pdp="c"] .pdp .pvis svg{width:190px !important;height:auto !important;max-width:none;max-height:none} @media(max-width:900px){ :root[data-pdp="b"] .pdp{grid-template-columns:1fr} :root[data-pdp="b"] .pdp .pvis{order:1;margin-left:0;justify-content:center;margin-bottom:12px} :root[data-pdp="b"] .pdp .pvis svg{max-width:150px} :root[data-pdp="b"] .pdp>div:last-child{order:2} } /* ===== Hero: wo steht das Telefon ===== */ /* Nur am Schreibtisch. Eine Media Query erhoeht die Spezifitaet NICHT -- ohne diese Klammer schlagen die Regeln den Einspalter auf dem Handy. */ @media(min-width:901px){ :root[data-ph="left"] .hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:clamp(12px,1.4vw,22px)} :root[data-ph="left"] .stage{justify-content:flex-start} :root[data-ph="mid"] .hero .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,3vw,44px)} :root[data-ph="mid"] .stage{justify-content:center} :root[data-ph="right"] .hero .hero-grid{grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,72px)} :root[data-ph="right"] .stage{justify-content:flex-end} } /* ===== Übergang Hero -> Katalog ===== */ /* gap: keine Linie, großzügiger Abstand */ :root[data-cut="gap"] .catalog{border-top:0;padding-top:96px} :root[data-cut="gap"] .hero{padding-bottom:54px} /* button: weicher Verlauf + anklickbarer Pfeil */ :root[data-cut="button"] .catalog{border-top:0;padding-top:88px} :root[data-cut="button"] .hero{min-height:clamp(520px,86vh,860px)} :root[data-cut="button"] .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px; pointer-events:none;z-index:4;background:linear-gradient(to bottom,transparent,var(--ground))} :root[data-cut="button"] .scrollcue,:root[data-cut="scroll"] .scrollcue{display:flex} /* Scroll-Knopf */ .scrollcue{display:none;position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:9;pointer-events:auto; flex-direction:column;align-items:center;gap:4px;cursor:pointer;text-decoration:none; font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;color:var(--dim);text-transform:uppercase; border:0;padding:6px 10px;background:transparent; transition:color .2s,transform .2s} .scrollcue:hover{color:var(--phos);transform:translateX(-50%) translateY(-2px)} .scrollcue:hover i{color:var(--phos)} .scrollcue i{font-style:normal;font-size:.82rem;color:rgba(0,255,65,.6);animation:cue 1.8s ease-in-out infinite} /* ===== Abgang der Null im Katalog-Hero ===== */ .zmark{will-change:transform,opacity,filter} .zmark.exit-licht{animation:zx-licht calc(.95s * var(--zxf)) cubic-bezier(.4,0,.2,1) forwards} @keyframes zx-licht{ 0%{filter:none;opacity:1;transform:scale(1)} 32%{filter:drop-shadow(0 0 30px rgba(255,255,255,.95)) brightness(2.6);transform:scale(1.04)} 100%{filter:drop-shadow(0 0 70px rgba(255,255,255,0)) brightness(3);opacity:0;transform:scale(1.12)}} .zmark.exit-punkt{animation:zx-punkt calc(.8s * var(--zxf)) cubic-bezier(.6,-0.05,.3,1) forwards} @keyframes zx-punkt{ 0%{transform:scale(1) rotate(0);opacity:1} 70%{transform:scale(.16) rotate(-14deg);opacity:1;filter:brightness(2)} 100%{transform:scale(0) rotate(-20deg);opacity:0;filter:brightness(3)}} .zmark.exit-blende{animation:zx-blende calc(.85s * var(--zxf)) cubic-bezier(.5,0,.2,1) forwards} @keyframes zx-blende{ 0%{clip-path:circle(75% at 50% 50%);opacity:1} 100%{clip-path:circle(0% at 50% 50%);opacity:1}} .zmark.exit-jalousie{animation:zx-jal calc(.8s * var(--zxf)) cubic-bezier(.7,0,.25,1) forwards} @keyframes zx-jal{ 0%{clip-path:inset(0 0 0 0);opacity:1;filter:none} 70%{clip-path:inset(48% 0 48% 0);opacity:1;filter:brightness(2.4)} 100%{clip-path:inset(50% 0 50% 0);opacity:0;filter:brightness(3)}} .zmark.exit-weich{animation:zx-weich calc(1s * var(--zxf)) cubic-bezier(.4,0,.2,1) forwards} @keyframes zx-weich{ 0%{filter:blur(0);opacity:1;transform:scale(1)} 100%{filter:blur(14px);opacity:0;transform:scale(1.22)}} .zmark.exit-sinken{animation:zx-sink calc(.9s * var(--zxf)) cubic-bezier(.55,0,.3,1) forwards} @keyframes zx-sink{ 0%{transform:translateY(0) scale(1);opacity:1;filter:none} 25%{transform:translateY(-6px) scale(1.02);filter:brightness(1.8)} 100%{transform:translateY(34px) scale(.9);opacity:0;filter:blur(4px)}} @media (prefers-reduced-motion: reduce){ .zmark[class*="exit-"]{animation:none;opacity:0} } /* ===== Hero auf dem Handy: Kopfzeile in einer Zeile, ruhigerer Aufbau ===== */ @media(max-width:900px){ /* Die obere Leiste bricht auf dem Handy in zwei Zeilen um. Die feste Hoehe aus dem schlanken Header wuerde die zweite Zeile (Sprachwahl) abschneiden -- sie steht spaeter im Blatt und gewinnt sonst gegen die Mobil-Regel. */ :root[data-hdr="slim"] .topbar .wrap, :root[data-hdr="hide"] .topbar .wrap{height:auto;padding:5px 0} .copy{padding:3.4vh 0 2vh} .sig{font-size:.78rem;white-space:nowrap;margin-bottom:16px} } @media(max-width:400px){ .sig{font-size:.72rem} } @media(max-width:340px){ .sig{font-size:.66rem} } /* ===== Reiter-Form: gleich breit oder nach Inhalt ===== */ /* ungleich = Voreinstellung: jede Blase so breit wie ihr Wort */ :root[data-tabs="gleich"] .tabs{display:flex} :root[data-tabs="gleich"] .tab{flex:0 0 auto;min-width:152px;text-align:center} :root[data-tabs="gleich"] .tab-onion{margin-left:0} @media(max-width:640px){ /* gleich: zwei saubere Reihen zu je drei */ :root[data-tabs="gleich"] .tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} :root[data-tabs="gleich"] .tab{min-width:0;padding:9px 4px} /* ungleich: Flattersatz nach Inhalt, faellt mit der Kurzform ebenfalls auf 3+3 */ :root[data-tabs="ungleich"] .tabs{display:flex;flex-wrap:wrap;gap:8px} :root[data-tabs="ungleich"] .tab{padding:9px 13px;text-align:left;min-width:0} :root[data-tabs="ungleich"] .tab-onion{margin-left:0} /* Nach "Zubehoer" umbrechen: ungleiche Blasen, aber trotzdem drei und drei */ :root[data-tabs="ungleich"] .tabs .brk{display:block;flex:0 0 100%;height:0;margin:0} } /* =================================================================== Warenkorb im Header · ?cart=klammer | wort | beutel | terminal Ein Markup, vier Erscheinungsformen. Der Rahmen faellt weg: er allein kostete 34 der 97 px, die "Cart (0)" belegt hat. =================================================================== */ .cart{margin-left:auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap; font-family:var(--mono);font-size:.8rem;line-height:1;color:var(--ink);border:0;padding:6px 2px;border-radius:3px} .cart:hover{color:var(--phos)} .cart .bag{width:17px;height:17px;display:none;flex:0 0 auto} .cart .cw{display:none;color:var(--dim2)} .cart .ck{color:var(--dim);letter-spacing:.02em;line-height:1} .cart .cw{line-height:1} .cart .ck i{font-style:normal} .cart .ck b{color:var(--phos);font-weight:600;font-variant-numeric:tabular-nums} /* leer ist die Null ruhig, gefuellt leuchtet sie */ .cart[data-n="0"] .ck b{color:var(--dim2)} /* 02 Klammer-Zahl -- Voreinstellung. Am Schreibtisch ist Platz fuer das Wort, auf dem Handy traegt die Klammer allein. */ @media(min-width:901px){ :root[data-cart="klammer"] .cart .cw{display:inline} } /* Wort davor -- in jeder Breite */ :root[data-cart="wort"] .cart .cw{display:inline} /* 04 Eingabezeile */ :root[data-cart="terminal"] .cart .cw{display:inline;color:var(--ink)} :root[data-cart="terminal"] .cart .ck i{display:none} :root[data-cart="terminal"] .cart::before{content:"~$";color:var(--dim);margin-right:-2px} /* 01 Beutel mit Plakette */ :root[data-cart="beutel"] .cart{gap:0;padding:6px;position:relative} :root[data-cart="beutel"] .cart .bag{display:block} :root[data-cart="beutel"] .cart .cw, :root[data-cart="beutel"] .cart .ck i{display:none} :root[data-cart="beutel"] .cart .ck b{position:absolute;top:-1px;right:-3px;min-width:15px;height:15px; border-radius:8px;background:var(--phos);color:#04140c;font-size:.56rem;font-weight:700; display:flex;align-items:center;justify-content:center;padding:0 4px} :root[data-cart="beutel"] .cart[data-n="0"] .ck b{display:none} /* Der schlanke Header darf den Warenkorb nicht mehr einrahmen */ :root[data-hdr="slim"] .cart,:root[data-hdr="hide"] .cart{padding:6px 2px;font-size:.8rem} :root[data-hdr="slim"][data-cart="beutel"] .cart, :root[data-hdr="hide"][data-cart="beutel"] .cart{padding:6px} /* Auf dem Handy stand der Warenkorb bisher nur als Beschriftung AM Aufklapper -- er oeffnete also das Menue statt den Korb. Jetzt beides getrennt nebeneinander. */ @media(max-width:900px){ .menu{display:none} /* Warenkorb und Aufklapper bilden rechts eine feste Gruppe, nicht zwei Einzelteile */ .cart{display:inline-flex;margin-left:auto;padding:6px 0;font-size:.82rem} .burger{display:flex;margin-left:0;gap:0;align-items:center} .nav .wrap{gap:14px} /* Flex-Abstand galt zusaetzlich -- sonst stehen 41 px dazwischen */ } /* =================================================================== Katalog-Karte · ?card=knopf | hover | ohne Die Karte ist kein mehr. Der Produktname traegt den Link und deckt ueber ::after die ganze Flaeche ab; der Knopf liegt mit z-index darueber. So bleibt ein Knopf in einer klickbaren Karte moeglich, ohne ein in ein zu setzen -- genau das hatte am 07.09. die Hero-Karte zerlegt. =================================================================== */ .card .cn{display:block;text-decoration:none;color:var(--ink);margin-top:auto} .card .cn::after{content:"";position:absolute;inset:0;z-index:1;border-radius:9px} .card .cn:focus-visible{outline:2px solid var(--phos);outline-offset:3px} .card .add{position:relative;z-index:2;margin-top:12px;width:100%; font-family:var(--mono);font-size:.72rem;letter-spacing:.04em; padding:9px 10px;border-radius:4px;cursor:pointer; border:1px solid var(--contour-mid);background:transparent;color:var(--dim2); transition:border-color .16s ease,color .16s ease,background .16s ease} .card .add:hover{border-color:var(--phos);color:var(--phos);background:rgba(0,255,65,.07)} .card .add:focus-visible{outline:2px solid var(--phos);outline-offset:2px} .card .add.ok{border-color:var(--phos);background:var(--phos);color:#04140c;font-weight:700} /* knopf -- Voreinstellung: der Knopf steht immer da */ /* hover -- der Knopf blendet erst beim Darueberfahren ein */ :root[data-card="hover"] .card .add{opacity:0;transform:translateY(4px); transition:opacity .18s ease,transform .18s ease,border-color .16s ease,color .16s ease} :root[data-card="hover"] .card:hover .add, :root[data-card="hover"] .card:focus-within .add{opacity:1;transform:none} /* Auf dem Handy gibt es kein Darueberfahren -- dort muss er immer sichtbar sein. */ @media(hover:none),(pointer:coarse){ :root[data-card="hover"] .card .add{opacity:1;transform:none} } /* ohne -- kein Knopf in der Liste, gekauft wird auf der Produktseite */ :root[data-card="ohne"] .card .add{display:none} :root[data-card="ohne"] .card{min-height:190px} @media (prefers-reduced-motion: reduce){ .card .add{transition:none} :root[data-card="hover"] .card .add{transition:none} } /* Der Warenkorb quittiert, dass etwas hineingewandert ist. */ .cart.puls{animation:korbpuls .5s cubic-bezier(.3,1.4,.5,1)} @keyframes korbpuls{ 0%{transform:scale(1)} 38%{transform:scale(1.22)} 100%{transform:scale(1)}} .cart.puls .ck b{animation:korbzahl .5s ease} @keyframes korbzahl{0%{color:#eaffef}100%{color:var(--phos)}} @media (prefers-reduced-motion: reduce){ .cart.puls,.cart.puls .ck b{animation:none} } /* =================================================================== Unterseiten (Werkstatt, Ueber, ...) -- gleiche Bausteine wie der Shop =================================================================== */ .phead{max-width:72ch;margin-bottom:clamp(38px,5vw,62px)} .phead .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--phos); text-transform:uppercase;margin-bottom:14px} .phead h1{font-family:var(--exp);font-weight:800;line-height:1.04;letter-spacing:-.01em; font-size:clamp(2rem,5vw,3.4rem);margin-bottom:20px;text-wrap:balance} .phead .plede{font-size:clamp(1rem,1.5vw,1.12rem);color:var(--dim2);max-width:62ch;line-height:1.7} .phead .pnote{margin-top:18px;border-left:3px solid var(--phos);padding:2px 0 2px 16px; color:var(--dim2);font-size:.96rem;line-height:1.7;max-width:62ch} .phead .pnote b{color:var(--ink)} .kh2{font-family:var(--exp);font-weight:800;font-size:clamp(1.1rem,2vw,1.5rem); margin:0 0 22px;display:flex;align-items:center;gap:16px} .kh2::after{content:"";flex:1;height:1px;background:var(--contour)} /* Nummerierte Abfolge -- die Ziffern stehen fuer echte Reihenfolge, nicht als Zierde */ .wsteps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px; margin:0 0 clamp(40px,5vw,64px);padding:0;counter-reset:none} .wstep{border:1px solid var(--contour);border-radius:9px;background:var(--panel); padding:18px;display:flex;flex-direction:column;gap:8px;transition:border-color .18s ease} .wstep:hover{border-color:var(--contour-mid)} .wstep .wn{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:var(--phos)} .wstep h3{font-family:var(--exp);font-weight:800;font-size:1rem;color:var(--ink);margin:0} .wstep p{color:var(--dim2);font-size:.9rem;line-height:1.65;margin:0} .grid-w{margin-bottom:clamp(40px,5vw,64px);grid-template-columns:repeat(4,1fr)} @media(max-width:1100px){.grid-w{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.grid-w{grid-template-columns:1fr}} .grid-w .card{min-height:0} .card .cdesc{color:var(--dim2);font-size:.86rem;line-height:1.6;margin-top:10px} .firma{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;border:1px solid var(--contour); border-radius:9px;background:var(--panel);padding:22px;margin-bottom:clamp(40px,5vw,64px)} .fname2{font-family:var(--exp);font-weight:800;font-size:1rem;line-height:1.5} .fname2 span{font-family:var(--mono);font-weight:400;font-size:.76rem;color:var(--dim)} .fadr{font-family:var(--mono);font-size:.86rem;color:var(--dim2);margin-top:8px} .fkontakt{display:flex;flex-direction:column;gap:6px;border-left:1px solid var(--contour);padding-left:20px} .flbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:var(--dim);text-transform:uppercase} .fkontakt a{font-family:var(--mono);font-size:.92rem;color:var(--phos);text-decoration:none} .fkontakt a:hover{text-decoration:underline} .fhint{font-family:var(--mono);font-size:.72rem;color:var(--dim);line-height:1.6;margin-top:4px} .pcta{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--contour-mid)} .btn-ghost:hover{border-color:var(--phos);color:var(--phos)} @media(max-width:900px){ .wsteps{grid-template-columns:1fr 1fr} .firma{grid-template-columns:1fr} .fkontakt{border-left:0;border-top:1px solid var(--contour);padding-left:0;padding-top:16px} } @media(max-width:560px){ .wsteps{grid-template-columns:1fr} .pcta .btn{width:100%;text-align:center} } /* ===== Blog-Feed ===== */ .wsteps-3{grid-template-columns:repeat(3,1fr)} @media(max-width:900px){.wsteps-3{grid-template-columns:1fr}} .posts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0 0 clamp(40px,5vw,64px)} @media(max-width:900px){.posts{grid-template-columns:1fr}} .post{border:1px solid var(--contour);border-radius:9px;background:var(--panel);padding:20px; display:flex;flex-direction:column;gap:10px;transition:border-color .18s ease,transform .18s ease} .post:hover{border-color:var(--phos);transform:translateY(-2px)} .pmeta{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.64rem; letter-spacing:.12em;text-transform:uppercase} .prub{color:#04140c;background:var(--phos);border-radius:3px;padding:2px 7px;font-weight:700} .post[data-rub="projekt"] .prub{background:var(--gold)} .post[data-rub="news"] .prub{background:transparent;color:var(--dim2);border:1px solid var(--contour-mid)} .pmeta time{color:var(--dim)} .post h3{font-family:var(--exp);font-weight:800;font-size:1.02rem;line-height:1.35;margin:0;text-wrap:balance} .post h3 a{color:var(--ink);text-decoration:none} .post:hover h3 a{color:var(--phos)} .post p{color:var(--dim2);font-size:.9rem;line-height:1.65;margin:0} .post .pmore{font-family:var(--mono);font-size:.72rem;color:var(--dim);margin-top:auto} .post:hover .pmore{color:var(--phos)} /* Knopf-Reset darf .tab.on nicht ueberschreiben -- sonst dunkle Schrift auf dunklem Grund */ .tabs button.tab{background:none;cursor:pointer;font:inherit;font-family:var(--mono);font-size:.8rem; color:var(--dim2);border:1px solid var(--contour)} .tabs button.tab.on{background:var(--phos);color:#04140c;border-color:var(--phos);font-weight:600} .tabs button.tab:hover:not(.on){border-color:var(--phos);color:var(--phos)} /* ===== Tor: Onion-Adresse ===== */ .onionbox{border:1px solid var(--phos);border-radius:9px;background:rgba(0,255,65,.04); padding:20px;margin-bottom:clamp(40px,5vw,64px);display:flex;flex-direction:column;gap:10px} .onionval{font-family:var(--mono);font-size:.9rem;color:var(--ink);background:var(--ground); border:1px solid var(--contour);border-radius:6px;padding:14px 16px;text-align:left; word-break:break-all;line-height:1.6;cursor:pointer;transition:border-color .16s ease,color .16s ease} .onionval:hover{border-color:var(--phos);color:var(--phos)} .onionval.ok{background:var(--phos);color:#04140c;font-weight:700;border-color:var(--phos)} /* ===== Support: Formular ===== */ .formbox{border:1px solid var(--contour);border-radius:9px;background:var(--panel);padding:22px; display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(40px,5vw,64px);max-width:64ch} .fld{display:flex;flex-direction:column;gap:7px} .fld>span{font-family:var(--mono);font-size:.74rem;color:var(--dim2)} .fld textarea,.fld input{font-family:var(--sans);font-size:.95rem;color:var(--ink); background:var(--ground);border:1px solid var(--contour-mid);border-radius:6px;padding:12px 14px; resize:vertical;width:100%} .fld textarea:focus,.fld input:focus{outline:0;border-color:var(--phos)} .fnav{display:flex;gap:10px;flex-wrap:wrap} .fnav .btn[disabled]{opacity:.4;cursor:not-allowed} .formbox code{font-family:var(--mono);color:var(--gold)} /* =================================================================== Support-Ablauf · ?sup=karten | liste | einseiter =================================================================== */ .zsup{border:1px solid var(--contour);border-radius:11px;background:var(--panel); padding:clamp(18px,2.4vw,26px);max-width:860px;margin-bottom:26px} .zphase{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px;padding:0} .zphase li{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;padding:7px 13px; border:1px solid var(--contour);border-radius:4px;color:var(--dim)} .zphase li.done{color:var(--phos);border-color:var(--contour-mid)} .zphase li.done::before{content:"\2713 ";font-weight:700} .zphase li.active{background:var(--phos);color:#04140c;border-color:var(--phos);font-weight:700} .zcrumb{font-family:var(--mono);font-size:.74rem;color:var(--dim);min-height:1.2em;margin-bottom:14px} .zcrumb b{color:var(--phos);font-weight:600} .zcrumb .sep{color:var(--contour-mid);margin:0 .45em} .zbody{border-top:1px dashed var(--contour);padding-top:20px;min-height:230px} .zfrage{font-family:var(--exp);font-weight:800;font-size:1.12rem;margin:0 0 6px} .zsub{color:var(--dim2);font-size:.9rem;margin:0 0 16px} .zcards{display:grid;grid-template-columns:1fr 1fr;gap:10px} .zcards--eng{grid-template-columns:repeat(4,1fr)} .zcard{display:flex;flex-direction:column;gap:5px;text-align:left;cursor:pointer; border:1px solid var(--contour);border-radius:7px;background:transparent;padding:14px 16px; font:inherit;transition:border-color .16s ease,background .16s ease} .zcard:hover{border-color:var(--phos);background:rgba(0,255,65,.05)} .zcard.is-on{border-color:var(--phos);background:rgba(0,255,65,.09)} .zc-t{font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;color:var(--phos);text-transform:uppercase} .zc-d{font-size:.84rem;color:var(--dim2)} .zor{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--dim); text-transform:uppercase;margin:20px 0 10px} .zbespoke{display:grid;grid-template-columns:1fr auto;gap:4px 14px;width:100%;text-align:left; cursor:pointer;border:1px solid var(--gold);border-radius:7px;background:rgba(231,217,126,.05); padding:15px 18px;font:inherit;align-items:center} .zbespoke:hover{background:rgba(231,217,126,.1)} .zb-t{font-family:var(--mono);font-size:.84rem;letter-spacing:.06em;color:var(--gold);text-transform:uppercase} .zb-d{font-size:.82rem;color:var(--dim2);grid-column:1} .zb-a{grid-row:1/3;grid-column:2;color:var(--gold)} /* Kalender */ .zcal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .zcal-nav b{font-family:var(--mono);font-size:.82rem;letter-spacing:.14em;color:var(--phos)} .zcal-arrow{border:1px solid var(--contour);background:transparent;color:var(--dim); border-radius:4px;width:30px;height:30px;cursor:pointer;font:inherit} .zcal-arrow[disabled]{opacity:.35;cursor:not-allowed} .zcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .zcal-dow{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--dim); text-align:center;padding:4px 0} .zcal-cell{display:flex;align-items:center;justify-content:center;aspect-ratio:1; font-family:var(--mono);font-size:.84rem;border-radius:5px;border:1px solid transparent} .zcal-empty{border:0} .zcal-belegt{color:var(--dim);opacity:.5;text-decoration:line-through} .zcal-frei{border-color:var(--contour-mid);color:var(--ink);background:transparent;cursor:pointer;font:inherit; font-family:var(--mono);font-size:.84rem;transition:border-color .16s ease,background .16s ease} .zcal-frei:hover{border-color:var(--phos);background:rgba(0,255,65,.08)} .zcal-frei.is-on{background:var(--phos);color:#04140c;border-color:var(--phos);font-weight:700} .zcal-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-family:var(--mono); font-size:.7rem;color:var(--dim)} .l-frei::before{content:"\25CB ";color:var(--phos)} .l-belegt{text-decoration:line-through;opacity:.6} /* Zeitfenster */ .zslots{display:grid;grid-template-columns:repeat(4,1fr);gap:9px} .zslot{display:flex;align-items:center;justify-content:center;padding:13px 6px;border-radius:6px; border:1px solid var(--contour-mid);font-family:var(--mono);font-size:.86rem;color:var(--ink); background:transparent;cursor:pointer;font-weight:400;transition:border-color .16s ease,background .16s ease} .zslot:hover{border-color:var(--phos);background:rgba(0,255,65,.08)} .zslot.is-on{background:var(--phos);color:#04140c;border-color:var(--phos);font-weight:700} .zslot--belegt{color:var(--dim);opacity:.45;text-decoration:line-through;border-style:dashed;cursor:not-allowed} .zhint{font-family:var(--mono);font-size:.72rem;color:var(--dim);line-height:1.7;margin:8px 0 0} .zhint.ok{color:var(--phos)} .zhint.warn{color:var(--gold)} .zattach{margin-top:20px;border-top:1px dashed var(--contour);padding-top:16px; display:flex;flex-direction:column;gap:9px;align-items:flex-start} .znav{display:flex;align-items:center;gap:14px;margin-top:22px;border-top:1px dashed var(--contour); padding-top:18px} .znav .btn-go{margin-left:auto} .znavsumm{font-family:var(--mono);font-size:.74rem;color:var(--phos)} .zdone{text-align:left} .zdone-i{width:46px;height:46px;border-radius:50%;border:2px solid var(--phos);color:var(--phos); display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:16px} .zdone-rows{border:1px solid var(--contour);border-radius:8px;margin:18px 0;overflow:hidden} .zdone-row{display:flex;gap:16px;padding:12px 16px;border-bottom:1px solid var(--contour); font-size:.9rem;align-items:baseline} .zdone-row:last-child{border-bottom:0} .zdone-row span{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--dim); text-transform:uppercase;min-width:92px} .zdone-row b{color:var(--ink);font-weight:600} /* --- Form: kompakte Liste --- */ :root[data-sup="liste"] .zcards, :root[data-sup="liste"] .zcards--eng{grid-template-columns:1fr;gap:6px} :root[data-sup="liste"] .zcard{flex-direction:row;align-items:baseline;gap:12px;padding:11px 14px} :root[data-sup="liste"] .zc-t{min-width:34%;font-size:.78rem} :root[data-sup="liste"] .zc-d{font-size:.8rem} :root[data-sup="liste"] .zslots{grid-template-columns:repeat(3,1fr)} /* --- Form: alles auf einer Seite --- */ :root[data-sup="einseiter"] .zcards{grid-template-columns:repeat(2,1fr);gap:8px} :root[data-sup="einseiter"] .zcard{padding:11px 13px} :root[data-sup="einseiter"] .zphase{opacity:.55} :root[data-sup="einseiter"] .zbody{min-height:0} .zblock{padding-bottom:22px;margin-bottom:22px;border-bottom:1px dashed var(--contour)} .zblock:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0} .zblock .zfrage{font-size:1rem} @media(max-width:700px){ .zcards,.zcards--eng{grid-template-columns:1fr} .zslots{grid-template-columns:repeat(3,1fr)} .zcal-legend{font-size:.66rem;gap:12px} .znav{flex-wrap:wrap} .znav .btn{flex:1 1 auto;text-align:center} .znavsumm{order:3;width:100%} } /* =================================================================== Bitcoin-Zahlfenster im Bestell-Portal Nachbau von templates/payment-pending-monero.php =================================================================== */ .zbtc{display:flex;flex-direction:column;gap:14px;margin-top:14px} /* Eine Klasse schlaegt die Browser-Regel fuer [hidden] -- ohne diese Zeile bleibt der Aktivieren-Knopf sichtbar, obwohl das Attribut gesetzt ist. */ .zbtc[hidden]{display:none} .zbtc-sub{color:var(--dim2);font-size:.9rem;line-height:1.65;max-width:62ch;margin:0} .zbtc-go{align-self:flex-start} .zbtc-ico{font-family:var(--mono);font-weight:700} .zbtc-err{font-family:var(--mono);font-size:.78rem;color:var(--gold);margin:0} .zbtc-head{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between} .zbtc-timer{border:1px solid var(--contour-mid);border-radius:8px;padding:10px 16px;text-align:center} .zbtc-timer .t{font-family:var(--mono);font-size:1.5rem;font-weight:600;color:var(--phos); font-variant-numeric:tabular-nums;letter-spacing:.04em} .zbtc-timer .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--dim);margin-top:2px} .zbtc-timer.warn{border-color:var(--gold)} .zbtc-timer.warn .t{color:var(--gold)} .zbtc-timer.crit{border-color:var(--gold);align-self:flex-start} .zbtc-timer.crit .t{color:var(--gold)} .zbtc-amt{text-align:right} .zbtc-amt .b{font-family:var(--mono);font-size:1.15rem;color:var(--ink);font-variant-numeric:tabular-nums} .zbtc-amt .e{font-family:var(--mono);font-size:.84rem;color:var(--gold);margin-top:2px} .zbtc-grid{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start} .zbtc-qr{border:1px solid var(--contour-mid);border-radius:8px;flex:0 0 auto; image-rendering:pixelated;background:var(--ground)} .zbtc-right{flex:1 1 300px;display:flex;flex-direction:column;gap:9px;align-items:flex-start} .zbtc-right .v{font-family:var(--mono);font-size:.86rem;color:var(--ink);word-break:break-all; background:var(--ground);border:1px solid var(--contour);border-radius:6px;padding:11px 13px;width:100%} .zbtc-right .mini.ok{background:var(--phos);color:#04140c;border-color:var(--phos);font-weight:700} .zbtc-ok{flex-direction:row;align-items:flex-start;gap:16px} .zbtc-okico{width:42px;height:42px;border-radius:50%;border:2px solid var(--phos);color:var(--phos); display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex:0 0 auto} .zbtc-ok b{color:var(--ink)} /* Kurzer Glitch beim Aktivieren */ .card2.zglitch{animation:zbtc-glitch .14s steps(2,end) 4} @keyframes zbtc-glitch{ 0%{transform:translateX(0);filter:none} 50%{transform:translateX(-2px);filter:brightness(1.6) hue-rotate(-12deg)} 100%{transform:translateX(2px);filter:none}} @media (prefers-reduced-motion: reduce){ .card2.zglitch{animation:none} } @media(max-width:620px){ .zbtc-head{flex-direction:column;align-items:stretch} .zbtc-amt{text-align:left} .zbtc-grid{flex-direction:column} .zbtc-qr{align-self:center} } /* =================================================================== Batch 1 — einheitliche Fusszeile, Rechtstexte, Tabellen, Status =================================================================== */ .foot .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:26px} .fbrand .b{font-family:var(--exp);font-weight:800;font-size:1.05rem;letter-spacing:.1em} .fbrand p{color:var(--dim2);font-size:.88rem;margin-top:8px;max-width:34ch} .fpay{font-family:var(--mono);font-size:.74rem;color:var(--dim)} .fcol summary{list-style:none;cursor:default} .fcol summary::-webkit-details-marker{display:none} .fcol h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase; color:var(--dim);margin:0 0 10px;display:inline} .fcol ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:10px} .fcol a{color:var(--dim2);font-size:.88rem;text-decoration:none} .fcol a:hover{color:var(--phos)} @media(max-width:860px){ /* Auf dem Handy als Akkordeon -- sonst laeuft die Fusszeile ueber zwei Bildschirme. */ .foot .wrap{grid-template-columns:1fr;gap:0} .fbrand{margin-bottom:18px} .fcol{border-top:1px solid var(--contour)} .fcol summary{cursor:pointer;padding:14px 0;display:flex;align-items:center;justify-content:space-between} .fcol summary::after{content:"+";font-family:var(--mono);color:var(--phos);font-size:1rem} .fcol[open] summary::after{content:"\2212"} .fcol ul{padding-bottom:16px;margin-top:0} } /* Rechtstexte */ /* Lange Einzelwoerter ("Allgemeine Geschaeftsbedingungen" = 391 px bei 390 px Fenster) muessen umbrechen duerfen, sonst schiebt die Ueberschrift die ganze Seite quer. */ .phead h1{overflow-wrap:break-word} .phead--eng h1{font-size:clamp(1.45rem,6vw,2.5rem)} @media(min-width:760px){ .phead--eng h1{font-size:clamp(1.7rem,3.6vw,2.5rem)} } .legal{max-width:76ch;color:var(--dim2);font-size:.95rem;line-height:1.8} .legal h1,.legal h2{font-family:var(--exp);font-weight:800;color:var(--ink); font-size:1.12rem;margin:30px 0 10px;line-height:1.35} .legal h3,.legal h4{font-family:var(--mono);font-size:.84rem;letter-spacing:.04em; color:var(--phos);margin:22px 0 8px;text-transform:none} .legal p{margin:0 0 12px} .legal ul,.legal ol{margin:0 0 14px 20px;display:flex;flex-direction:column;gap:6px} .legal a{color:var(--phos)} .legal strong,.legal b{color:var(--ink)} .legal code,.legal pre{font-family:var(--mono);font-size:.82rem;color:var(--gold); background:var(--panel);border:1px solid var(--contour);border-radius:5px;padding:2px 6px} .legal pre{display:block;padding:14px 16px;overflow-x:auto;white-space:pre;color:var(--dim2)} .legal table{width:100%;border-collapse:collapse;margin:0 0 16px} .legal td,.legal th{border:1px solid var(--contour);padding:9px 12px;text-align:left;font-size:.88rem} .legal figure,.legal img{max-width:100%;height:auto} /* Tabellen (Versand) */ .tblwrap{overflow-x:auto;border:1px solid var(--contour);border-radius:9px;margin-bottom:24px} .ztbl{width:100%;border-collapse:collapse;min-width:560px} .ztbl th{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase; color:var(--dim);text-align:left;padding:13px 16px;border-bottom:1px solid var(--contour); background:var(--panel)} .ztbl td{padding:13px 16px;border-bottom:1px solid var(--contour);font-size:.9rem;color:var(--dim2)} .ztbl tr:last-child td{border-bottom:0} .ztbl td:first-child b{color:var(--ink);display:block} .ztbl td:not(:first-child){font-family:var(--mono);color:var(--gold); font-variant-numeric:tabular-nums;white-space:nowrap} .ztbl td:last-child{color:var(--dim)} .zl{display:block;font-family:var(--mono);font-size:.72rem;color:var(--dim);margin-top:3px} /* Status-Meldungen */ .advlist{display:flex;flex-direction:column;gap:14px;margin-bottom:26px} .adv{border:1px solid var(--contour);border-radius:9px;background:var(--panel);padding:18px 20px} .advhead{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:9px} .sev{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;padding:3px 9px;border-radius:3px} .sev-rot{background:#5a1414;color:#ffb3b3;border:1px solid #8c2626} .sev-gelb{background:rgba(231,217,126,.12);color:var(--gold);border:1px solid rgba(231,217,126,.4)} .advhead time{font-family:var(--mono);font-size:.72rem;color:var(--dim)} .advapp{font-family:var(--mono);font-size:.72rem;color:var(--phos);margin-left:auto} .adv h3{font-family:var(--exp);font-weight:800;font-size:1rem;margin:0 0 8px;line-height:1.4} .adv p{color:var(--dim2);font-size:.9rem;line-height:1.7;margin:0 0 8px} .advfix{border-left:3px solid var(--phos);padding-left:13px;margin-top:12px !important} .advfix b{color:var(--phos)} @media(max-width:560px){ .advapp{margin-left:0} } /* Lange Zeichenketten in Rechtstexten (URLs, Schluessel) duerfen nicht ausbrechen */ .legal{overflow-wrap:anywhere} .legal .tblwrap{margin:0 0 16px} .legal .tblwrap table{margin:0;min-width:520px} /* ===== Wallpapers ===== */ .wpgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 clamp(36px,4.5vw,56px)} @media(max-width:900px){.wpgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.wpgrid{grid-template-columns:1fr}} .wp{border:1px solid var(--contour);border-radius:9px;background:var(--panel);overflow:hidden} .wp:hover{border-color:var(--contour-mid)} .wpvis{aspect-ratio:1080/2424;max-height:300px;display:flex;align-items:center;justify-content:center; background:radial-gradient(120% 90% at 50% 20%,#0c130d,#040704);position:relative} .wpnull{font-family:var(--exp);font-weight:800;font-size:clamp(3rem,7vw,4.6rem);color:var(--wpc); text-shadow:0 0 30px color-mix(in srgb,var(--wpc) 45%,transparent);line-height:1} .wpvis--lock{flex-direction:column;gap:10px} .wpuhr{font-family:var(--mono);font-size:clamp(1.6rem,4vw,2.4rem);color:var(--wpc); font-variant-numeric:tabular-nums;letter-spacing:.06em} .wpclaim{font-family:var(--mono);font-size:.76rem;letter-spacing:.2em;color:var(--wpc);opacity:.75} .wpmeta{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--contour)} .wpmeta b{font-family:var(--mono);font-size:.84rem;color:var(--ink)} .wptag{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:#04140c; background:var(--phos);border-radius:3px;padding:2px 7px} .wpmeta .mini{margin-left:auto} /* =================================================================== Batch 3 — weitere Zahlarten, Voucher-Bereich =================================================================== */ .zpay[hidden]{display:none} /* Klasse schlaegt sonst das Attribut */ .zpay h3{font-family:var(--exp);font-weight:800;font-size:1.02rem;margin:0 0 12px} .zsub2{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--phos); text-transform:uppercase;margin:20px 0 8px} .zkv{display:grid;grid-template-columns:max-content 1fr;gap:9px 20px;margin:0 0 14px} .zkv dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--dim); text-transform:uppercase;padding-top:2px} .zkv dd{margin:0;color:var(--ink);font-size:.92rem;overflow-wrap:anywhere} .zkv dd code{font-family:var(--mono);color:var(--gold);font-size:.88rem} @media(max-width:560px){ .zkv{grid-template-columns:1fr;gap:3px 0} .zkv dd{margin-bottom:10px} } .zliste{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0 0 18px} .zliste li{color:var(--dim2);font-size:.9rem;line-height:1.65;padding-left:16px;position:relative} .zliste li::before{content:"·";position:absolute;left:2px;color:var(--phos);font-weight:700} .zfail{display:flex;gap:16px;align-items:flex-start;margin-bottom:14px} .zfail-i{width:42px;height:42px;border-radius:50%;border:2px solid var(--gold);color:var(--gold); display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;flex:0 0 auto} .zfail b{color:var(--gold)} /* Voucher */ .zvoucher[hidden]{display:none} .zv-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--ground); border:1px solid var(--contour);border-radius:7px;padding:14px 16px;margin-top:10px} .zv-box code{font-family:var(--mono);font-size:1rem;color:var(--phos);letter-spacing:.06em} .zv-box--aus code{color:var(--dim);letter-spacing:.14em} .zv-schloss{opacity:.6} /* Ein geschlossenes
verbirgt seinen Inhalt nur, solange kein Kind ein eigenes display: setzt. .zv-box{display:flex} hat das ausgehebelt -- der Code stand sichtbar da, bevor man "Code anzeigen" ueberhaupt gedrueckt hatte. Dritter Fall derselben Art nach [hidden] im Zahlfenster und bei .zpay. */ .zv-det:not([open]) > .zv-box{display:none} .zv-det{margin-top:10px} .zv-reveal{cursor:pointer;font-family:var(--mono);font-size:.84rem;color:var(--phos); border:1px solid var(--contour-mid);border-radius:5px;padding:10px 15px;display:inline-block; list-style:none} .zv-reveal::-webkit-details-marker{display:none} .zv-reveal:hover{border-color:var(--phos);background:rgba(0,255,65,.06)} .zcallout{border-left:3px solid var(--gold);background:rgba(231,217,126,.06);border-radius:6px; padding:13px 16px;margin-top:14px;font-size:.88rem;color:var(--dim2);line-height:1.7} .zcallout b{color:var(--gold);display:block;margin-bottom:3px} .ph1{font-family:var(--exp);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.3rem);margin-bottom:10px} /* =================================================================== Batch 4 — Blog-Einzelbeitrag =================================================================== */ .zurueck{display:inline-block;font-family:var(--mono);font-size:.78rem;color:var(--dim); text-decoration:none;margin-bottom:22px} .zurueck:hover{color:var(--phos)} .beitrag{max-width:74ch;margin-bottom:clamp(40px,5vw,64px)} .pmeta--gross{margin-bottom:14px} .plese{font-family:var(--mono);font-size:.68rem;color:var(--dim);margin-left:auto} .beitrag h1{font-family:var(--exp);font-weight:800;line-height:1.12;letter-spacing:-.01em; font-size:clamp(1.5rem,3.4vw,2.35rem);margin-bottom:26px;text-wrap:balance; overflow-wrap:break-word} .beitragstext{font-size:1rem;line-height:1.85} .beitragstext > *:first-child{margin-top:0} .beitragstext h2{font-size:1.2rem;margin-top:36px} .beitragstext h3{font-size:.9rem;margin-top:28px} .beitragstext blockquote{border-left:3px solid var(--phos);padding:2px 0 2px 18px;margin:20px 0; color:var(--ink);font-style:normal} .pnextgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:clamp(36px,4.5vw,56px)} @media(max-width:700px){.pnextgrid{grid-template-columns:1fr}} .pnext{display:flex;flex-direction:column;gap:7px;border:1px solid var(--contour);border-radius:9px; background:var(--panel);padding:16px 18px;text-decoration:none;transition:border-color .18s ease,transform .18s ease} .pnext:hover{border-color:var(--phos);transform:translateY(-2px)} .pnext b{font-family:var(--exp);font-weight:800;font-size:.95rem;color:var(--ink);line-height:1.4} .pnext:hover b{color:var(--phos)} .pnext time{font-family:var(--mono);font-size:.7rem;color:var(--dim)} .pnext .prub{align-self:flex-start} @media(max-width:560px){ .plese{margin-left:0} } /* =================================================================== Batch 5 — Wartung, 500, Link-Liste auf der 404 =================================================================== */ .zstatusbox{border:1px solid var(--gold);border-radius:9px;background:rgba(231,217,126,.05); padding:20px;margin-bottom:clamp(36px,4.5vw,56px);display:flex;flex-direction:column;gap:8px; max-width:52ch} .zeta{font-family:var(--mono);font-size:1.6rem;color:var(--gold);font-variant-numeric:tabular-nums} .zliste--links{margin-bottom:clamp(36px,4.5vw,56px)} .zliste--links li{padding-left:0} .zliste--links li::before{content:none} .zliste--links a{font-family:var(--mono);font-size:.92rem;color:var(--phos);text-decoration:none; border-bottom:1px solid transparent;padding-bottom:2px} .zliste--links a:hover{border-bottom-color:var(--phos)} /* =================================================================== Tastatur-Fokus Der Standard-Ring des Browsers hat auf diesem dunklen Grund nur 1,06:1 -- gemessen bei der Abnahme. Wer mit der Tastatur navigiert, sieht schlicht nicht, wo er steht. WCAG 2.2 verlangt 3:1 fuer den Fokus-Indikator. Gemessen mit Phosphorgruen auf --ground: deutlich darueber. =================================================================== */ :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible{ outline:2px solid var(--phos); outline-offset:3px; border-radius:3px; } /* Auf gefuellten Flaechen (gruener Knopf) waere gruen auf gruen unsichtbar -- dort der dunkle Grund als Ring. */ .btn-go:focus-visible, .tab.on:focus-visible, .zcal-frei.is-on:focus-visible, .zslot.is-on:focus-visible, .cpy:focus-visible, .mini.ok:focus-visible{ outline:2px solid var(--ground); outline-offset:2px; box-shadow:0 0 0 4px var(--phos); } /* Maus-Klicks sollen keinen Ring hinterlassen -- :focus-visible regelt das schon, aber einige aeltere Regeln setzten outline:none. Die hier ueberschreiben. */ a:focus-visible,button:focus-visible{outline-style:solid} /* `:where()` hat Spezifitaet null und verliert gegen eigene Knopf-Regeln. Diese beiden brauchen ihre eigene Zeile -- bei der Abnahme mit 1,19:1 bzw. 1,05:1 gemessen, also praktisch unsichtbar. */ .mini:focus-visible, .zbespoke:focus-visible, .zv-reveal:focus-visible, .onionval:focus-visible, .zcal-arrow:focus-visible, .lswitch:focus-visible{ outline:2px solid var(--ground); outline-offset:2px; box-shadow:0 0 0 4px var(--phos); border-radius:4px; } /* ===== Bestätigung: optionales Email-Backup ===== */ .zcheck{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin:14px 0 4px} .zcheck input{width:17px;height:17px;accent-color:var(--phos);margin-top:2px;flex:0 0 auto} .zcheck span{color:var(--ink);font-size:.94rem} .mailbox{border:1px solid var(--contour);border-radius:9px;background:var(--panel); padding:18px 20px;margin-top:14px;display:flex;flex-direction:column;gap:12px} .mailbox[disabled]{opacity:.45} .mailbox legend{padding:0 6px} .mailbox textarea{font-family:var(--mono);font-size:.78rem} .steps2 li .t{font-weight:400;color:var(--dim2)} .qr img{border-radius:6px;background:var(--ground);image-rendering:pixelated} /* ===== Produktseite ===== */ .pcat{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--phos);text-transform:uppercase} .pn2{font-family:var(--exp);font-weight:800;font-size:clamp(1.4rem,3vw,2.1rem);margin:8px 0 6px;line-height:1.15} .pprice{font-family:var(--mono);font-size:1.15rem;color:var(--gold);margin-bottom:16px} .pdesc{color:var(--dim2);font-size:1rem;line-height:1.75;max-width:56ch;margin-bottom:20px} .pfeats{list-style:none;display:flex;flex-direction:column;gap:8px;margin:10px 0 24px} .pfeats li{color:var(--dim2);font-size:.92rem;padding-left:18px;position:relative} .pfeats li::before{content:"·";position:absolute;left:3px;color:var(--phos);font-weight:700} .steuer .btn{cursor:pointer;font-family:var(--mono);font-size:.76rem;padding:8px 15px;border-radius:5px;border:1px solid var(--contour-mid);background:transparent;color:var(--ink)} .steuer .btn.b-akt{background:var(--phos);color:#04140c;border-color:var(--phos);font-weight:700} /* ===== N1 (16.09.) — Grundregeln Bestätigung + Bestell-Portal ===== Die Bausteine (card2, track, linkbox, mini, cpy …) wurden von bau_portal.py und bau_bestaetigung.py benutzt, hatten aber nie eine Grundregel → Seiten liefen ungestaltet („zerschossen", Azad 15.09.). Nur Tokens aus :root, keine neuen Farben. */ .wrap>.ok{max-width:820px} .ok .tick{width:44px;height:44px;border-radius:50%;border:1px solid var(--phos);color:var(--phos); display:grid;place-items:center;font-size:1.3rem;margin-bottom:18px;box-shadow:0 0 22px rgba(43,245,152,.15)} .ok h1{font-family:var(--exp);font-weight:800;font-size:clamp(1.7rem,4.2vw,2.7rem);line-height:1.08;margin:0 0 14px;text-wrap:balance} .ok .intro{color:var(--dim2);font-size:1rem;line-height:1.65;max-width:62ch;margin:0 0 26px} .ok h2,.card2 h2{font-family:var(--exp);font-weight:800;font-size:1.02rem;letter-spacing:.02em;margin:0 0 14px} .linkbox{border:1px solid var(--contour-mid);border-radius:9px;background:var(--panel);padding:20px 22px;margin:0 0 18px} .linkbox .lbl{margin:0 0 8px} .linkbox .val{font-family:var(--mono);font-size:clamp(.86rem,2.2vw,1.05rem);color:var(--phos);word-break:break-all; background:var(--ground);border:1px solid var(--contour);border-radius:6px;padding:12px 14px} .linkbox .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .cpy,.mini,.ghost2{font-family:var(--mono);font-size:.8rem;font-weight:600;border-radius:4px;padding:10px 16px; cursor:pointer;min-height:40px;display:inline-flex;align-items:center;gap:6px;transition:background .15s,border-color .15s,color .15s} .cpy{background:var(--phos);color:#04140c;border:1px solid var(--phos)} .cpy.done{background:transparent;color:var(--phos)} .mini,.ghost2{background:transparent;color:var(--ink);border:1px solid var(--contour-mid)} .mini:hover,.ghost2:hover{border-color:var(--phos);color:var(--phos)} .mini{min-height:34px;padding:7px 12px} .ghost2:focus-visible,.mini:focus-visible{outline:2px solid var(--ground);outline-offset:2px;box-shadow:0 0 0 4px var(--phos)} .ok>.warn{border-left:3px solid var(--gold);background:rgba(231,217,126,.06);border-radius:6px;padding:13px 16px; font-size:.9rem;line-height:1.6;color:var(--ink);margin:0 0 30px} .ok>.warn b{color:var(--gold)} .ok .next{border-top:1px solid var(--contour);padding-top:26px;margin-top:30px} .steps2{list-style:none;counter-reset:s2;display:flex;flex-direction:column;gap:10px} .steps2 li{counter-increment:s2;display:flex;gap:12px;align-items:baseline} .steps2 li::before{content:counter(s2,decimal-leading-zero);font-family:var(--mono);font-size:.72rem;color:var(--phos);flex:0 0 auto} .qr{display:flex;gap:18px;align-items:center;flex-wrap:wrap;border:1px solid var(--contour);border-radius:9px; background:var(--panel);padding:16px 18px;margin-top:30px} .qr .d{flex:1 1 240px;color:var(--dim2);font-size:.9rem;line-height:1.6} .qr .d b{color:var(--ink)} /* Portal */ .card2{border:1px solid var(--contour);border-radius:9px;background:var(--panel);padding:20px 22px;margin:0 0 16px} .card2.hot{border-color:var(--contour-mid);box-shadow:0 0 0 1px rgba(43,245,152,.06),0 12px 40px rgba(0,0,0,.35)} .page .ph1+.zhint{margin:0 0 22px} .track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .tr{border:1px solid var(--contour);border-radius:6px;padding:12px 12px 11px;position:relative;background:var(--ground)} .tr .n{font-family:var(--mono);font-size:.66rem;color:var(--dim);letter-spacing:.08em} .tr .t{font-weight:600;margin:3px 0 2px;color:var(--dim2)} .tr .d{font-family:var(--mono);font-size:.7rem;color:var(--dim)} .tr.done{border-color:var(--contour-mid)} .tr.done .n,.tr.done .t{color:var(--phos)} .tr.done .n::after{content:" \2713"} .tr.now{border-color:var(--phos);box-shadow:0 0 18px rgba(43,245,152,.14)} .tr.now .t{color:var(--ink)} .tr.now .d{color:var(--gold)} @media (max-width:560px){.track{grid-template-columns:1fr 1fr}} .live{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.74rem;color:var(--dim2)} .dotp{width:8px;height:8px;border-radius:50%;background:var(--phos);box-shadow:0 0 0 0 rgba(43,245,152,.6);animation:dotp 1.8s ease-out infinite} @keyframes dotp{to{box-shadow:0 0 0 10px rgba(43,245,152,0)}} @media (prefers-reduced-motion:reduce){.dotp{animation:none}} /* R7-01 (16.09.): Fortschritt als Liste; aktueller Schritt über Form (2px + Marke), nicht nur Farbe */ ol.track{list-style:none;margin:0;padding:0} .tr .n,.tr .t,.tr .d{display:block} .tr.now{border-width:2px;padding:11px 11px 10px} .tr.now .n::after{content:" \25B8 jetzt";color:var(--gold)} :lang(en) .tr.now .n::after{content:" \25B8 now"} .tr .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* R7-02: Staging-Etikett fängt keine Klicks und verdeckt weniger */ .stg{pointer-events:none;opacity:.55} /* Farbwelt H1 (fest) */ :root{--phos:#00ff41;--ink:#E9EFEC;--dim2:#c7d4cc;--dim:#9db3a7;--ground:#050805;--panel:#0a0f0a;--panel2:#0d130d;--contour:#0e5d22;--contour-mid:#1a9e3a;--gold:#e8c766;--zero-accent:#00ff41;--zero-fg:#E9EFEC;--zero-fg-muted:#c7d4cc;--zero-fg-dim:#9db3a7;--zero-bg:#050805;--zero-bg-alt:#0a0f0a;--zero-border:#0e5d22;--zero-border-mid:#1a9e3a;--mono:'IBM Plex Mono',ui-monospace,'JetBrains Mono',monospace;--sans:'IBM Plex Sans',system-ui,sans-serif;--exp:'Archivo Expanded','IBM Plex Sans',system-ui,sans-serif;--zero-font:'IBM Plex Sans',system-ui,sans-serif;--zero-mono:'IBM Plex Mono',ui-monospace,'JetBrains Mono',monospace;--zero-sans:'IBM Plex Sans',system-ui,sans-serif} p,li,td,dd,label,.sub,.fdesc,.card .cn,.mnote,.hint,.psub,.pdesc,input,select,textarea{text-shadow:none !important} /* Schrift-Set B (fest) */ body{font-family:'IBM Plex Sans',system-ui,sans-serif !important}h1,h2,h3,h4,legend,.ptitle,.fname,.kh,.mn,.cn,.pn2,.wz-card__title,.brand,.logo,.b{font-family:'Archivo Expanded','IBM Plex Sans',system-ui,sans-serif !important;font-weight:800 !important;letter-spacing:-0.01em !important}.termbox,.scrtext,.sig,.hint,.paynote,.crumb,.pn,.cat,.cp,.price,.mp,.cprice,.cart-total,.tab,.step,.badge,.topbar,.lang,.pay,.stg,.zl-cell,.logo .t,.wz-card__price,.wz-field__label,.wz-steps,.wz-step,.wz-cart-grand,.wz-cart-vat,.wz-card__included-tag,.wz-card__rec,.wz-mod-fine,input,select,textarea,code,kbd,pre,.mono{font-family:'IBM Plex Mono',ui-monospace,'JetBrains Mono',monospace !important}p,li,dd,.sub,.fdesc,.psub,.pdesc,.wz-card__desc,.wz-field__hint{line-height:1.62 !important} /* ---- Ergänzungen fürs Theme (von Hand, bauen.py hängt sie an) ---- Zweck: gleiche Optik wie das Staging, aber mit zugänglichem Markup und echten WordPress-Bausteinen. */ /* Burger/Schließen sind