/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  mechoulam · site.css — shared base for the standalone public pages    ║
   ║  (Impressum, Datenschutz, Haftungsausschluss, Nutzungsbedingungen,     ║
   ║   Newsletter-Seiten, Start/Suche index.html).                          ║
   ║                                                                        ║
   ║  Tokens mirror studienlage-register.css verbatim so the whole site     ║
   ║  reads as ONE design. The studienlage pages keep their own stylesheets ║
   ║  (body.reg / body.studienlage scopes); this file is NOT loaded there   ║
   ║  because its `body` rule is unscoped.                                  ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* AOT Serial Mono — self-hosted (served via /fonts mount in api/main.py). */
@font-face { font-family: "AOT Serial Mono"; src: url("/fonts/aot/AOTSerialMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "AOT Serial Mono"; src: url("/fonts/aot/AOTSerialMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "AOT Serial Mono"; src: url("/fonts/aot/AOTSerialMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --paper:     #f4f4f5;
  --surface:   #f9f9fa;
  --surface-2: #f1f1f2;
  --ink:   #1d1d1f;
  --ink-2: #2e2e30;
  --muted: #6a655e;
  --faint: #948d82;
  --rule:        #e0e0e2;
  --rule-strong: #c8c8cc;
  --orange:    #bf3f17;
  --orange-dk: #8c2f0e;
  --orange-soft: #f1e5dd;
  --tier-S: #1a1a1c;
  --tier-A: #6b3018;
  --tier-B: #bf5028;
  --tier-C: #d4987a;
  --tier-D: #edddd5;

  --display: "Playfair Display", "Times New Roman", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, "Arial Nova", Arial, sans-serif;
  --mono: "AOT Serial Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --page: 1180px;
  --pad: clamp(20px, 5vw, 76px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 120% 60% at 50% 20%, oklch(96% 0.005 240 / 0.6) 0%, transparent 65%);
  background-size: 100% 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body ::selection { background: var(--orange); color: #fff; }

a { color: var(--orange); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--orange-dk); }

h1, h2, h3 { font-family: var(--display); color: var(--ink); }
h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; margin: 0 0 12px 0; }
h2 { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 32px 0 14px 0; }
h2:first-child { margin-top: 0; }
h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 24px 0 10px 0; color: var(--ink-2); }
p  { margin: 0 0 16px 0; font-size: 16px; line-height: 1.7; color: var(--muted); }
strong { color: var(--ink); font-weight: 600; }

.mono-label { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* ─── Brand wordmark — geometry lives in brand.css; here we only set the size ─── */
.brand { font-size: 31px; }

/* ─── Legal / static reading column ─────────────────────────────────────── */
.page-container { max-width: 700px; margin: 0 auto; padding: 56px 24px 0 24px; }
.page-container > header { margin-bottom: 44px; }
/* Flat on paper — the old white boxed card is gone for the editorial look. */
.page-container main { background: none; box-shadow: none; border-radius: 0; padding: 0; }
.placeholder-fill { background: var(--orange-soft); padding: 2px 6px; border-radius: 3px; font-weight: 600; color: var(--ink); }

/* Callout boxes used in the legal pages (Datenschutz info, Haftung warning). */
.info-box { background: var(--orange-soft); border-left: 3px solid var(--orange); padding: 16px 20px; margin: 20px 0; border-radius: 0 4px 4px 0; }
.info-box p:last-child, .warning-box p:last-child { margin-bottom: 0; }
.warning-box { background: #fbf3e3; border-left: 4px solid #c0851f; padding: 20px; margin: 24px 0; border-radius: 0 4px 4px 0; }
.warning-box strong { color: var(--orange-dk); }

/* ─── Unified footer (markup: .site-footer > .legal-nav + .copyright) ─────── */
.site-footer { margin-top: 64px; padding: 30px 24px; border-top: 1px solid var(--rule-strong); text-align: center; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-bottom: 14px; }
.legal-nav a { font-size: 12px; color: var(--muted); text-decoration: none; }
.legal-nav a:hover { color: var(--orange); }
.copyright { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; color: var(--faint); margin: 0; }

@media (max-width: 768px) {
  .page-container { padding: 36px 18px 0 18px; }
  h1 { font-size: 27px; }
  h2 { font-size: 20px; }
  h3 { font-size: 16px; }
  p  { font-size: 15px; }
  .brand { font-size: 27px; }
  .legal-nav { gap: 6px 16px; }
}

@media print {
  body { background: white; color: black; background-image: none; }
  .page-container { max-width: 100%; padding: 0; }
  .page-container main { box-shadow: none; border-radius: 0; padding: 0; }
  .site-footer { display: none; }
  a { color: black; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #666; }
  a[href^="/"]::after { content: ""; }
  h2 { page-break-after: avoid; }
  p { orphans: 3; widows: 3; }
  .brand .name::before { background: black; }
  .placeholder-fill { background: #eee; }
}