/* ============================================================
   Payment Checkout: shared shell
   Everything every page has in common. Page-specific rules stay
   inline in each page, so a change to the frame happens once here
   rather than once per file.
   ============================================================ */

/* ---------- font ----------
   Inter is served from this origin rather than from Google's CDN.
   Loading it from fonts.googleapis.com sends every visitor's IP
   address to Google before they have agreed to anything, which is
   the specific issue German warning letters have targeted. Serving
   the files ourselves removes the third-party request entirely.

   One variable font covers every weight the site uses, so this is
   also fewer requests than the four static weights it replaces.
   The latin-ext file is only fetched when a character in its range
   actually appears, so English pages never download it. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- tokens ---------- */
:root{
  --rail:#f7f5f1;
  --rail-hover:#efece5;
  --paper:#ffffff;
  --wash:#fbfaf7;

  --line:#e8e5df;
  --line-soft:#f0ede7;

  --text:#1a1a1a;
  --text-dim:#5c5a55;
  --text-faint:#8b8a86;

  --accent:#0e9b83;
  --accent-dim:#0a7d68;
  --accent-tint:#e8f6f2;
  --accent-tint-2:#c6e5db;

  /* Provider hues. Desaturated and warmed to sit in this palette rather
     than reproducing each PSP's brand colour, which would imply an
     affiliation the legal notice explicitly disclaims. */
  --psp-adyen:#0a7d68;
  --psp-stripe:#5457a6;
  --psp-paypal:#2f5d8a;

  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --rail-w:264px;
  --measure:1440px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ---------- shell ---------- */
.app{
  display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);
  min-height:100vh;
  transition:grid-template-columns .22s ease;
}
.app[data-nav="closed"]{grid-template-columns:0 minmax(0,1fr)}

.rail{
  background:var(--rail);border-right:1px solid var(--line);
  overflow:hidden;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.rail-inner{
  width:var(--rail-w);display:flex;flex-direction:column;height:100%;
  overflow-y:auto;
}
.rail-inner::-webkit-scrollbar{width:9px}
.rail-inner::-webkit-scrollbar-thumb{
  background:var(--line);border-radius:8px;border:3px solid var(--rail);
}

.rail-brand{
  display:flex;align-items:center;gap:10px;
  padding:18px 20px 14px;text-decoration:none;
}
.rail-mark{width:22px;height:22px;flex:none}
.rail-brand .name{
  font-size:15.5px;font-weight:600;letter-spacing:-.025em;color:var(--text);
  line-height:1.2;
}
.rail-brand .sub{
  display:block;font-size:11.5px;color:var(--text-faint);font-weight:400;
  letter-spacing:0;
}

.rail-search{padding:4px 16px 14px}
.rail-search input{
  width:100%;font-family:var(--font);font-size:13.5px;color:var(--text);
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:8px 11px;outline:none;
  transition:border-color .14s,box-shadow .14s;
}
.rail-search input::placeholder{color:var(--text-faint)}
.rail-search input:focus{
  border-color:var(--accent-tint-2);
  box-shadow:0 0 0 3px var(--accent-tint);
}

.rail-group{padding:0 10px 6px}
.rail-label{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);padding:12px 10px 6px;
}
.rail-link{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:8px;
  font-size:14px;color:var(--text-dim);text-decoration:none;
  transition:background .14s,color .14s;
}
.rail-link:hover{background:var(--rail-hover);color:var(--text)}
.rail-link[aria-current="page"]{
  background:var(--accent-tint);color:var(--accent-dim);font-weight:600;
}
.rail-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot-adyen{background:var(--psp-adyen)}
.dot-stripe{background:var(--psp-stripe)}
.dot-paypal{background:var(--psp-paypal)}
.rail-link .ico{width:16px;height:16px;flex:none;color:var(--text-faint)}
.rail-link:hover .ico{color:var(--text-dim)}

.rail-link.soon{color:var(--text-faint);cursor:default;pointer-events:none}
.rail-link.soon .dot{opacity:.35}
.rail-link.soon .ico{opacity:.5}
.soon-tag{margin-left:auto;font-size:10.5px;color:var(--text-faint)}

.rail-foot{
  margin-top:auto;padding:14px 20px 18px;
  border-top:1px solid var(--line-soft);
}
.rail-foot a{
  display:block;font-size:13px;color:var(--text-faint);text-decoration:none;
  margin-bottom:6px;transition:color .14s;
}
.rail-foot a:hover{color:var(--accent-dim)}

/* ---------- top bar ---------- */
.col{display:flex;flex-direction:column;min-width:0}
.topbar{
  position:sticky;top:0;z-index:20;
  height:57px;padding:0 26px;
  background:rgba(255,255,255,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
/* Same measure as the content, so the toggle, the breadcrumb and the
   headline all share one left edge rather than three. */
.topbar-in{
  max-width:var(--measure);margin:0 auto;width:100%;height:100%;
  display:flex;align-items:center;gap:14px;
}
.nav-toggle{
  width:32px;height:32px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;border-radius:7px;
  color:var(--text-dim);cursor:pointer;
  transition:background .14s,border-color .14s,color .14s;
}
.nav-toggle:hover{background:var(--rail);border-color:var(--line);color:var(--text)}
.nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-toggle svg{width:17px;height:17px}

.crumb{font-size:13.5px;color:var(--text-dim)}
.crumb b{color:var(--text);font-weight:600}

.mode{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--text-faint);
}
.pip{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}

/* ---------- content ---------- */
.content{padding:36px 26px 80px}
.measure{max-width:var(--measure);margin:0 auto;width:100%}

h1{
  margin:0 0 18px;
  font-size:clamp(30px,3.4vw,40px);
  font-weight:600;letter-spacing:-.04em;line-height:1.1;
  max-width:18ch;
}
h1 span{color:var(--accent-dim)}

.lede{
  margin:0;font-size:17.5px;line-height:1.62;color:var(--text-dim);
  max-width:52ch;
}

.sec-label{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);margin:0 0 14px;
}

.psp-adyen{color:var(--psp-adyen)}
.psp-stripe{color:var(--psp-stripe)}
.psp-paypal{color:var(--psp-paypal)}

/* ---------- contact ---------- */
.contact{
  display:flex;align-items:center;justify-content:space-between;
  gap:22px;flex-wrap:wrap;
  margin-top:44px;padding:22px 24px;
  background:var(--accent-tint);border:1px solid var(--accent-tint-2);
  border-radius:12px;
}
.contact-copy{flex:1 1 280px;min-width:0}
.contact-copy h2{
  margin:0 0 5px;font-size:16px;font-weight:600;
  letter-spacing:-.02em;line-height:1.3;
}
.contact-copy p{margin:0;font-size:14px;color:var(--text-dim);line-height:1.55}
.contact-cta{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  background:var(--accent-dim);border:1px solid var(--accent-dim);
  font-size:14px;font-weight:600;padding:11px 18px;border-radius:8px;
  text-decoration:none;
  transition:background .16s,box-shadow .16s,transform .1s;
}
/* Colour pinned rather than inherited: an ancestor rule overriding link
   colour would otherwise blank out the label and the mark. */
.contact-cta,.contact-cta:link,.contact-cta:visited{color:#fff}
.contact-cta:hover{background:#08654f;box-shadow:0 10px 24px -10px rgba(10,125,104,.5)}
.contact-cta:active{transform:translateY(1px)}
.contact-cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.contact-cta svg{width:16px;height:16px;flex:none;fill:#fff}

/* ---------- legal ---------- */
/* Spans the full measure and splits into two columns, so it uses the page
   width without producing 200-character lines at 11.5px. */
.legal{
  margin:52px 0 0;padding-top:22px;border-top:1px solid var(--line-soft);
  font-size:11.5px;line-height:1.75;color:var(--text-faint);
  max-width:none;column-count:2;column-gap:56px;
}
@media (max-width:860px){
  .legal{column-count:1;max-width:70ch}
}
.legal strong{color:var(--text-dim);font-weight:600}
.legal span{display:block;margin-top:7px}

/* Footer links sit under the legal notice on every page. The Impressum
   and privacy policy have to be reachable from anywhere on the site, so
   they belong in the shared shell rather than in each page. */
.footlinks{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line-soft);
  display:flex;gap:18px;flex-wrap:wrap;
  font-size:12px;color:var(--text-faint);
}
.footlinks a{color:var(--text-faint);text-decoration:none}
.footlinks a:hover{color:var(--accent-dim);text-decoration:underline}

/* ---------- mobile shell ---------- */
.scrim{
  display:none;position:fixed;inset:0;z-index:29;
  background:rgba(26,26,26,.34);
  opacity:0;transition:opacity .2s;
}

@media (max-width:900px){
  .app,.app[data-nav="closed"]{grid-template-columns:minmax(0,1fr)}
  .rail{
    position:fixed;top:0;left:0;z-index:30;
    width:var(--rail-w);
    transform:translateX(-100%);
    transition:transform .24s ease;
    box-shadow:0 0 40px rgba(26,26,26,.14);
  }
  .app[data-nav="open"] .rail{transform:translateX(0)}
  .app[data-nav="open"] .scrim{display:block;opacity:1}
  .content{padding:32px 22px 64px}
  .topbar{padding:0 18px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   ON THIS PAGE
   Anchor nav pinned beside long content. Fills the width that a
   readable prose column leaves over, and gives a long reference
   page a spine you can navigate without scrolling blind.
   ============================================================ */
.with-toc{
  display:grid;grid-template-columns:minmax(0,1fr) 216px;
  gap:56px;align-items:start;
}
.toc{position:sticky;top:81px}
.toc-title{
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);margin:0 0 10px;
}
.toc a{
  display:block;font-size:13px;line-height:1.4;
  color:var(--text-dim);text-decoration:none;
  padding:6px 0 6px 13px;
  border-left:2px solid var(--line);
  transition:color .14s,border-color .14s;
}
.toc a:hover{color:var(--text);border-left-color:var(--text-faint)}
.toc a.sub{padding-left:26px;font-size:12.5px}
.toc a.active{
  color:var(--accent-dim);border-left-color:var(--accent);font-weight:600;
}
.toc a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Headings must clear the sticky top bar when jumped to. */
:target,h2[id],h3[id]{scroll-margin-top:78px}

@media (max-width:1100px){
  .with-toc{grid-template-columns:1fr;gap:0}
  .toc{display:none}
}

/* ============================================================
   CODE
   Light, to sit in the shell rather than punching a dark hole in
   it. Colours are muted so a long payload does not read as
   confetti.
   ============================================================ */
.code{
  margin:0;padding:16px 18px;overflow-x:auto;
  background:var(--wash);border:1px solid var(--line);border-radius:10px;
  font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.65;color:var(--text-dim);
  tab-size:2;
}
.code .k{color:var(--text)}
.code .s{color:var(--accent-dim)}
.code .n{color:#5457a6}
.code .b{color:#5457a6}

/* Legal links in the rail footer. Slightly separated from the contact
   links above, because they are obligations rather than invitations. */
.rail-foot .rail-legal{
  display:inline-block;margin-right:14px;margin-bottom:0;
  font-size:12px;
}
.rail-foot .rail-legal:first-of-type{margin-top:8px}