/* DRAFT — not legal advice, review before publishing.
   Shared look for the four legal pages (terms, privacy, refund, impressum).
   Tokens, fonts, header, language pill and buttons are copied from the home page (v7, "crayon stickers on paper"),
   so the pages look like part of the main site. Placeholders in [SQUARE_BRACKETS] are highlighted by legal.js. */
:root{
  --page:#fbf8f3; --surface:#ffffff; --ink:#1a2140; --muted:#4f5876; --line:#e8e1d5;
  --red:#e5432d; --yellow:#ffc531; --blue:#2f5be6; --green:#23a26b; --pink:#ff7aa2;
  --sky:#e3f1ff; --sun:#fff0b8; --rose:#ffe3ea; --mint:#dcf5e8;
  --tape:rgba(255,214,102,.78);
  --font-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --font-body:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-hand:"Pangolin","Comic Sans MS","Segoe Print",cursive;
  --ease:cubic-bezier(.2,.9,.25,1.15);
  --shadow:0 22px 40px -26px rgba(26,33,64,.5);
  --band:var(--sky);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --page:#141a2e; --surface:#1d2540; --ink:#f1f3ff; --muted:#b2bad6; --line:#2e3858;
  --sky:#18284a; --sun:#3a3218; --rose:#3a1f2c; --mint:#163629; --tape:rgba(255,214,102,.55); color-scheme:dark } }
:root[data-theme="dark"]{
  --page:#141a2e; --surface:#1d2540; --ink:#f1f3ff; --muted:#b2bad6; --line:#2e3858;
  --sky:#18284a; --sun:#3a3218; --rose:#3a1f2c; --mint:#163629; --tape:rgba(255,214,102,.55); color-scheme:dark }
body[data-band="sky"]{--band:var(--sky)} body[data-band="sun"]{--band:var(--sun)}
body[data-band="rose"]{--band:var(--rose)} body[data-band="mint"]{--band:var(--mint)}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.65;overflow-x:hidden}
.in{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--font-display);margin:0;text-wrap:balance;letter-spacing:-.02em;line-height:1.12}
p{margin:0 0 .8em;text-wrap:pretty}
a{color:inherit}
a:hover{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

/* header (same as the main site) */
header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--page) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.logo{display:inline-flex;font:800 22px var(--font-display);text-decoration:none;letter-spacing:-.03em;color:var(--blue);min-width:0;overflow-wrap:anywhere}
@media (max-width:360px){.logo{font-size:19px;white-space:nowrap}}
.nav-r{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:8px 16px;border-radius:12px;border:2.5px solid #1a2140;
  background:var(--yellow);color:#1a2140;font:600 15px var(--font-body);text-decoration:none;box-shadow:3px 3px 0 #1a2140;transition:transform .15s ease-out,box-shadow .15s ease-out}
.btn:hover{color:#1a2140;transform:translate(-2px,-2px);box-shadow:5px 5px 0 #1a2140}
@media (max-width:520px){.btn .long{display:none}}
@media (min-width:521px){.btn .short{display:none}}
.lang{position:relative;flex:none}
.lang-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;min-width:44px;padding:6px 10px 6px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:600 13px var(--font-body);letter-spacing:.06em;cursor:pointer}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{border-color:var(--ink)}
.lang-btn svg{width:10px;height:10px;transition:transform .2s var(--ease)}
.lang-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;list-style:none;margin:0;padding:6px;min-width:168px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 40px -16px rgba(26,33,64,.45)}
.lang-menu button{appearance:none;border:0;background:none;width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:42px;padding:0 12px;border-radius:9px;color:var(--muted);font:500 15px var(--font-body);cursor:pointer;text-align:left}
.lang-menu button span{font:600 11.5px var(--font-body);letter-spacing:.06em;color:var(--muted)}
.lang-menu button:hover,.lang-menu button:focus-visible{background:var(--page);color:var(--ink);outline:none}
.lang-menu button[aria-checked="true"]{color:var(--ink)}.lang-menu button[aria-checked="true"] span{color:var(--red)}

/* top band with the page title */
.top{background:var(--band);padding-block:clamp(40px,6vw,72px) clamp(28px,4vw,44px)}
.top .in{display:grid;gap:14px;max-width:860px}
.kicker{font:400 22px/1.2 var(--font-hand);color:var(--red);display:inline-block;transform:rotate(-2deg);justify-self:start}
.top h1{font-size:clamp(25px,5.4vw,50px);font-weight:800;overflow-wrap:break-word;hyphens:auto}
.updated{color:var(--muted);font-size:15px;margin:0}
.wave{display:block;width:100%;height:28px;color:var(--band);transform:scaleY(-1);margin-top:-1px}
.wave path{fill:currentColor}

/* links between the four documents: stickers, the current one pressed */
.docnav{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.docnav a{display:inline-flex;align-items:center;min-height:42px;padding:6px 14px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);font:600 14.5px var(--font-body);text-decoration:none;color:var(--ink)}
.docnav li:nth-child(odd) a{transform:rotate(-1deg)}.docnav li:nth-child(even) a{transform:rotate(1deg)}
.docnav a:hover{border-color:var(--ink);color:var(--ink)}
.docnav a[aria-current="page"]{background:var(--yellow);color:#1a2140;border:2px solid #1a2140;box-shadow:3px 3px 0 #1a2140}

/* the document: a sheet of paper taped to the page */
.sheet-wrap{padding-block:clamp(28px,5vw,56px) clamp(56px,8vw,96px)}
.sheet{position:relative;max-width:860px;margin:0 auto;background:var(--surface);border-radius:22px;padding:clamp(26px,5vw,56px) clamp(20px,5vw,56px);box-shadow:var(--shadow)}
.sheet::before{content:"";position:absolute;top:-13px;left:50%;width:110px;height:26px;transform:translateX(-50%) rotate(-2deg);background:var(--tape);border-radius:2px}
.sheet h2{font-size:clamp(20px,2.4vw,25px);font-weight:600;margin:2em 0 .7em;display:flex;gap:12px;align-items:baseline}
.sheet h2:first-of-type{margin-top:.4em}
.sheet h2 .n{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font:800 15px var(--font-display);transform:translateY(-2px)}
.sheet h2:nth-of-type(3n+2) .n{background:var(--red)}.sheet h2:nth-of-type(3n) .n{background:var(--green)}
.sheet h3{font-size:17px;font-weight:600;margin:1.4em 0 .5em;letter-spacing:-.005em}
.sheet ul,.sheet ol{padding-left:22px;margin:0 0 .9em;display:grid;gap:6px}
.sheet li::marker{color:var(--red)}
.muted{color:var(--muted)}
.small{font-size:14.5px}

/* "in short" box at the top of each document */
.tldr{background:var(--page);border:2.5px dashed var(--green);border-radius:18px;padding:18px 22px 8px;margin-bottom:8px}
.tldr b.t{display:block;font:800 16px var(--font-display);color:var(--green);margin-bottom:8px}
/* the small factual notice about generated content */
.ai{border-left:4px solid var(--yellow);background:color-mix(in srgb,var(--sun) 60%,var(--surface));border-radius:0 14px 14px 0;padding:14px 18px 6px;font-size:15.5px}
/* quoted checkout wording */
.quote{display:flex;gap:12px;align-items:flex-start;background:var(--page);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;margin:0 0 1em;font-size:15.5px}
.quote .box{flex:none;width:20px;height:20px;border:2px solid var(--ink);border-radius:5px;margin-top:3px}
.quote p{margin:0}
/* list of service providers */
.procs{list-style:none;padding:0!important;display:grid;gap:10px!important}
.procs li{background:var(--page);border-radius:14px;padding:12px 16px;border:1.5px solid var(--line)}
.procs li b{display:block}
.procs li span{display:block;color:var(--muted);font-size:15px}
/* impressum facts */
.facts{display:grid;grid-template-columns:minmax(0,14em) minmax(0,1fr);gap:0;margin:0 0 1em;border-top:1.5px solid var(--line)}
.facts dt,.facts dd{margin:0;padding:10px 0;border-bottom:1.5px solid var(--line);min-width:0;overflow-wrap:anywhere}
.facts dt{color:var(--muted);font-size:15px;padding-right:14px}
@media (max-width:560px){.facts{grid-template-columns:minmax(0,1fr)}.facts dt{border-bottom:0;padding-bottom:0}}
/* placeholders still to be filled before publishing */
mark.ph{background:linear-gradient(transparent 12%,var(--yellow) 12%,var(--yellow) 88%,transparent 88%);color:#1a2140;padding:0 .2em;border-radius:3px;font-weight:600;overflow-wrap:anywhere}

footer{padding-block:32px calc(40px + env(safe-area-inset-bottom,0px));color:var(--muted);font-size:14.5px}
footer .in{display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:18px}
@media print{header,.docnav,footer,.wave{display:none}.sheet{box-shadow:none;padding:0}.sheet::before{display:none}.top{background:none;padding:0 0 16px}}