/* Gemeinsame Grundlagen: Reset, Variablen, Schriften, Kopf-/Fußzeile, Rand-Raster */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg, #f3f0eb);
  color: var(--fg, #17150f);
  font-family: var(--font-ui, Georgia, 'Times New Roman', serif);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100%;
}
img, video { max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

/* Wie in deinem Layout: erster Buchstabe der Überschriften in Morris Ornaments,
   der Rest in Morris Troy. Aus mit theme.ornamentHeadings:false in config.js */
h1::first-letter, h2::first-letter, .chrome b::first-letter {
  font-family: var(--font-ornament, inherit);
  font-size: 1.16em;
  line-height: .95;
}

:root {
  --edge: clamp(16px, 3vw, 44px);
  --fg-dim: color-mix(in oklab, var(--fg, #000) 66%, transparent);
  --fg-faint: color-mix(in oklab, var(--fg, #000) 38%, transparent);
  --rule: color-mix(in oklab, var(--fg, #000) 16%, transparent);
  /* fre gehaltene Ränder (config.js -> theme.frame) */
  --frame-top: 3vw; --frame-bottom: 4vw; --frame-left: 2.5vw; --frame-right: 2.5vw;
  --grid-minor: 20px; --grid-major: 100px;
  --grid-line: rgba(23, 21, 15, .09);
  --grid-line-strong: rgba(23, 21, 15, .17);
}

/* Startseite: Text über dem Wolken-Video (eigene Farbe möglich) */
body.start { color: var(--start-fg, var(--fg)); }

/* --------------------------- Millimeterpapier ----------------------------- */
html.grid-on body.page::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-line-strong) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-strong) 1px, transparent 1px);
  background-size: var(--grid-minor) var(--grid-minor), var(--grid-minor) var(--grid-minor),
                   var(--grid-major) var(--grid-major), var(--grid-major) var(--grid-major);
}

/* --------------------- Randzonen (deine Grafiken) ------------------------- */
.pageframe { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.pageframe .band { position: absolute; background-repeat: no-repeat; }
.pageframe .b-top    { top: 0; left: 0; right: 0; height: var(--frame-top);
                       background-position: top center; }
.pageframe .b-bottom { bottom: 0; left: 0; right: 0; height: var(--frame-bottom);
                       background-position: bottom center; }
.pageframe .b-left   { left: 0; top: 0; bottom: 0; width: var(--frame-left);
                       background-position: left center; }
.pageframe .b-right  { right: 0; top: 0; bottom: 0; width: var(--frame-right);
                       background-position: right center; }

/* ------------------------------- Kopf / Fuß ------------------------------- */
.chrome {
  position: fixed; z-index: 30;
  font-size: 13px; letter-spacing: .02em;
  color: var(--fg-dim);
  text-decoration: none;
}
.chrome b {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: 16px; font-weight: 600; letter-spacing: .01em;
  color: var(--fg);
}
.chrome.top    { top: calc(var(--edge) + var(--frame-top)); left: calc(var(--edge) + var(--frame-left)); }
.chrome.bottom { bottom: calc(var(--edge) + var(--frame-bottom)); left: calc(var(--edge) + var(--frame-left)); }
.chrome.right  { right: calc(var(--edge) + var(--frame-right)); left: auto; text-align: right; }
.chrome a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--fg-faint); }
.chrome a:hover { color: var(--accent); border-color: var(--accent); }

/* Unten mittig: Hinweissatz, verschwindet nach dem ersten Hover */
.hintline {
  position: fixed; z-index: 30; bottom: calc(var(--edge) + var(--frame-bottom)); left: 50%;
  transform: translateX(-50%);
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-faint); white-space: nowrap;
  transition: opacity .6s ease;
}
.hintline.gone { opacity: 0; }

/* Sound-Knopf */
#sound {
  position: fixed; z-index: 40; right: calc(var(--edge) + var(--frame-right)); bottom: calc(var(--edge) + var(--frame-bottom));
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--fg-faint); border-radius: 50%;
  background: transparent; color: var(--fg); cursor: pointer;
}
#sound:hover { border-color: var(--accent); color: var(--accent); }
#sound.off { opacity: .45; }
#sound[hidden] { display: none; }

/* Hinweis, wenn etwas fehlt */
#notice {
  position: fixed; z-index: 60; left: 50%; bottom: calc(var(--edge) + var(--frame-bottom) + 52px);
  transform: translateX(-50%);
  max-width: min(560px, 88vw); padding: 10px 14px;
  border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent); border-radius: 8px;
  background: color-mix(in oklab, var(--bg) 88%, #000 12%); color: var(--fg); font-size: 13px;
}
#notice[hidden] { display: none; }

/* "Bewegung reduzieren": ruhiger, der Zahn wächst aber noch (config -> motion) */
html.calm .wrap { animation: none; }
html.calm .hintline { transition: opacity .2s ease; }

/* ------------------------------------------------------ Willkommens-Banner --- */
/* Ein Klick irgendwo, dann startet der Ton. Dahinter liegt die unscharfe Seite.
   Der Browser verbietet Ton ohne Klick — lokal genau wie auf einem Server.      */
#willkommen {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: color-mix(in oklab, var(--bg, #f3f0eb) calc(var(--wk-dim, 35) * 1%), transparent);
  -webkit-backdrop-filter: blur(var(--wk-blur, 10px)) saturate(.92);
          backdrop-filter: blur(var(--wk-blur, 10px)) saturate(.92);
  transition: opacity .55s ease;
}
#willkommen.weg { opacity: 0; pointer-events: none; }
.wk-kasten {
  text-align: center; padding: 18px clamp(22px, 4vw, 46px); border-radius: 999px;
  border: 1px solid var(--rule);
  background: color-mix(in oklab, var(--bg, #f3f0eb) 62%, transparent);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .12);
}
.wk-kasten b {
  display: block; font-weight: 400; line-height: 1.05;
  font-family: var(--font-display, Georgia, serif); font-size: clamp(28px, 5vw, 62px);
}
.wk-kasten span {
  display: block; margin-top: 8px; color: var(--fg-dim);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
}
body.vorher { overflow: hidden; }
/* Fallback für Browser ohne backdrop-filter: die Seite selbst unscharf */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  body.vorher .stage, body.vorher .bg, body.vorher #paper, body.vorher #clouds {
    filter: blur(calc(var(--wk-blur, 10px) * .7));
  }
}
html.calm #willkommen { transition: none; }