/* Schriften lokal eingebunden (keine Verbindung zu Google, DSGVO-freundlich) */
@font-face{
  font-family:'Michroma'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/michroma-400-latin.woff2) format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
}

/* Layout: Vollbild-WebGL-Bühne, Darstellungs-Schalter oben rechts, Domain unten mittig */
:root{
  --bg:#000000; --fg:#e6e7ec; --mute:#6b6e78; --accent:#d9a441; --line:#1d1e23;
  --font-display:'Michroma',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg); overflow:hidden;
  font-family:var(--font-mono); box-sizing:border-box; position:relative;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:18px;
}
#stage{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0}
.vignette{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 42%, rgba(0,0,0,.72) 100%)}
.brand{position:absolute; z-index:2; left:0; right:0; bottom:calc(26px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}
.brand .domain{font-family:var(--font-display); font-size:clamp(13px,2.4vw,19px); letter-spacing:.22em; color:var(--fg); text-wrap:balance; margin:0; font-weight:400}
.brand .name{font-size:11px; letter-spacing:.12em; color:var(--mute); text-transform:lowercase}
.brand .rule{width:34px; height:1px; background:var(--accent); opacity:.9}

/* Klick irgendwo: Vollbild an/aus */
html.fs-ok, html.fs-ok body{cursor:pointer}

/* Ohne WebGL / ohne JavaScript: nur der Schriftzug */
.no-webgl #stage{display:none}
.no-webgl .brand{top:0; bottom:0; justify-content:center}