@font-face { font-family: 'Alegreya'; font-weight: 400; font-style: normal; font-display: block; src: url('fonts/alegreya-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya'; font-weight: 700; font-style: normal; font-display: block; src: url('fonts/alegreya-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya'; font-weight: 400; font-style: italic; font-display: block; src: url('fonts/alegreya-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Alegreya SC'; font-weight: 700; font-style: normal; font-display: block; src: url('fonts/alegreya-sc-latin-700-normal.woff2') format('woff2'); }

html, body {
  margin: 0; height: 100%; background: #000; overflow: hidden;
  color: #e8d8a8; font-family: Alegreya, Georgia, serif;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
body { display: flex; align-items: center; justify-content: center; }
canvas { display: block; cursor: none; touch-action: none; outline: none; opacity: 0; transition: opacity .8s; }
body.bereit canvas { opacity: 1; }
#laden { position: fixed; inset: 0; display: grid; place-items: center; font-style: italic; font-size: 22px; letter-spacing: .02em; pointer-events: none; transition: opacity .6s; }
body.bereit #laden { opacity: 0; }
#drehen { display: none; }
@media (orientation: portrait) and (max-width: 700px) {
  #drehen { display: block; position: fixed; bottom: 24px; left: 16px; right: 16px; text-align: center; font-size: 18px; color: #c8b48a; pointer-events: none; }
}
#rechtliches { position: fixed; left: 12px; bottom: 8px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .4s; }
#rechtliches a { color: #a8946a; text-decoration: none; }
#rechtliches a:hover, #rechtliches a:focus { color: #ffd98a; text-decoration: underline; }
body.titel #rechtliches { opacity: 1; pointer-events: auto; }