/* Gemeinsames Layout der Rechtsseiten (Impressum, Datenschutz) — Signatur-System. */
/* Selbst gehostete Schriften (Latin-Subset, variable Fonts) — keine Anfragen an Google. */
@font-face{ font-family:'Bodoni Moda'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(fonts/bodoni-moda.woff2) format('woff2'); }
@font-face{ font-family:'Bodoni Moda'; font-style:italic; font-weight:400 700; font-display:swap;
  src:url(fonts/bodoni-moda-italic.woff2) format('woff2'); }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(fonts/space-grotesk.woff2) format('woff2'); }
@font-face{ font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/space-mono-400.woff2) format('woff2'); }
@font-face{ font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url(fonts/space-mono-700.woff2) format('woff2'); }
:root{
  --ink:      #0a0f18;
  --bone:     oklch(0.965 0.014 84);
  --bone-soft:oklch(0.965 0.014 84 / 0.62);
  --bone-dim: oklch(0.965 0.014 84 / 0.40);
  --amber:    oklch(0.82 0.120 74);
  --ember:    oklch(0.66 0.170 38);
  --edge:     clamp(1.4rem, 4.2vw, 3.2rem);
  --frame:    clamp(0.9rem, 2.4vw, 1.9rem);
  --hud:      clamp(0.58rem, 0.8vw, 0.7rem);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ min-height:100%; background:var(--ink); }
body{ color:var(--bone-soft); font-family:"Space Grotesk",system-ui,sans-serif; font-weight:300;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection{ background:var(--ember); color:var(--bone); }

.display{ font-family:"Bodoni Moda","Times New Roman",serif; line-height:0.94; letter-spacing:-0.012em; }

/* persistentes Chrome, identisch zu den Hauptseiten */
.chrome{ position:fixed; inset:0; z-index:80; pointer-events:none; view-transition-name:site-chrome; }
.matte{ position:absolute; inset:var(--frame); border:1px solid rgba(247,243,233,0.34); }
.hud{ position:absolute; color:var(--bone); font-family:"Space Mono",monospace; font-size:var(--hud);
  letter-spacing:0.3em; text-transform:uppercase; }
.tl{ top:calc(var(--frame) + var(--edge)); left:calc(var(--frame) + var(--edge)); }
.tr{ top:calc(var(--frame) + var(--edge)); right:calc(var(--frame) + var(--edge)); }
.bl{ bottom:calc(var(--frame) + var(--edge)); left:calc(var(--frame) + var(--edge)); }
.br{ bottom:calc(var(--frame) + var(--edge)); right:calc(var(--frame) + var(--edge)); }
.hud a{ pointer-events:auto; color:var(--bone); text-decoration:none; display:inline-flex; gap:0.7rem;
  align-items:baseline; transition:gap .4s cubic-bezier(.16,1,.3,1); }
.hud a .ar{ color:var(--amber); }
.hud a:hover{ gap:1.05rem; }

.grain{ position:fixed; inset:-50%; z-index:78; pointer-events:none; opacity:0.055; mix-blend-mode:overlay;
  view-transition-name:site-grain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

@view-transition{ navigation:auto; }

.page{ max-width:720px; margin-inline:auto;
  padding:calc(var(--frame) + var(--edge) + 3.5rem) calc(var(--frame) + var(--edge)) calc(var(--frame) + var(--edge) + 3.5rem); }
.page h1{ color:var(--bone); font-weight:400; font-size:clamp(2.2rem,6vw,4.2rem);
  margin-bottom:clamp(2.5rem,7vh,4.5rem); }

.block{ margin-bottom:2.6rem; padding-top:2.6rem; border-top:1px solid rgba(247,243,233,0.10); }
.block:first-of-type{ border-top:0; padding-top:0; }
.label{ font-family:"Space Mono",monospace; font-size:var(--hud); font-weight:400;
  letter-spacing:0.26em; text-transform:uppercase; color:var(--amber); margin-bottom:1rem; }
.block p{ font-size:clamp(0.95rem,1.1vw,1.05rem); line-height:1.7; max-width:62ch; }
.block p + p{ margin-top:0.75rem; }
.block ul{ margin-top:0.6rem; padding-left:1.25rem; font-size:clamp(0.95rem,1.1vw,1.05rem); line-height:1.7; }
.block strong{ color:var(--bone); font-weight:500; }
.block code{ font-family:"Space Mono",monospace; font-size:0.9em; color:var(--bone); }
.block a{ color:var(--bone); text-decoration:none; border-bottom:1px solid rgba(247,243,233,0.3);
  transition:border-color .3s; word-break:break-word; }
.block a:hover{ border-color:var(--amber); }

.foot{ margin-top:3.5rem; padding-top:2rem; border-top:1px solid rgba(247,243,233,0.10);
  display:flex; gap:2.5rem; flex-wrap:wrap;
  font-family:"Space Mono",monospace; font-size:var(--hud); letter-spacing:0.26em; text-transform:uppercase; }
.foot a{ color:var(--bone-soft); text-decoration:none; padding-bottom:2px;
  border-bottom:1px solid rgba(247,243,233,0.22); transition:color .3s, border-color .3s; }
.foot a:hover{ color:var(--bone); border-color:var(--amber); }

@media (max-width:680px){
  .tr,.bl,.br{ display:none; }
  .matte{ inset:0.7rem; }
}
