/* ============================================================
   VELARO — Impressum & Datenschutz
   Gleiche Bildsprache wie index.html: Spectral + Barlow Condensed,
   Doppelrand-Architektur, Squircle-Radien, Grain, Dark Mode.

   Bewusst eigenstaendig: brand/tokens/tokens.css wird von netlify.toml
   mit 404 geblockt (interne Arbeitsdatei). Die Tokens stehen deshalb
   hier nochmal — Werte identisch zu :root in index.html.
   ============================================================ */

:root{
  --green:#14352A; --chalk:#EFE9DA; --sand:#DCD3BE;
  --brass:#A9834B; --ink:#0E2019;

  --paper:#FFFFFF;
  --paper-2:#F7F4EE;
  --text:#161D19;
  --text-2:rgba(22,29,25,.66);
  --text-3:rgba(22,29,25,.42);

  --hair:rgba(22,29,25,.09);
  --hair-2:rgba(22,29,25,.055);

  --serif:"Spectral",Georgia,serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;

  --sq:30px;
  --sq-in:22px;
  --spring:cubic-bezier(.32,.72,0,1);
  --shell:min(820px,100% - 44px);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0A1712; --paper-2:#0E2019;
    --text:#EFE9DA; --text-2:rgba(239,233,218,.68); --text-3:rgba(239,233,218,.4);
    --hair:rgba(239,233,218,.12); --hair-2:rgba(239,233,218,.06);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--serif);font-weight:300;font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
/* Film-Grain wie auf der Startseite */
body::after{
  content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>");
}
.shell{width:var(--shell);margin-inline:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:6px}

/* ---------- Kopf: Lockup wie im Footer der Startseite ---------- */
header{padding:34px 0 0}
.lockup{display:flex;align-items:center;gap:16px;min-height:44px;text-decoration:none;width:max-content}
.lockup .mono{width:34px;height:29px;flex:none;color:var(--green)}
.lockup .lines{display:flex;flex-direction:column;gap:3px;line-height:1}
.lockup .w{font-size:22px;font-weight:500;letter-spacing:.32em;color:var(--text)}
.lockup .t{font-family:var(--cond);font-size:10px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--brass)}
@media (prefers-color-scheme:dark){.lockup .mono{color:var(--chalk)}}

/* ---------- Inhalt ---------- */
main{padding:44px 0 84px}
.back{
  display:flex;width:max-content;align-items:center;gap:9px;min-height:44px;
  margin-bottom:22px;text-decoration:none;
  font-family:var(--cond);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-2);transition:color .4s var(--spring);
}
.back:hover{color:var(--brass)}
.eyebrow{
  display:inline-block;border-radius:100px;padding:6px 14px;margin-bottom:16px;
  background:var(--hair-2);border:1px solid var(--hair);
  font-family:var(--cond);font-size:10.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--brass);
}
h1{font-size:clamp(34px,6vw,54px);font-weight:300;line-height:1.06;letter-spacing:-.028em;margin:0 0 10px}
.lead{color:var(--text-2);font-size:18px;margin:0 0 6px}
h2{font-size:23px;font-weight:300;letter-spacing:-.02em;line-height:1.2;margin:46px 0 12px}
h3{font-size:17.5px;font-weight:500;margin:28px 0 8px}
p,ul{margin:0 0 15px}
ul{padding-left:1.15em}
li{margin-bottom:7px}
main a{color:var(--green);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--sand)}
main a:hover{text-decoration-color:var(--brass)}
@media (prefers-color-scheme:dark){main a{color:var(--chalk);text-decoration-color:rgba(169,131,75,.6)}}
strong,b{font-weight:600}
code{font-family:var(--cond);font-size:.95em;letter-spacing:.04em;
  background:var(--hair-2);padding:1px 6px;border-radius:6px}

/* Feine Trennlinie zwischen den Abschnitten, statt harter Kanten */
h2::before{
  content:"";display:block;width:34px;height:1px;background:var(--brass);
  margin-bottom:18px;opacity:.5;
}

/* ---------- Hinweisbox in Doppelrand-Architektur ---------- */
.todo{
  border-radius:var(--sq);padding:5px;margin:26px 0;
  background:var(--hair-2);border:1px solid var(--hair);
}
.todo > div{
  background:var(--paper);border-radius:var(--sq-in);padding:22px 24px 24px;
  box-shadow:0 1px 1px rgba(20,53,42,.03);
}
.todo b{
  display:block;margin-bottom:8px;color:var(--brass);
  font-family:var(--cond);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
}
.todo p{font-size:15.5px;color:var(--text-2);margin:0}
.todo p + p{margin-top:9px}
.todo strong{color:var(--text)}

/* Tabelle fuer die Datenschutz-Uebersichten */
.tbl{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15.5px}
.tbl th,.tbl td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--hair);
  vertical-align:top}
.tbl th{font-family:var(--cond);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3)}
.tbl td{color:var(--text-2)}
.tbl td:first-child{color:var(--text);padding-right:24px;white-space:nowrap}
@media (max-width:560px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{padding:12px 0;border-bottom:1px solid var(--hair)}
  .tbl td{border:0;padding:0 0 4px;white-space:normal}
  .tbl td:first-child{font-family:var(--cond);font-size:11px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--text-3)}
}

/* ---------- Fuss ---------- */
footer{border-top:1px solid var(--hair);padding:34px 0 60px;
  color:var(--text-3);font-size:14px}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--cond);font-size:12px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.foot-links a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center;
  color:var(--text-2);transition:color .4s var(--spring)}
.foot-links a:hover{color:var(--brass)}
.foot-note{margin-top:14px}

@media (prefers-reduced-motion:reduce){
  .back,.foot-links a{transition:none}
}
@media (max-width:600px){
  :root{--shell:min(820px,100% - 28px);--sq:24px;--sq-in:17px}
  body{font-size:16.5px}
  main{padding:34px 0 64px}
}