/* ============================================================
   Shared styling for impressum.html and datenschutz.html.
   Same paper, same ink, same hairlines as the coming-soon page, so these
   read as the same site rather than a bolted-on legal annex.
   Deliberately a separate .css file rather than inlined: these two pages
   are plain documents with no canvas and no panel, and they have to stay
   readable if anything else on the site fails.
   ============================================================ */

:root{
  --paper:#FAF9F6;
  --ink:#1D1822;
  --ink-muted:#6A6472;
  --hairline:#E4E0D7;
  --citrus:#B5DE3F;
}

*{box-sizing:border-box}

@font-face{font-family:'Cabinet Grotesk';src:url('fonts/CabinetGrotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/Switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Switzer",-apple-system,system-ui,Helvetica,Arial,sans-serif;
  font-size:1rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:68ch; margin:0 auto; padding:clamp(40px,7vh,88px) clamp(20px,6vw,40px) 96px}

/* the mark, small, as a way back */
.home{display:inline-block; margin-bottom:clamp(36px,6vh,64px)}
.home img{display:block; width:132px; height:auto}

h1{
  font-family:"Cabinet Grotesk",-apple-system,system-ui,Helvetica,Arial,sans-serif;
  font-weight:700; font-size:clamp(1.7rem,4vw,2.4rem); line-height:1.14;
  letter-spacing:-.015em; margin:0 0 .4em;
}
h2{
  font-family:"Cabinet Grotesk",-apple-system,system-ui,Helvetica,Arial,sans-serif;
  font-weight:700; font-size:1.06rem; line-height:1.3; letter-spacing:-.005em;
  margin:2.6em 0 .7em; padding-top:1.5em; border-top:1px solid var(--hairline);
}
h2:first-of-type{margin-top:2em}
h3{font-size:.95rem; font-weight:500; margin:1.8em 0 .4em; color:var(--ink)}

p, li{margin:0 0 1em; max-width:64ch}
.lede{color:var(--ink-muted); font-size:1.04rem; margin-bottom:2.4em}
ul{padding-left:1.1em; margin:0 0 1.4em}
li{margin-bottom:.45em}

a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hairline); padding-bottom:1px}
a:hover{border-bottom-color:var(--ink)}

dl{margin:0 0 1.6em; display:grid; grid-template-columns:minmax(9rem,15rem) 1fr; gap:.5em 1.6em}
dt{color:var(--ink-muted)}
dd{margin:0}
@media (max-width:640px){ dl{grid-template-columns:1fr; gap:.15em 0} dd{margin-bottom:.9em} }

.updated{color:var(--ink-muted); font-size:.86rem; margin-top:3em; padding-top:1.4em; border-top:1px solid var(--hairline)}

.back{
  display:inline-block; margin-top:2.4em; color:var(--ink-muted);
  font-size:.88rem; letter-spacing:.05em; border-bottom-color:transparent;
}
.back:hover{color:var(--ink); border-bottom-color:var(--ink)}

/* ---------- the unfilled-field marker ----------
   Every blank that has to be filled before this page can go live is wrapped
   in <span class="todo">. It is loud on purpose. Nothing here ships while a
   single one is still visible, and the strip at the top counts them. */
.todo{
  background:var(--ink); color:var(--paper);
  padding:.06em .5em; font-size:.9em; letter-spacing:.02em; white-space:nowrap;
}
.notlive{
  background:var(--ink); color:var(--paper);
  padding:16px clamp(20px,6vw,40px); font-size:.9rem; line-height:1.5;
}
.notlive strong{color:var(--citrus); font-weight:400}
.notlive a{color:var(--paper); border-bottom-color:rgba(250,249,246,.4)}

@media print{
  @page{ size:A4; margin:18mm }
  body{-webkit-print-color-adjust:exact; print-color-adjust:exact; background:#fff}
  .notlive, .back{display:none !important}
  .wrap{max-width:none; padding:0}
  h2{break-after:avoid; page-break-after:avoid}
  p, li, dl{break-inside:avoid; page-break-inside:avoid}
  a{border-bottom:none; text-decoration:underline}
}