/* Ruhige Unterseiten (Impressum) in der Welt des Brunnens */
:root {
  --gold: #B4823A;
  --gold-hell: #F1DDB0;
  --serif: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
}

* { box-sizing: border-box; }

html { background: #030303; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(180, 130, 58, 0.10), rgba(3, 3, 3, 0) 70%), #030303;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.55;
  padding: 0 20px 96px;
}

.zurueck {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 auto;
  padding: 40px 0 8px;
  text-decoration: none;
}

.zurueck img { display: block; width: 64px; height: auto; }

.zurueck span {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(214, 166, 82, 0.9);
}

main {
  max-width: 34rem;
  margin: 0 auto;
}

h1 {
  margin: 40px 0 8px;
  font-size: clamp(36px, 6vw, 52px);
  font-weight: 300;
  font-style: italic;
  color: var(--gold-hell);
  text-align: center;
}

h2 {
  margin: 44px 0 10px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(214, 166, 82, 0.9);
}

p { margin: 0 0 14px; }

a { color: var(--gold-hell); text-decoration-color: rgba(241, 221, 176, 0.35); text-underline-offset: 3px; }
a:hover, a:focus-visible { text-decoration-color: var(--gold-hell); outline: none; }

.rand {
  position: fixed;
  bottom: max(14px, env(safe-area-inset-bottom));
  left: 20px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(241, 221, 176, 0.42);
  text-decoration: none;
}