/* ===========================================================================
   Hatchure — legal pages (Impressum, Datenschutzerklärung)
   ---------------------------------------------------------------------------
   Shared by impressum.html and datenschutz.html. A trimmed copy of the
   design tokens and header/footer rules from welcome.html's inline
   stylesheet — same reasoning as that file's own comment: these are the
   Hatchure palette values (docs/branding/04-brand-plan-2026.html), not a fork waiting to drift. Only the
   subset those two pages actually use (no hero, no pricing grid, etc).
   =========================================================================== */

/* Self-hosted type — see docs/branding/04-brand-plan-2026.html.
   Bricolage Grotesque for display, IBM Plex Sans for interface text and
   IBM Plex Mono for every time, distance and count. Served from /fonts so the
   app works offline and no font request leaves for a third party (which also
   keeps the Datenschutzerklärung honest). Both families are OFL-licensed;
   the licences sit beside the files. */
@font-face{ font-family:'Bricolage Grotesque'; font-weight:600; font-style:normal; font-display:swap; src:url('/fonts/BricolageGrotesque-SemiBold.woff2') format('woff2'); }
@font-face{ font-family:'Bricolage Grotesque'; font-weight:800; font-style:normal; font-display:swap; src:url('/fonts/BricolageGrotesque-ExtraBold.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-weight:400; font-style:normal; font-display:swap; src:url('/fonts/IBMPlexSans-Regular.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-weight:400; font-style:italic; font-display:swap; src:url('/fonts/IBMPlexSans-Italic.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-weight:500; font-style:normal; font-display:swap; src:url('/fonts/IBMPlexSans-Medium.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-weight:600; font-style:normal; font-display:swap; src:url('/fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-weight:400; font-style:normal; font-display:swap; src:url('/fonts/IBMPlexMono-Regular.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-weight:500; font-style:normal; font-display:swap; src:url('/fonts/IBMPlexMono-Medium.woff2') format('woff2'); }

:root{
  /* Copied from css/styles.css — see the note above. */
  --ink: #14201A;
  --ink-2: #22332B;
  --chalk: #F6F7F2;
  --chalk-dim: #EDEFE8;
  --amber: #F0B33A;
  --amber-dark: #D89A1E;
  --amber-text: #8F5E05;
  --amber-tint: #FBF0D2;
  --open: #22703F;
  --closed: #B33A15;
  --water: #22658A;
  --paper: var(--chalk);
  --paper-dim: var(--chalk-dim);
  --ink-soft: #5F6C65;
  --line: #CFD4CA;
  --blaze: var(--amber);
  --blaze-dark: var(--amber-dark);
  --blaze-text: var(--amber-text);
  --wrap: 780px;
}

*{ box-sizing: border-box; }

body{
  margin:0; padding:0;
  background: var(--paper); color: var(--ink);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2{ font-family:'Bricolage Grotesque', 'IBM Plex Sans', sans-serif; font-weight:700; line-height:1.15; letter-spacing:-0.02em; }

a{ color: var(--blaze-text); text-decoration: underline; text-underline-offset: 2px; }
a:hover{ color: var(--blaze-dark); }

.wrap{ max-width: var(--wrap); margin:0 auto; padding:0 24px; }
@media (max-width:520px){ .wrap{ padding:0 18px; } }

.skipLink{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--ink); color:var(--paper); padding:10px 16px;
  border-radius:0 0 10px 0; text-decoration:none; font-weight:600;
}
.skipLink:focus{ left:0; }

header.site{
  background: rgba(20,32,26,0.97);
  padding: calc(10px + env(safe-area-inset-top)) 0 10px;
}
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
header.site .mark{ height:30px; width:auto; display:block; }
header.site a{ color:var(--paper); text-decoration:none; font-size:14px; font-weight:500; }
header.site a:hover{ text-decoration:underline; text-underline-offset:3px; }

main{ padding:56px 0 72px; }
main h1{ font-size: clamp(28px, 4.4vw, 40px); margin:0 0 8px; }
main .updated{ color:var(--ink-soft); font-size:14px; margin:0 0 36px; }

.doc{ border-top:1px solid var(--line); padding:26px 0 4px; }
.doc:first-of-type{ border-top:none; padding-top:0; }
.doc h2{ font-size:19px; margin:0 0 12px; }
.doc p{ margin:0 0 14px; }
.doc ul{ margin:0 0 14px; padding-left:22px; }
.doc li{ margin:0 0 7px; }
.doc strong{ font-weight:600; }
.doc address{ font-style:normal; }

footer.site{
  background:var(--ink); color:rgba(251,251,248,0.6);
  border-top:1px solid rgba(251,251,248,0.12);
  padding:32px 0 calc(32px + env(safe-area-inset-bottom)); font-size:14px;
}
footer.site .wrap{ display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between; }
footer.site a{ color:rgba(251,251,248,0.85); }
footer.site a:hover{ color:var(--paper); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

a:focus-visible{
  outline:3px solid var(--blaze); outline-offset:3px; border-radius:4px;
}
header.site a:focus-visible, footer.site a:focus-visible{
  outline-color:var(--paper);
}