/* =============================================================
   Design System v3 — "Amtsblatt, modernised"
   A precise, editorial, paper-and-ink system for compliance tools.
   Self-hosted fonts only (GDPR). No external requests.
   ============================================================= */

/* ---------- Fonts (self-hosted, /assets/fonts) ---------- */
@font-face{font-family:'Fraunces';src:url('/assets/fonts/fraunces-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/assets/fonts/fraunces-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/assets/fonts/fraunces-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/assets/fonts/public-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/assets/fonts/public-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/assets/fonts/public-sans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --paper:#f6f3ec;
  --paper2:#fffdf8;
  --ink:#26251f;
  --soft:#5b584d;
  --hairline:#ddd6c4;
  --faint:#efe9db;
  --danger:#a83a26;
  --warn:#96650b;
  --ok:#22684a;
  --radius:10px;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Public Sans',-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,monospace;
  /* pages override: */
  --accent:#26251f;
  --accent-deep:#26251f;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);font-size:16px;line-height:1.6;
  background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* paper grain — pure CSS texture, no request */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2147483000;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--accent);color:var(--paper2)}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px}

/* colour tab across the very top — like the tab of a file folder */
.topline{height:5px;background:var(--accent)}

/* ---------- Masthead row (back-link + language) ---------- */
.mast{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px}
a.home{font-size:.78rem;font-weight:600;color:var(--soft);text-decoration:none;letter-spacing:.02em}
a.home:hover,a.home:focus{color:var(--accent)}

/* ---------- Document header ---------- */
.doc-header{padding:26px 0 26px;position:relative;border-bottom:2px solid var(--ink)}
.doc-header::after{content:"";position:absolute;left:0;right:0;bottom:-6px;border-bottom:1px solid var(--hairline)}
.doc-header .kicker{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px;
}
.doc-header h1{
  font-family:var(--serif);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.12;margin:0 0 10px;
}
.doc-header .lede{color:var(--soft);font-size:1rem;line-height:1.65;max-width:62ch;margin:0}
.doc-header .lede strong{color:var(--ink)}

/* rectangular "stamp" — replaces the generic pill badge */
.stamp{
  display:inline-block;vertical-align:.35em;margin-left:12px;
  font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);border:1.5px solid var(--accent);border-radius:3px;
  padding:3px 9px;transform:rotate(-1.2deg);white-space:nowrap;
}

/* trust facts — one quiet ruled line, not marketing pills */
.trustline{
  display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:20px;padding-top:12px;
  border-top:1px solid var(--hairline);
  font-size:.74rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--soft);
}
.trustline span{display:inline-flex;align-items:center;gap:7px}
.trustline svg{color:var(--accent);flex:none}

/* language switcher */
.lang{display:flex;gap:2px}
.lang button{
  font-family:var(--sans);background:none;border:1px solid transparent;border-radius:5px;
  color:var(--soft);padding:4px 9px;cursor:pointer;font-size:.78rem;font-weight:600;letter-spacing:.03em;
}
.lang button:hover{color:var(--ink);border-color:var(--hairline)}
.lang button.active{color:var(--paper2);background:var(--ink);border-color:var(--ink)}

/* ---------- Sections & cards ---------- */
main{padding-top:30px}
.card{
  background:var(--paper2);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:24px 26px;
  box-shadow:0 1px 2px rgba(38,37,31,.04),0 10px 28px -20px rgba(38,37,31,.18);
}
h2{
  font-family:var(--serif);font-weight:600;font-size:1.18rem;letter-spacing:-.01em;
  margin:26px 0 12px;color:var(--ink);
}
h2:first-child{margin-top:0}
h2::before{content:"§";font-style:italic;font-weight:400;color:var(--accent);margin-right:.55ch}

/* ---------- Forms ---------- */
label{display:block;font-size:.74rem;font-weight:600;letter-spacing:.04em;color:var(--soft);margin-bottom:4px}
input,select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--hairline);border-radius:7px;
  font-family:var(--sans);font-size:.93rem;background:#fff;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;border:1px solid transparent;border-radius:7px;
  padding:10px 18px;font-family:var(--sans);font-size:.9rem;font-weight:600;
  cursor:pointer;margin:6px 8px 0 0;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease,transform .12s ease;
}
.btn.primary{background:var(--ink);color:var(--paper2)}
.btn.primary:hover,.btn.primary:focus{background:var(--accent)}
.btn.ghost{background:transparent;border-color:var(--hairline);color:var(--ink)}
.btn.ghost:hover,.btn.ghost:focus{border-color:var(--accent);color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* numbers always tabular — this is a ledger */
.stat b,.stat span,.totals,table td,.price{font-variant-numeric:tabular-nums}

/* ---------- Footer ---------- */
footer{margin:64px 0 44px;color:var(--soft);font-size:.8rem;line-height:1.7}
footer .wrap{border-top:1px solid var(--hairline);padding-top:20px}
.legalnav{margin-top:8px;font-size:.8rem}
.legalnav a{color:var(--ink);text-decoration:none;margin-right:18px;font-weight:600;border-bottom:1px solid var(--hairline)}
.legalnav a:hover,.legalnav a:focus{color:var(--accent);border-color:var(--accent)}

/* ---------- Entrance motion (one orchestrated reveal) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rise{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
.rise-2{animation-delay:.08s}.rise-3{animation-delay:.16s}.rise-4{animation-delay:.24s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
@media print{
  body::after{display:none}
  .topline,.lang{display:none}
}