@font-face {
  font-family: "Michroma";
  src: url("fonts/michroma-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Michroma";
  src: url("fonts/michroma-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1EFF;
}
@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1EFF;
}

:root {
  --night: #04070e;
  --pale: #f1ebdd;
  --soft: #d6cbb6;
  --dim: #b5a78e;
  --flame: #d9b36c;
  --hair: rgba(217, 179, 108, .3);
  --sans: "Barlow", "Segoe UI", sans-serif;
  --title: "Michroma", "Eurostile", "Segoe UI", sans-serif;
  --edge: clamp(1rem, 5vw, 4rem);
  --breath: clamp(4rem, 11vw, 9rem);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: dark; -webkit-text-size-adjust: 100%; background: var(--night); }

body {
  min-height: 100svh;
  overflow-x: clip;
  background: var(--night);
  color: var(--soft);
  font-family: var(--sans);
  font-size: 1.125rem;
  font-style: normal;
  font-synthesis: none;
  line-height: 1.65;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 75% at 50% 42%, #0a1322 0%, var(--night) 70%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: url("korn.png") 0 0 / 80px;
}

img { display: block; max-width: 100%; height: auto; }

.kerzenraum {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100svh + 6rem);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.kerze {
  position: absolute;
  inset: -5rem;
  mask-image: linear-gradient(#000 66%, transparent 88%);
  background:
    url("rauch.png") 0 0 / 100% 100%,
    radial-gradient(ellipse 36% 48% at 70% 36%, rgba(92, 113, 131, .22) 0, rgba(92, 113, 131, .1) 40%, rgba(92, 113, 131, 0) 100%);
  animation: light 4s .2s cubic-bezier(.3, 0, .4, 1) both;
}
@keyframes light {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes wandern {
  from { background-position: 0% 0%; }
  50% { background-position: 100% 30%; }
  to { background-position: 40% 100%; }
}
@keyframes appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 6;
  padding: .75rem 1rem;
  background: var(--night);
  color: var(--pale);
}
.skip:focus { top: 1rem; }

.kopf, main, .fuss { position: relative; z-index: 1; }
main { padding-top: clamp(2.5rem, 6vw, 5.5rem); }

.kopf {
  max-width: 78rem;
  margin: 0 auto;
  padding: 1rem var(--edge);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1.5rem;
  animation: appear 1.8s .4s ease both;
}
.logo { display: flex; align-items: center; min-height: 48px; }
.logo img { width: 210px; height: auto; }

.menu {
  min-height: 48px;
  padding: 0 .25rem 0 1rem;
  border: 0;
  background: none;
  color: var(--pale);
  font: inherit;
  letter-spacing: .03em;
  text-decoration: underline;
  text-decoration-color: rgba(217, 179, 108, .7);
  text-decoration-thickness: 1px;
  text-underline-offset: .32em;
  cursor: pointer;
}

#wege { display: flex; flex-direction: column; flex-basis: 100%; padding-bottom: .5rem; }
#wege.zu { display: none; }
#wege a {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--soft);
  letter-spacing: .03em;
  text-decoration: none;
  transition: color .4s ease;
}
#wege a:hover, #wege a[aria-current] { color: var(--flame); }

.teil {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 var(--edge);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
.teil + .teil { margin-top: clamp(4rem, 8vw, 7rem); }

h1, h2 {
  font-family: var(--title);
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--pale);
}
h1 { font-size: clamp(1.1rem, 1rem + .25vw, 1.2rem); letter-spacing: .1em; margin-bottom: 1.25rem; }
h2 { font-size: 1rem; letter-spacing: .08em; margin-bottom: 1rem; }

.text { max-width: 33rem; animation: appear 2s .9s ease both; }
.text p + p { margin-top: 1rem; }
.text p + h2 { margin-top: 2.5rem; }
.lead { color: var(--pale); font-size: 1.25rem; line-height: 1.55; }
.hinweis { color: var(--flame); }

.siegelbild {
  order: -1;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  aspect-ratio: 1;
  animation: appear 3s .4s ease both;
}
.siegelbild canvas, .siegelbild img { display: block; width: 100%; height: 100%; }
.siegelbild img {
  filter: grayscale(1) sepia(.4) hue-rotate(170deg) saturate(1.5) brightness(.8);
  mask-image: radial-gradient(closest-side, #000 90%, transparent);
}

.licht {
  position: relative;
  width: min(100%, 24rem);
  margin: 2rem auto;
  animation: appear 2.4s 1.2s ease both;
}

.bild {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  mask-image:
    linear-gradient(to right, transparent 0, rgba(0, 0, 0, .18) 14%, rgba(0, 0, 0, .62) 30%, #000 46%, #000 68%, rgba(0, 0, 0, .62) 82%, rgba(0, 0, 0, .2) 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .55) 7%, #000 16%, #000 62%, rgba(0, 0, 0, .55) 80%, rgba(0, 0, 0, .14) 92%, transparent 100%);
  mask-composite: intersect;
}
.bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.bild img, .siegelbild, .kennung img {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.bild::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: soft-light;
  background: radial-gradient(ellipse 62% 42% at 50% 50%, rgba(226, 236, 246, .72), transparent 76%) 0 0 / 200% 200% no-repeat;
  animation: wandern 26s ease-in-out infinite alternate;
}
.schatten {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(4, 7, 14, .62) 8%, rgba(4, 7, 14, .14) 52%, transparent 74%);
}

.blatt h1 { margin-bottom: 0; }

.era + .era {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--hair);
}

.abschluss {
  margin-top: var(--breath);
  padding: 0 var(--edge);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.weiter {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.25rem;
  color: var(--pale);
  font-size: 1.2rem;
  letter-spacing: .03em;
  text-decoration: underline;
  text-decoration-color: rgba(217, 179, 108, .7);
  text-decoration-thickness: 1px;
  text-underline-offset: .32em;
  transition: color .4s ease;
}
.weiter:hover { color: var(--flame); }
button.weiter { background: none; border: 0; font-family: inherit; cursor: pointer; }

.bald {
  margin: auto;
  padding: 2.5rem 3rem 1.5rem;
  border: 1px solid var(--hair);
  background: var(--night);
  color: var(--pale);
  text-align: center;
  opacity: 0;
  transition: opacity .6s ease, overlay .6s allow-discrete, display .6s allow-discrete;
}
.bald:popover-open { opacity: 1; }
@starting-style {
  .bald:popover-open { opacity: 0; }
}
.bald::backdrop { background: rgba(4, 7, 14, .72); }
.bald p {
  margin-bottom: 1rem;
  font-family: var(--title);
  font-size: 1.2rem;
  text-transform: uppercase;
}

.fuss {
  max-width: 78rem;
  margin: var(--breath) auto 0;
  padding: 1.25rem var(--edge) 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 2rem;
  border-top: 1px solid var(--hair);
  color: var(--dim);
  font-size: .95rem;
}
.fuss p, .fuss a { display: flex; align-items: center; min-height: 48px; }
.fuss a {
  color: var(--dim);
  text-decoration-color: rgba(217, 179, 108, .45);
  text-underline-offset: .25em;
  transition: color .4s ease;
}
.fuss a:hover { color: var(--flame); }

.akte { align-items: start; }
.kennung {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0 1rem;
  animation: appear 2s .9s ease both;
}
.kennung h1 { margin-bottom: 0; }
.kennung img {
  width: 7.5rem;
  filter: grayscale(1) sepia(.4) hue-rotate(170deg) saturate(1.5) brightness(.8);
  mask-image: radial-gradient(closest-side, #000 90%, transparent);
}

.blaetter { min-width: 0; animation: appear 2s 1.1s ease both; }
.abschnitt + .abschnitt {
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--hair);
}
.inhalt {
  overflow: hidden;
  transition: filter .7s ease, opacity .7s ease;
}
.inhalt p + p { margin-top: 1rem; }
.dunkel .inhalt { filter: blur(12px); opacity: .12; transition: none; }

.protected {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
@media print {
  .protected, .schutz { display: none; }
}

:focus-visible { outline: 1px solid var(--flame); outline-offset: 3px; }
::selection { background: var(--flame); color: var(--night); }

@media (min-width: 62rem) {
  .logo img { width: 250px; }
  .menu { display: none; }
  .kopf { flex-wrap: nowrap; padding-top: 1.5rem; }
  #wege, #wege.zu { display: flex; flex-direction: row; flex-basis: auto; gap: 1.5rem; padding: 0; }
  #wege a { font-size: 1rem; }

  .teil { gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
  .auftakt { grid-template-columns: minmax(0, 28rem) minmax(0, 630px); justify-content: space-between; }
  .gebot { grid-template-columns: minmax(0, 27rem) minmax(0, 33rem); justify-content: center; }
  .blatt { grid-template-columns: minmax(0, 27rem) minmax(0, 33rem); justify-content: space-between; align-items: start; }
  .akte { grid-template-columns: minmax(0, 20rem) minmax(0, 40rem); justify-content: space-between; align-items: start; }

  .siegelbild { order: 0; margin-inline: 0; justify-self: end; }

  .kennung { position: sticky; top: 2rem; display: block; }
  .kennung h1 { margin-bottom: 1.5rem; }
  .kennung img { width: 100%; max-width: 16rem; margin-bottom: 1rem; }
}

@media (min-width: 62rem) and (max-width: 75rem) {
  #wege { gap: 1rem; }
  #wege a { font-size: .95rem; }
}

@media (max-width: 61.99rem) {
  .kerze {
    background:
      url("rauch.png") 0 0 / 100% 100%,
      radial-gradient(ellipse 88% 42% at 50% 26%, rgba(92, 113, 131, .2) 0, rgba(92, 113, 131, .09) 40%, rgba(92, 113, 131, 0) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kerze, .kopf, .text, .siegelbild, .licht, .bild::after, .kennung, .blaetter { animation: none; }
  #wege a, .weiter, .bald, .fuss a, .inhalt { transition: none; }
}