/* viamoria, Corporate Design
   Farben aus dem CI: #294d4f / #4e8686 / #8baba2 / #d7bfb1
   ------------------------------------------------------------------ */

:root {
  --void:      #05100f;
  --deep:      #0b1c1d;
  --teal-900:  #294d4f;
  --teal-600:  #4e8686;
  --sage:      #8baba2;
  --sand:      #d7bfb1;
  --cream:     #efe7de;

  --text:      #ded7cf;
  --text-soft: rgba(239, 231, 222, .68);
  --text-dim:  rgba(239, 231, 222, .46);
  --rule:      rgba(139, 171, 162, .18);

  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --measure: 68ch;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--void);
  color: var(--text);
  font-family: var(--font);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(215, 191, 177, .28); color: var(--cream); }

:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 4px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: 50%; top: .75rem;
  transform: translate(-50%, -160%);
  z-index: 50;
  padding: .6rem 1.1rem;
  background: var(--cream); color: var(--teal-900);
  border-radius: 999px;
  font-size: .875rem; font-weight: 600; text-decoration: none;
  transition: transform .25s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ------------------------------------------------------------------
   Hintergrund: "Licht am Ende des Tunnels"
   ------------------------------------------------------------------ */

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.bg__base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 90% at 50% 44%, #123032 0%, #0b1f21 42%, var(--void) 100%);
}

/* Weiche, treibende Farbwolken */
.bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
}

.bg__blob--sage {
  width: 46vmax; height: 46vmax;
  left: -8vmax; top: -6vmax;
  background: radial-gradient(circle, rgba(139, 171, 162, .55) 0%, rgba(139, 171, 162, 0) 68%);
  animation: drift-a 34s var(--ease) infinite alternate;
}

.bg__blob--teal {
  width: 52vmax; height: 52vmax;
  right: -14vmax; bottom: -14vmax;
  background: radial-gradient(circle, rgba(78, 134, 134, .5) 0%, rgba(78, 134, 134, 0) 70%);
  animation: drift-b 44s var(--ease) infinite alternate;
}

.bg__blob--sand {
  width: 34vmax; height: 34vmax;
  left: 58%; top: 8%;
  background: radial-gradient(circle, rgba(215, 191, 177, .3) 0%, rgba(215, 191, 177, 0) 70%);
  animation: drift-c 38s var(--ease) infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14vw, 10vh, 0) scale(1.18); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-12vw, -8vh, 0) scale(.92); }
}
@keyframes drift-c {
  from { transform: translate3d(0, 0, 0) scale(.9); }
  to   { transform: translate3d(-16vw, 12vh, 0) scale(1.25); }
}

/* Ringe, die aus dem Licht heraus nach außen laufen, der Tunnel */
.bg__tunnel { position: absolute; inset: 0; }
.bg__tunnel::before,
.bg__tunnel::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: repeating-radial-gradient(
    circle at 50% var(--light-y, 46%),
    rgba(215, 191, 177, .16) 0 1px,
    transparent 1px 86px
  );
  will-change: transform, opacity;
  animation: rings 30s linear infinite;
}
.bg__tunnel::after { animation-delay: -15s; }

@keyframes rings {
  0%   { transform: scale(.3);  opacity: 0; }
  20%  { opacity: .5; }
  75%  { opacity: .18; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* Das Licht selbst */
.bg__beam {
  position: absolute;
  left: 50%;
  top: var(--light-y, 46%);
  width: 74vmin; height: 74vmin;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle,
      rgba(247, 240, 232, .34) 0%,
      rgba(215, 191, 177, .26) 22%,
      rgba(215, 191, 177, .10) 46%,
      rgba(215, 191, 177, 0) 72%);
  filter: blur(14px);
  will-change: transform, opacity;
  animation: breathe 11s ease-in-out infinite;
  transition: opacity .9s var(--ease), filter .9s var(--ease);
}

@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: .78; }
  50%      { transform: translate(-50%, -50%) scale(1.14); opacity: 1; }
}

/* Tunnelwand: Abdunkeln zum Rand hin */
.bg__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 66% at 50% var(--light-y, 46%),
    transparent 0%,
    rgba(5, 16, 15, .30) 50%,
    rgba(5, 16, 15, .80) 76%,
    var(--void) 100%);
}

/* Feines Korn gegen Banding */
.bg__grain {
  position: absolute;
  inset: 0;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
   Startseite
   ------------------------------------------------------------------ */

.stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 12vmin 6vw 6vmin;
}

.logo {
  margin: 0;
  line-height: 0;
}

.logo__img {
  display: block;
  width: clamp(260px, 44vw, 600px);
  height: auto;
  filter: drop-shadow(0 0 46px rgba(215, 191, 177, .22));
  transition: transform 1.1s var(--ease), filter 1.1s var(--ease);
  animation: rise 1.6s var(--ease) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.logo:hover .logo__img,
.logo:focus-within .logo__img {
  transform: translateY(-6px) scale(1.015);
  filter: drop-shadow(0 0 66px rgba(215, 191, 177, .42));
}

/* Beim Überfahren des Logos wird das Licht stärker */
body:has(.logo:hover) .bg__beam,
body:has(.logo:focus-within) .bg__beam {
  opacity: 1;
  filter: blur(10px) brightness(1.3);
}

/* ------------------------------------------------------------------
   Fuß
   ------------------------------------------------------------------ */

.footer {
  padding: 2.5rem 6vw calc(2.5rem + env(safe-area-inset-bottom));
  animation: fade-in 2s var(--ease) .5s both;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.footer__inner {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
  font-size: .875rem;
  letter-spacing: .02em;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 2rem;
}

.footer__meta {
  margin: 0;
  color: var(--text-dim);
  font-size: .8125rem;
}

/* Foerderhinweis */
.footer__funder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
}

.footer__funder-label {
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-dim);
}

.footer__funder-logo {
  display: block;
  width: clamp(196px, 26vw, 240px);
  height: auto;
  opacity: .82;
}

.link {
  color: var(--text-soft);
  text-decoration: none;
  padding-block: .25rem;
  transition: color .4s var(--ease);
}

.link:hover, .link:focus-visible { color: var(--sand); }

.link[aria-current="page"] { color: var(--sand); }

/* ------------------------------------------------------------------
   Rechtstexte
   ------------------------------------------------------------------ */

.page-legal { --light-y: 4%; }

.page-legal .bg__beam { width: 90vmin; height: 60vmin; opacity: .5; animation-duration: 16s; }
.page-legal .bg__tunnel { display: none; }
.page-legal .bg__blob { opacity: .34; }

.masthead {
  padding: 2.25rem 6vw 0;
}

.masthead__inner {
  max-width: var(--measure);
  margin: 0 auto;
}

.masthead__logo {
  display: inline-block;
  line-height: 0;
  transition: transform .5s var(--ease), filter .5s var(--ease);
}

.masthead__logo img {
  display: block;
  width: clamp(150px, 20vw, 210px);
  height: auto;
}

.masthead__logo:hover,
.masthead__logo:focus-visible {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 26px rgba(215, 191, 177, .35));
}

.prose {
  flex: 1;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4.5rem) 6vw 5rem;
}

.prose > * + * { margin-top: 1.1em; }

.prose h1 {
  margin: 0 0 .35em;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--cream);
}

.prose h2 {
  margin-top: 2.6em;
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--cream);
}

.prose h3 {
  margin-top: 2em;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--sage);
}

.prose h2 + p, .prose h3 + p, .prose h2 + ul, .prose h3 + ul { margin-top: .7em; }

.prose .lead {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  color: var(--text);
  margin-top: 0;
}

.prose p, .prose li { color: var(--text-soft); }

.prose ul {
  margin-left: 0;
  padding-left: 1.15em;
  list-style: none;
}

.prose ul > li { position: relative; margin-top: .5em; }

.prose ul > li::before {
  content: "";
  position: absolute;
  left: -1.15em; top: .72em;
  width: .38em; height: .38em;
  border-radius: 50%;
  background: var(--sand);
  opacity: .7;
}

.prose a {
  color: var(--sand);
  text-decoration: none;
  border-bottom: 1px solid rgba(215, 191, 177, .35);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}

.prose a:hover, .prose a:focus-visible {
  color: var(--cream);
  border-bottom-color: var(--cream);
}

.prose hr {
  margin: 3rem 0;
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--rule), transparent);
}

.prose .updated {
  margin-top: 3.5rem;
  font-size: .8125rem;
  color: var(--text-dim);
}

.toc {
  margin-top: 2rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.toc h2 {
  margin: 0 0 .8em;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-dim);
  font-weight: 600;
}
.toc ol {
  margin: 0;
  padding-left: 1.4em;
  columns: 2;
  column-gap: 2rem;
  font-size: .9375rem;
}
.toc li { margin-top: .35em; break-inside: avoid; color: var(--text-dim); }
.toc a { color: var(--text-soft); border-bottom-color: transparent; }
.toc a:hover, .toc a:focus-visible { color: var(--sand); border-bottom-color: rgba(215, 191, 177, .4); }

@media (max-width: 34rem) {
  .toc ol { columns: 1; }
}

/* ------------------------------------------------------------------
   Rücksicht auf Bewegungsempfindlichkeit
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .bg__tunnel { display: none; }
  .bg__beam { opacity: .85; }
}