:root{--ink:#1f1d1f;--bird:#2c2a2d;--worm:#e2531f;--teal:#1e899e;--paper:#faf8f4;--muted:#6b6560;--line:#e4dfd8;--bw:31.6cm;--wormw:calc(var(--bw) * .049);--shade:#efeae2;--pad:max(clamp(20px,6vw,96px),calc((100vw - 1280px) / 2))}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:'Source Sans 3',system-ui,sans-serif;font-size:19px;line-height:1.55;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:8px 14px;z-index:20}
h1,blockquote,.label,.brand,.cue,.bgw,.big,.top a{font-family:Barlow,system-ui,sans-serif}
.top{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad) 26px;pointer-events:none;background:linear-gradient(var(--paper) 72%,rgba(250,248,244,0))}
.top>*{pointer-events:auto}
.brand{font-weight:800;font-size:20px;letter-spacing:.02em;text-decoration:none;color:var(--ink);background:var(--paper);padding:6px 10px;border-radius:3px}
.brand b{color:var(--worm)}
.top .c{font-weight:700;font-size:15px;text-decoration:none;background:var(--ink);color:#fff;padding:9px 16px;border-radius:3px}
.top .c:hover{background:var(--teal)}
/* hero */
.hero{position:relative;padding-top:clamp(110px,14vh,150px);text-align:center}
.eyebrow{font-family:Barlow,sans-serif;font-weight:700;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal)}
h1{font-weight:800;font-size:clamp(52px,10vw,148px);line-height:.95;letter-spacing:-.03em;margin-top:14px}
.sub{max-width:30em;margin:20px auto 0;padding:0 16px;color:var(--muted);font-size:clamp(18px,1.6vw,21px)}
.badge{position:relative;width:var(--bw);max-width:none;margin:clamp(24px,5vh,56px) 0 0 50%;transform:translateX(-50%);display:block}
.badge svg{display:block;width:100%;height:auto;overflow:visible}
.cue{position:absolute;left:50%;transform:translateX(-50%);bottom:-70px;font-weight:700;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
/* worm overlay */
#worm{position:fixed;left:0;top:0;pointer-events:none;z-index:0;overflow:visible}
#worm path{fill:none;stroke:var(--worm);stroke-linecap:round;stroke-linejoin:round}
main{position:relative;overflow-x:clip}footer{position:relative}
/* quote sections */
.q{position:relative;min-height:92vh;display:flex;align-items:center;padding:12vh var(--pad)}
.q .in{position:relative;z-index:2;max-width:640px}
.q.r{justify-content:flex-end}
.label{font-weight:700;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:18px}
blockquote{font-weight:800;font-size:clamp(38px,5.4vw,78px);line-height:1.02;letter-spacing:-.02em}
.after{display:block;margin-top:16px;font-size:15px;color:var(--muted);font-style:italic}
.q p.line{margin-top:22px;font-size:clamp(19px,1.7vw,23px);max-width:28em}
.bgw{position:absolute;z-index:1;top:50%;left:0;white-space:nowrap;font-weight:800;font-size:clamp(120px,22vw,340px);line-height:1;letter-spacing:-.03em;color:var(--shade);transform:translate3d(var(--x,0),-50%,0);will-change:transform;user-select:none}
.reveal{opacity:.35;transform:translateY(40px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.on{opacity:1;transform:none}
/* contact */
.contact{min-height:96vh}
.big{font-weight:700;font-size:clamp(26px,3.4vw,44px);line-height:1.3;margin-top:28px}
.big a{text-decoration:none;border-bottom:4px solid var(--teal)}
.big a:hover{color:var(--teal);border-color:var(--teal)}
.addr{margin-top:20px;color:var(--muted)}




@media (max-width:760px){
  :root{--pad:20px;--bw:calc(100vw - 40px)}
  .q.l .in{padding-right:36px}.q.r .in{padding-left:36px}
  .brand{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.bgw{transform:translate3d(0,-50%,0)}}
#worm path{stroke-width:var(--wormw)}
#worm path.head{fill:var(--worm);stroke:none}
.hero .lift{will-change:transform,opacity}



/* unified site footer (same on every page), modelled on apple.com / proton.me */
footer.site{position:relative;z-index:2;background:#f9f6f1;color:#1f1d1f;font-family:'Source Sans 3',system-ui,sans-serif;font-weight:400;font-size:13px;line-height:1.5;letter-spacing:0;text-transform:none;padding:0 max(clamp(20px,6vw,96px),calc((100vw - 1280px) / 2)) 109px}
footer.site .fr{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;border-top:1px solid #e0d9ce;padding-top:42px}
footer.site p{margin:0}
footer.site .fl{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:2px 0}
footer.site .fl a{color:#1f1d1f;text-decoration:none;white-space:nowrap}
footer.site .fl a:hover{text-decoration:underline;color:#1e899e}
footer.site .fl span{color:#b9b2a8;margin:0 10px}
footer.site .cty{color:#1f1d1f}
@media (max-width:760px){footer.site{padding:0 20px 189px}footer.site .fr{padding-top:72px;border-top:0}footer.site .cty{order:-1;width:100%;padding-bottom:6px;border-bottom:1px solid #e0d9ce;margin-bottom:6px}}
/* logo text flush with content and footer */
.top .brand{margin-left:-10px}

/* footer: mobile line break after "Use of Cookies", no extra scroll space */
footer.site .brk{display:none}
@media (max-width:760px){
 footer.site{padding:0 20px calc(40px + env(safe-area-inset-bottom,0px))}
 footer.site .fr{padding-top:40px}
 footer.site .brk{display:block;flex-basis:100%;height:0}
 footer.site .fl .sb{display:none}
}

/* teal accent (Milan): brand dot + scroll hint */
.brand .dot{display:inline-block;width:.27em;height:.27em;border-radius:50%;background:var(--teal);margin-left:.1em;vertical-align:baseline}
.scroll{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:5;width:48px;height:48px;margin-left:-24px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(30,137,158,.28);transition:opacity .5s ease,transform .5s ease;animation:bob 1.9s ease-in-out infinite}
.scroll svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.scroll.gone{opacity:0;pointer-events:none;animation:none;transform:translateY(16px)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.scroll{animation:none}}
@media (min-width:761px){.scroll{left:auto;right:var(--pad);margin-left:0;bottom:32px}}
/* stable heights: in in-app browsers and iOS Chrome, vh changes when the toolbars hide/show, which makes the page jump.
   svh = the small (always-visible) viewport height and never changes while scrolling */
@supports (height:1svh){
.hero{padding-top:clamp(110px,14svh,150px)}
.badge{margin-top:clamp(24px,5svh,56px)}
.q{min-height:92svh;padding-top:12svh;padding-bottom:12svh}
.contact{min-height:96svh}
}
/* v40: bird, ring and worm drawn in one SVG inside the page (scrolls natively) */
#worm{position:absolute;left:0;top:0;z-index:0}
#worm path.bird{fill:var(--bird);stroke:none}
#worm path.bh{fill:var(--worm);stroke:none}
.badge.live svg{visibility:hidden}
/* v41: language switch, drawing appears only when ready */
.top .nav{display:flex;align-items:center;gap:8px}
.top .lng{font-weight:700;font-size:12px;letter-spacing:.08em;white-space:nowrap;text-decoration:none;color:var(--ink);background:var(--paper);padding:9px 10px;border-radius:3px}
.top .lng:hover,.top .lng:focus-visible{color:var(--teal)}
.js .badge svg{visibility:hidden}
#worm{opacity:0;transition:opacity .35s ease}
#worm.ready{opacity:1}
#worm .or,#worm .oh path{fill:var(--worm);stroke:none}

/* v45: Sicherheitstrainings block on the home page, in the training CI (teal) */
#training blockquote{color:var(--teal)}
.q .links{margin-top:26px;display:grid;gap:22px;max-width:30em}
.q .links a{display:block;text-decoration:none;color:var(--ink)}
.q .links a b{display:inline-block;font-family:Barlow,system-ui,sans-serif;font-weight:800;font-size:clamp(26px,2.6vw,34px);line-height:1.05;letter-spacing:-.01em;border-bottom:.12em solid var(--teal);padding-bottom:.04em}
.q .links a span{display:block;font-size:17px;color:var(--muted);margin-top:8px}
.q .links a:hover b,.q .links a:focus-visible b{color:var(--teal)}

/* v46: link check on the home page */
.pruef .small a{color:var(--teal);text-decoration:none;border-bottom:2px solid var(--teal);font-weight:600}

/* v47: PHP-Check in the hero (time-critical, php2shell) */
.hero-check{position:relative;z-index:3;max-width:640px;margin:clamp(28px,4vh,44px) auto 0;padding:0 16px;text-align:left}
.hc-label{font-family:Barlow,system-ui,sans-serif;font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.hc-text{margin-top:8px;font-size:17px;line-height:1.45;color:var(--ink)}
#hpf{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
#hpf input{flex:1 1 240px;min-width:0;font:inherit;font-size:18px;padding:13px 16px;border:2px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
#hpf input:focus{border-color:var(--teal);outline:none}
#hpf button{font-family:Barlow,system-ui,sans-serif;font-weight:700;font-size:16px;letter-spacing:.04em;padding:13px 22px;border:0;border-radius:6px;background:var(--teal);color:#fff;cursor:pointer}
#hpf button:disabled{opacity:.6;cursor:wait}
#hpout{margin-top:16px}
#hpout .verdict{font-size:clamp(20px,2.2vw,26px);margin-top:14px}
.hc-more{margin-top:12px;font-size:14px;color:var(--muted)}
.hc-more a{color:var(--teal);text-decoration:none;border-bottom:2px solid var(--teal);font-weight:600}

/* Leak-Check im Hero (gleiche Form wie der PHP-Check) */
#lf{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
#lf input{flex:1 1 240px;min-width:0;font:inherit;font-size:18px;padding:13px 16px;border:2px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
#lf input:focus{border-color:var(--teal);outline:none}
#lf button{font-family:Barlow,system-ui,sans-serif;font-weight:700;font-size:16px;letter-spacing:.04em;padding:13px 22px;border:0;border-radius:6px;background:var(--teal);color:#fff;cursor:pointer}
#lf button:disabled{opacity:.6;cursor:wait}
#lout{margin-top:16px}
#lout .verdict{font-size:clamp(20px,2.2vw,26px);margin-top:14px}

@media (max-width:560px){.top .lng{font-size:11px;letter-spacing:.03em;padding:9px 5px}.top .nav{gap:4px}.top .lng.ext{display:none}}