/* ---------------------------------------------------------------
   Tokens. Colour names are German because the studio is; they carry
   no brand name, so a rename touches nothing here.
   --------------------------------------------------------------- */
:root{
  --papier:#EDEEE9;
  --tinte:#15181B;
  --email:#1A4C8B;
  --email-hell:#AECBEA;   /* 5.11:1 on --email — small text passes AA */
  --email-matt:#A9C7E9;   /* 4.91:1 — the quietest tint still allowed */
  --kreide:#FCFCFA;
  --grau:#70757B;

  --mass: clamp(1.25rem, 5vw, 3.5rem);   /* page gutter */
  --band: clamp(3.5rem, 9vw, 7rem);      /* vertical rhythm between bands */
}

@font-face{font-family:"Bricolage Grotesque";src:url("/assets/fonts/BricolageGrotesque/BricolageGrotesque-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("/assets/fonts/BricolageGrotesque/BricolageGrotesque-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("/assets/fonts/BricolageGrotesque/BricolageGrotesque-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("/assets/fonts/PublicSans/PublicSans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("/assets/fonts/PublicSans/PublicSans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--email);
  color:var(--kreide);
  font:400 clamp(1rem,.55vw + .9rem,1.19rem)/1.6 "Public Sans",system-ui,sans-serif;
  overflow-x:hidden;
}
h1,h2,h3{font-family:"Bricolage Grotesque","Public Sans",sans-serif;font-weight:800;
         line-height:1;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:0;background:var(--kreide);color:var(--email);
      padding:.75rem 1.1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:3px solid var(--kreide);outline-offset:3px}

/* --------------------------- header --------------------------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;
     justify-content:space-between;gap:1rem;padding:1.1rem var(--mass);
     mix-blend-mode:normal}
.bar__mark{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.2rem;
           letter-spacing:.15em;text-decoration:none;
           opacity:0;transform:translateY(-.4rem);
           transition:opacity .4s ease,transform .4s ease}
.bar--past .bar__mark{opacity:1;transform:none}

/* Once past the opening stage the bar must be opaque, or scrolling text
   passes straight through the wordmark. */
.bar--past{background:var(--email)}

/* Legal pages sit on paper: the bar inverts and is always present, since
   there is no opening stage to scroll past. */
.page--light .bar{background:var(--papier);border-bottom:1px solid #D8DAD3}
.page--light .bar__mark{opacity:1;transform:none;color:var(--tinte)}
.page--light .bar__nav a{color:#4A4F55}
.page--light .bar__nav a:hover{color:var(--tinte)}
.page--light :focus-visible{outline-color:var(--email)}
.bar__nav{display:flex;flex-wrap:wrap;gap:clamp(.75rem,2vw,1.75rem);font-size:.9rem}
.bar__nav a{color:#C3D6EE;text-decoration:none;padding:.4rem .1rem}
.bar__nav a:hover{color:var(--kreide)}
@media (max-width:36rem){ .bar__nav{display:none} }

/* --------------------------- stage ---------------------------- */
.stage{position:relative;min-height:100svh;display:grid;place-items:center;
       padding:var(--band) var(--mass);overflow:hidden}
.stage__texture{position:absolute;right:-14%;top:-34%;font-family:"Bricolage Grotesque",sans-serif;
                font-weight:700;font-size:min(150vh,150vw);line-height:.7;color:#fff;opacity:.085;
                user-select:none;pointer-events:none}
.stage__inner{position:relative;z-index:2;text-align:center;max-width:22ch}
.stage__mark{font-size:clamp(3.5rem,17vw,13rem);letter-spacing:.03em;line-height:.9}
.stage__tag{margin-top:1.1rem;color:#CFDEEF;font-size:clamp(1rem,1.6vw,1.3rem)}
.stage__hint{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);
             font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--email-hell)}

/* fixed background glyph behind the scrolling content */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.field__glyph{position:absolute;left:-18%;bottom:-46%;font-family:"Bricolage Grotesque",sans-serif;
              font-weight:700;font-size:min(135vh,135vw);line-height:.7;color:#fff;opacity:.06}

/* --------------------------- facts ---------------------------- */
.facts{position:relative;z-index:1}
.fact{position:relative;min-height:88svh;display:flex;flex-direction:column;justify-content:center;
      padding:var(--band) var(--mass);max-width:60rem}
.fact__kicker{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
              color:var(--email-hell);margin-bottom:1.1rem}
.fact__head{font-size:clamp(2rem,6.2vw,4.6rem);max-width:15ch}
.fact__body{margin-top:1.3rem;max-width:44ch;color:#CFDEEF;font-size:clamp(1rem,1.5vw,1.25rem)}
.fact__count{position:absolute;right:var(--mass);bottom:2rem;font-size:.7rem;
             letter-spacing:.16em;color:var(--email-matt)}
@media (max-width:36rem){ .fact__count{display:none} }

/* ------------------------- process ---------------------------- */
.proc{position:relative;z-index:1;background:var(--papier);color:var(--tinte);
      padding:var(--band) var(--mass)}
.proc__head{font-size:clamp(1.9rem,4.4vw,3rem);margin-bottom:2.5rem}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:2rem;
       grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.step__n{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.9rem;
         color:var(--email);padding-bottom:.6rem;margin-bottom:.9rem;border-bottom:2px solid #C9CBC4}
.step__head{font-family:"Public Sans",sans-serif;font-weight:600;font-size:1.05rem;
            line-height:1.3;letter-spacing:0;margin-bottom:.45rem}
.step__body{font-size:.95rem;color:#4A4F55}

/* -------------------------- about ----------------------------- */
.about{position:relative;z-index:1;padding:var(--band) var(--mass);max-width:52rem}
.about__head{font-size:clamp(1.9rem,4.4vw,3rem);margin-bottom:1.4rem}
.about__body{color:#CFDEEF;max-width:52ch}
.about__body + .about__body{margin-top:1rem}

/* --------------------------- cta ------------------------------ */
.cta{position:relative;z-index:1;padding:var(--band) var(--mass) calc(var(--band) * 1.2)}
.cta__head{font-size:clamp(2.2rem,7vw,4.6rem)}
.cta__body{margin-top:1.1rem;max-width:40ch;color:#CFDEEF}
.btn{display:inline-block;margin-top:1.8rem;background:var(--kreide);color:var(--email);
     font-weight:600;font-size:1rem;text-decoration:none;padding:1rem 1.9rem;border-radius:2px}
.btn:hover{background:#fff}
.cta__note{margin-top:1rem;font-size:.85rem;color:var(--email-hell)}

/* -------------------------- legal ----------------------------- */
.legal{position:relative;z-index:1;background:var(--papier);color:var(--tinte);
       padding:calc(var(--band) + 3rem) var(--mass) var(--band);min-height:100svh}
.legal__head{font-size:clamp(1.9rem,4.4vw,3rem);margin-bottom:1.2rem}
.legal__intro{max-width:60ch;color:#4A4F55}
.legal__note{margin-top:1rem;max-width:60ch;padding:.9rem 1.1rem;
             border-left:3px solid var(--email);background:#E4E6E0;font-size:.95rem}
.legal__sub{font-size:1.15rem;margin-top:2rem;margin-bottom:.5rem}
.legal__p{max-width:60ch;color:#4A4F55}
.legal__list{margin:2rem 0 0;display:grid;grid-template-columns:minmax(11rem,auto) 1fr;gap:.6rem 1.5rem}
.legal__list dt{font-weight:600}
.legal__list dd{margin:0;color:#4A4F55}
@media (max-width:36rem){ .legal__list{grid-template-columns:1fr;gap:.15rem 0}
  .legal__list dd{margin-bottom:.8rem} }

/* -------------------------- footer ---------------------------- */
.foot{position:relative;z-index:1;background:var(--tinte);color:#A8AEB4;
      display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;
      padding:2rem var(--mass);font-size:.85rem}
.foot__nav{display:flex;gap:1.5rem}
/* WCAG 2.2 · 2.5.8 — every target at least 24x24 CSS px */
.foot__nav a{color:var(--email-hell);display:inline-flex;align-items:center;min-height:24px}

/* ------------------------- motion ----------------------------- */
[data-reveal]{opacity:0;transform:translateY(1.4rem);
              transition:opacity .7s ease,transform .7s ease}
[data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  [data-reveal]{opacity:1;transform:none}
  .bar__mark{opacity:1;transform:none}
}

/* ------------------------- Sorgfalt --------------------------- */
.care__analogy{max-width:56ch;margin:1.6rem 0 0;padding:1.1rem 1.3rem;
               background:#E4E6E0;border-left:3px solid var(--email);font-size:1.02rem}
.care__scroll{margin-top:2.4rem;overflow-x:auto}
.care{border-collapse:collapse;width:100%;min-width:44rem;font-size:.93rem;text-align:left}
.care th,.care td{padding:.85rem 1rem;vertical-align:top;border-top:1px solid #D8DAD3}
.care thead th{border-top:0;border-bottom:2px solid var(--tinte);font-size:.72rem;
               letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.care tbody th{font-weight:600;width:15rem}
.care tbody th a{color:var(--email)}
.care__ref{display:block;margin-top:.2rem;font-weight:400;font-size:.8rem;color:#5C6167}
.care td{color:#4A4F55}
.care__done{color:var(--tinte)}
.care__source{margin-top:1.4rem;font-size:.88rem;color:#5C6167}

.care__src{display:inline-block;margin-left:.5rem;padding:.05rem .4rem;border:1px solid #B9BCB4;
           border-radius:2px;font-size:.65rem;letter-spacing:.08em;color:#5C6167;vertical-align:1px}