/* ============================================================
   site.css — gemeinsames Stylesheet der Unterseiten
   (impressum.html, datenschutz.html, 404.html)

   index.html bindet dieses Stylesheet BEWUSST NICHT ein und hält seine
   Design-Tokens stattdessen inline dupliziert: die Startseite ist die
   Landingpage, ihr Largest Contentful Paint ist die H1, und ein
   externes Stylesheet wäre dort ein zusätzlicher, renderblockierender
   Request. Die Unterseiten sind Pflichtseiten ohne Performance-
   Anspruch, dort überwiegt die Wartbarkeit. Wer also --gold-text oder
   eine andere Token ändert, muss das an zwei Stellen tun: hier und im
   :root-Block von index.html (dort ebenfalls kommentiert).
   ============================================================ */

/* Schriften lokal gehostet — keine Verbindung zu Google (siehe index.html) */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/playfair-display-v40-latin-600-subset.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/inter-v20-latin-regular-subset.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/inter-v20-latin-500-subset.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/inter-v20-latin-600-subset.woff2') format('woff2')}

:root{
  /* Typo-Skala identisch zu index.html */
  --text-xs:.8125rem;--text-sm:.875rem;--text-md:.9375rem;
  --text-body:1.0625rem;--text-lg:1.1875rem;--text-xl:1.3125rem;
  --bg:#FDFBF8;--bg-alt:#F7F4EF;--ink:#26262a;--body-color:#50504e;
  --primary:#102448;--gold:#C9B99E;--gold-text:#7A6743;--hairline:#E4DDD0;
  --dark-bg-2:#0C1C39;--dark-ink:#F4EFE6;--dark-muted:#A8B2C9;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;font-size:var(--text-body);line-height:1.7;
  color:var(--body-color);background:var(--bg);-webkit-font-smoothing:antialiased;
  min-height:100dvh;display:flex;flex-direction:column;
}
a{color:var(--gold-text)}
:root{--focus-ring:var(--gold-text)}
.site-footer{--focus-ring:var(--gold)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* ---------- Header, main, Typografie ---------- */
.site-header{border-bottom:1px solid var(--hairline);background:var(--bg)}
.header-inner{width:min(760px,100% - 2.5rem);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;height:76px}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1.2}
.brand-name{font-family:'Playfair Display',serif;font-size:var(--text-lg);font-weight:600;color:var(--ink)}
.brand-sub{font-size:var(--text-xs);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.back{font-size:var(--text-md);text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:.5rem;min-height:44px}
.back:hover{color:var(--gold-text)}
main{flex:1;width:min(760px,100% - 2.5rem);margin-inline:auto;padding:clamp(3rem,7vw,5rem) 0}
.eyebrow{display:flex;align-items:center;gap:.9rem;font-size:var(--text-xs);font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);margin-bottom:1.2rem}
.eyebrow::before{content:"";width:2.4rem;height:1px;background:var(--gold)}
h1{font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(2rem,5vw,2.75rem);color:var(--ink);margin-bottom:2.2rem}
h2{font-family:'Playfair Display',serif;font-weight:600;font-size:var(--text-xl);color:var(--ink);margin:2.4rem 0 .8rem}
h3{font-family:'Inter',sans-serif;font-weight:600;font-size:var(--text-body);color:var(--ink);margin:1.6rem 0 .5rem}
p,ul{margin-bottom:1rem;max-width:38rem}
ul{padding-left:1.3rem}

/* ---------- Wiederkehrende Blöcke ---------- */
.placeholder,.angaben{
  background:var(--bg-alt);border-left:2px solid var(--gold);padding:1.1rem 1.3rem;margin:.4rem 0 1.2rem;
  font-size:var(--text-body);color:var(--ink);
}
.note{
  margin-top:3rem;padding:1.2rem 1.4rem;border:1px solid var(--hairline);font-size:var(--text-sm);background:var(--bg-alt);
}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark-bg-2);color:var(--dark-muted);padding:2rem 0;margin-top:3rem}
.footer-inner{width:min(760px,100% - 2.5rem);margin-inline:auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:var(--text-sm)}
.site-footer a{color:var(--dark-muted);text-decoration:none;padding:.75rem 0;display:inline-block}
.site-footer a:hover{color:var(--gold)}
.site-footer ul{display:flex;gap:1.5rem;list-style:none;padding:0}

/* ---------- Druck ----------
   Schlanker als in index.html: die Unterseiten haben weder dunkle
   Sektionen noch Reveals oder Sticky-Elemente. Es reicht, den fixierten
   Header zu neutralisieren und Fußzeile/Links auf Schwarzweiß zu
   stellen. */
@media print{
  .site-header{position:static;border-bottom-color:#999}
  .back{display:none}
  .site-footer{background:#fff;color:#000}
  .site-footer a{color:#000}
  a{color:#000}
  .placeholder,.angaben,.note{background:#fff;border-left-color:#999}
}