:root {
  --dm-halo-outer-color: #ff160d;
  --dm-halo-outer-opacity: .32;
  --dm-halo-outer-blur: 34px;
  --dm-halo-outer-scale: 1.085;
  --dm-halo-middle-color: #ff5427;
  --dm-halo-middle-opacity: .48;
  --dm-halo-middle-blur: 15px;
  --dm-halo-middle-scale: 1.04;
  --dm-halo-inner-color: #ffb25a;
  --dm-halo-inner-opacity: .7;
  --dm-halo-inner-blur: 6px;
  --dm-halo-inner-scale: 1.025;
  --dm-grain-fine-halo-color: #ff5427;
  --dm-grain-coarse-halo-color: #ff160d;
  --dm-hero-scale: .6;
}

body { isolation: isolate; }

.signal-field,
.typing-streaks {
  filter:
    drop-shadow(0 0 var(--dm-halo-outer-blur) color-mix(in srgb, var(--dm-halo-outer-color) calc(var(--dm-halo-outer-effective-opacity, var(--dm-halo-outer-opacity)) * 72%), transparent))
    drop-shadow(0 0 var(--dm-halo-middle-blur) color-mix(in srgb, var(--dm-halo-middle-color) calc(var(--dm-halo-middle-effective-opacity, var(--dm-halo-middle-opacity)) * 76%), transparent))
    drop-shadow(0 0 var(--dm-halo-inner-blur) color-mix(in srgb, var(--dm-halo-inner-color) calc(var(--dm-halo-inner-effective-opacity, var(--dm-halo-inner-opacity)) * 82%), transparent));
}

.dm-effect-definitions {
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;
}

.wordmark,
.dm-halation-layer {
  position: relative;
  isolation: isolate;
  min-height: .9em;
  margin-bottom: calc(.65rem * var(--dm-hero-scale, 1));
  color: #f3f3f3;
  font-family: "GeistPixel-Line", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: calc(min(23cqw, 32cqh) * var(--dm-hero-scale, 1));
  font-weight: 400;
  line-height: .82;
  letter-spacing: .04em;
  text-shadow: -.018em 0 0 currentColor, .018em 0 0 currentColor;
  white-space: pre-line;
}

.dm-halation-stack {
  display: grid;
  place-items: center;
  isolation: isolate;
  transform: translateX(var(--dm-title-offset, 0px)) scale(var(--dm-title-scale, 1), calc(var(--dm-title-scale, 1) * .8));
  /* Hidden until the fit script has measured and scaled the title once,
     so a reload never flashes the unfitted wordmark. */
  visibility: hidden;
  /* Alternative: sanftes Einblenden. Zum Aktivieren die naechsten zwei
     Zeilen entkommentieren.
  opacity: 0;
  transition: opacity 2.5s ease;
  */
}
.dm-halation-stack.is-fitted { visibility: visible; opacity: 1; }

.hero-identity > [data-fit-wordmark] {
  visibility: hidden;
}
.hero-identity > [data-fit-wordmark].is-fitted { visibility: visible; }

.dm-halation-stack > * {
  grid-area: 1 / 1;
}

.wordmark {
  z-index: 4;
}

.wordmark-line {
  display: block;
  width: var(--dm-wordmark-line-width, max-content);
  margin-inline: auto;
  line-height: .75;
  text-align: center;
}

.wordmark-line--2 {
  margin-top: .025em;
}

/* A low pork-pie crown and narrow brim, printed in the lettering's scanlines.
   The halo copies inherit the same silhouette without changing text metrics. */
.wordmark-line--1 {
  position: relative;
}

.wordmark-line--1::before,
.wordmark-line--1::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: .785em;
  height: .31em;
  left: 50%;
  top: -.12em;
  transform: translateX(-48%) rotate(2.5deg) scale(1.05);
  transform-origin: 50% 100%;
  background: repeating-linear-gradient(to bottom,
    currentColor 0 .018em, transparent .018em .036em);
}

.wordmark-line--1::before {
  /* Tilted backwards: the lifted front brim hides the lower crown. */
  clip-path: polygon(18% 76%, 20% 14%, 25% 4%, 75% 4%,
    80% 14%, 82% 76%, 66% 63%, 34% 63%);
}

.wordmark-line--1::after {
  /* Curved front edge and visible underside, symmetric around the O. */
  clip-path: polygon(0 82%, 10% 74%, 25% 65%, 40% 59%,
    60% 59%, 75% 65%, 90% 74%, 100% 82%,
    93% 86%, 78% 94%, 61% 100%, 39% 100%,
    22% 94%, 7% 86%);
}

.dm-hat-3d .wordmark-line--1::before {
  width: .94em;
  height: .529em;
  /* Sits on the O: the brim covers the letter's top edge from the front. */
  top: -.28em;
  transform: translateX(-48%);
  clip-path: none;
  mask-image: var(--dm-hat-image);
  mask-mode: luminance;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  /* Screen-aligned scanlines, identical spacing at every rotation. */
  background: repeating-linear-gradient(to bottom,
    currentColor 0 .018em, transparent .018em .036em);
}

.dm-hat-3d .wordmark-line--1::after { content: none; }

.dm-hat-hit {
  position: absolute;
  left: 50%;
  z-index: 5;
  width: .94em;
  height: .529em;
  margin: -.28em 0 0;
  padding: 0;
  transform: translateX(-48%);
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  touch-action: manipulation;
}
.dm-hat-hit:focus-visible { outline: 1px dotted #e8e8e8; outline-offset: 3px; }
.dm-hat-3d .wordmark-line--1::before {
  /* The tiny visitor nudge from hat mode, in em; translate composes before the transform. */
  translate: calc(var(--dm-hat-x, 0) * 1em) calc(var(--dm-hat-y, 0) * 1em);
}
.dm-hat-hit[hidden] { display: none; }
body.dm-hat-mode .hero-identity { cursor: grab; touch-action: none; }
body.dm-hat-mode .hero-identity:active { cursor: grabbing; }

.hero-identity {
  --dm-scope-ratio: 2.39;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: calc(1.1rem * var(--dm-hero-scale, 1));
  width: min(100vw, calc(100svh * var(--dm-scope-ratio)));
  height: min(100svh, calc(100vw / var(--dm-scope-ratio)));
  container-type: size;
  container-name: dm-scope;
  transform: translate(-50%, -50%);
  text-align: center;
}

.hero-identity > p {
  max-width: none;
  min-width: 0;
  position: relative;
  width: var(--dm-wordmark-line-width, 18rem);
  /* A constant line slot: an empty or growing subtitle must not re-centre
     the grid and nudge DON MEDIEN upwards. */
  height: calc(var(--dm-wordmark-line-width, 275px) * .065);
  line-height: calc(var(--dm-wordmark-line-width, 275px) * .065);
  padding-inline: 0;
  color: #d8cdc9;
  font-size: calc(var(--dm-wordmark-line-width, 275px) * .05);
  letter-spacing: .2em;
  text-align: center;
  margin-top: calc(.35rem * var(--dm-hero-scale, 1));
  transform: none;
  background: none;
  filter:
    drop-shadow(0 0 12px rgb(255 84 39 / .52))
    drop-shadow(0 0 4px rgb(255 178 90 / .72));
}

.hero-identity > p::before,
.hero-identity > p::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(min(3.5rem, 8vw) * var(--dm-hero-scale, 1));
  height: 1px;
  pointer-events: none;
  /* The strips belong to the subtitle's entrance, not to the first paint. */
  opacity: 0;
  transition: opacity 2.5s ease;
}

.hero-identity > p.is-fitted::before,
.hero-identity > p.is-fitted::after {
  opacity: 1;
}

.hero-identity > p.is-fitted ~ .dm-visitor-halation {
  opacity: 1;
}

.hero-identity > p::before {
  right: 100%;
  background: linear-gradient(90deg, transparent, rgb(255 178 90 / .7));
}

.hero-identity > p::after {
  left: 100%;
  background: linear-gradient(90deg, rgb(255 178 90 / .7), transparent);
}

.hero-identity > p.is-fitted {
  /* Reveal trigger only: the tuned pre-fit typography must not change. */
}

.copy > p,
.contact-row {
  filter:
    drop-shadow(0 0 var(--dm-halo-outer-blur) color-mix(in srgb, var(--dm-halo-outer-color) calc(var(--dm-halo-outer-effective-opacity, var(--dm-halo-outer-opacity)) * 100%), transparent))
    drop-shadow(0 0 var(--dm-halo-middle-blur) color-mix(in srgb, var(--dm-halo-middle-color) calc(var(--dm-halo-middle-effective-opacity, var(--dm-halo-middle-opacity)) * 100%), transparent))
    drop-shadow(0 0 var(--dm-halo-inner-blur) color-mix(in srgb, var(--dm-halo-inner-color) calc(var(--dm-halo-inner-effective-opacity, var(--dm-halo-inner-opacity)) * 100%), transparent));
}

.dm-halation-layer {
  position: relative;
  pointer-events: none;
  mix-blend-mode: screen;
  transform-origin: center;
  will-change: filter, transform;
}

.dm-halation-layer--outer {
  z-index: 1;
  color: var(--dm-halo-outer-color);
  opacity: var(--dm-halo-outer-effective-opacity, var(--dm-halo-outer-opacity));
  filter: blur(var(--dm-halo-outer-blur));
  transform: scale(var(--dm-halo-outer-scale));
}

.dm-halation-layer--middle {
  z-index: 2;
  color: var(--dm-halo-middle-color);
  opacity: var(--dm-halo-middle-effective-opacity, var(--dm-halo-middle-opacity));
  filter: blur(var(--dm-halo-middle-blur));
  transform: scale(var(--dm-halo-middle-scale));
}

.dm-halation-layer--inner {
  z-index: 3;
  color: var(--dm-halo-inner-color);
  opacity: var(--dm-halo-inner-effective-opacity, var(--dm-halo-inner-opacity));
  filter: blur(var(--dm-halo-inner-blur));
  transform: scale(var(--dm-halo-inner-scale));
}

.wordmark[data-typing-active="true"]::after {
  width: .08em;
  height: .62em;
  margin-left: .04em;
  vertical-align: -.02em;
}

.lab-note {
  width: var(--dm-wordmark-line-width, min(26rem, calc(100vw - 4rem)));
  max-width: 100%;
  margin-top: calc(var(--dm-wordmark-line-width, 275px) * .16);
  justify-self: center;
  text-align: left;
}

.hero-identity .copy > p,
.hero-identity .contact-row {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: calc(var(--dm-wordmark-line-width, 275px) * .036);
  letter-spacing: .075em;
  line-height: 1.6;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  background: none;
}

.hero-identity .lab-note {
  opacity: 1;
  animation: none;
  transform: none;
}

.hero-identity .contact-row {
  min-height: 0;
  margin-top: calc(.75rem * var(--dm-hero-scale, 1));
  display: block;
  /* "get invited ::" holds the left edge of the text block, the address the
     right one. The figure spaces in the markup keep the invitation together. */
  text-align: justify;
  text-align-last: justify;
}

.dm-visitor-halation {
  width: var(--dm-wordmark-line-width, 18rem);
  margin-top: calc(1.2rem * var(--dm-hero-scale, 1));
  display: block;
  position: relative;
  touch-action: none;
  cursor: ew-resize;
  /* The slider fades in together with the subtitle's strips. */
  opacity: 0;
  transition: opacity 2.5s ease .2s;
  filter:
    drop-shadow(0 0 8px color-mix(in srgb, var(--dm-halo-middle-color) 58%, transparent))
    drop-shadow(0 0 3px color-mix(in srgb, var(--dm-halo-inner-color) 75%, transparent));
}

/* Reaching for the slider is enough: the hover zone reaches past the 12px
   track without changing the layout below it. */
.dm-visitor-halation::before {
  content: "";
  position: absolute;
  inset-block: -.7rem;
  inset-inline: 0;
}

.dm-visitor-halation input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 12px;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
  pointer-events: none;
}

.dm-visitor-halation input::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dm-halo-inner-color) 9%, var(--dm-halo-inner-color) 91%, transparent);
  clip-path: polygon(0 50%, 5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%);
  filter: drop-shadow(0 0 4px var(--dm-halo-inner-color));
}

.dm-visitor-halation input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: var(--dm-halo-inner-color);
  box-shadow: 0 0 10px var(--dm-halo-inner-color), 0 0 4px var(--dm-halo-middle-color);
}

.dm-visitor-halation input::-moz-range-track {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dm-halo-inner-color) 9%, var(--dm-halo-inner-color) 91%, transparent);
  clip-path: polygon(0 50%, 5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%);
}

.dm-visitor-halation input::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--dm-halo-inner-color);
  box-shadow: 0 0 10px var(--dm-halo-inner-color), 0 0 4px var(--dm-halo-middle-color);
}


.dm-grain {
  position: fixed;
  inset: -38%;
  z-index: 5;
  pointer-events: none;
  background: #000;
  mix-blend-mode: multiply;
  animation: dm-grain-jitter var(--dm-grain-duration) steps(9) infinite;
  animation-delay: var(--dm-grain-delay);
  animation-play-state: running;
  will-change: transform;
}

.dm-grain--fine {
  --dm-grain-duration: 8s;
  --dm-grain-delay: -1s;
  opacity: .23;
  filter: url(#dm-noise-fine);
}

.dm-grain--coarse {
  --dm-grain-duration: 6s;
  --dm-grain-delay: -4s;
  opacity: .18;
  filter: url(#dm-noise-coarse);
}

.dm-grain-paused .dm-grain { animation-play-state: paused; }

.dm-grain-hidden .dm-grain,
.dm-grain-hidden .dm-grain-halo {
  display: none;
}

.dm-grain-halo {
  position: fixed;
  inset: -38%;
  z-index: 6;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: dm-grain-jitter var(--dm-grain-duration) steps(9) infinite;
  animation-delay: var(--dm-grain-delay);
  animation-play-state: running;
  will-change: transform;
}

.dm-grain-halo--fine {
  --dm-grain-duration: 8s;
  --dm-grain-delay: -1s;
  background: var(--dm-grain-fine-halo-color);
  opacity: .1;
  filter: url(#dm-noise-fine) blur(3px);
}

.dm-grain-halo--coarse {
  --dm-grain-duration: 6s;
  --dm-grain-delay: -4s;
  background: var(--dm-grain-coarse-halo-color);
  opacity: .08;
  filter: url(#dm-noise-coarse) blur(6px);
}

.dm-grain-paused .dm-grain-halo { animation-play-state: paused; }

.dm-effects-panel {
  position: fixed;
  right: clamp(20px, 4vw, 54px);
  bottom: clamp(18px, 3vw, 38px);
  z-index: 7;
  display: flex;
  flex-direction: column;
  width: min(300px, calc(100vw - 40px));
  max-height: calc(100svh - 40px);
  overflow: hidden;
  padding: .85rem;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,8,8,.9);
  color: #b4b4b4;
  font: 10px/1.4 "GeistPixel-Line", "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .08em;
  backdrop-filter: blur(12px);
}

.dm-impressum-link {
  position: fixed;
  bottom: clamp(18px, 3vw, 38px);
  left: clamp(20px, 4vw, 54px);
  z-index: 7;
  color: #b4b4b4;
  font: 10px/1.4 "GeistPixel-Line", "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  filter: drop-shadow(0 0 7px rgb(255 84 39 / .3));
  transition: color .2s ease;
}

.dm-impressum-link:hover,
.dm-impressum-link:focus-visible {
  color: #fff;
}

.dm-legal-body {
  overflow: auto;
  background:
    radial-gradient(circle at 50% 0%, rgb(255 84 39 / .06), transparent 34rem),
    linear-gradient(135deg, #090909, #101010 54%, #080808);
}

.dm-legal-root {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  width: min(100% - clamp(2.5rem, 9vw, 10rem), 74rem);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.25rem) 0 clamp(1.5rem, 4vw, 3.25rem);
}

.dm-legal-header,
.dm-legal-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.dm-legal-mark {
  color: #f3f3f3;
  font: 400 clamp(1.25rem, 2.8vw, 2rem) / .72 "GeistPixel-Line", "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .03em;
  text-decoration: none;
  text-shadow: 0 0 12px rgb(255 178 90 / .42), 0 0 26px rgb(255 84 39 / .24);
}

.dm-legal-home,
.dm-legal-footer {
  color: #b4b4b4;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dm-legal-home,
.dm-legal-main a,
.dm-legal-footer a {
  color: inherit;
  text-decoration: none;
}

.dm-legal-home:hover,
.dm-legal-home:focus-visible,
.dm-legal-main a:hover,
.dm-legal-main a:focus-visible,
.dm-legal-footer a:hover,
.dm-legal-footer a:focus-visible {
  color: #fff;
}

.dm-legal-main {
  width: min(100%, 58rem);
  margin: clamp(5rem, 15svh, 10rem) 0 clamp(4rem, 12svh, 8rem);
}

.dm-legal-kicker {
  margin: 0 0 1rem;
  color: #b4b4b4;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.dm-legal-main h1 {
  max-width: none;
  margin: 0;
  color: #f3f3f3;
  font: 400 clamp(3.75rem, 10vw, 8rem) / .78 "GeistPixel-Line", "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: -.03em;
  text-shadow: 0 0 14px rgb(255 178 90 / .3), 0 0 36px rgb(255 84 39 / .18);
}

.dm-legal-rule {
  width: min(100%, 42rem);
  height: 1px;
  margin: clamp(2rem, 5vw, 4rem) 0;
  background: linear-gradient(90deg, var(--dm-halo-inner-color), rgb(255 178 90 / .4) 48%, transparent);
  box-shadow: 0 0 8px rgb(255 178 90 / .35);
}

.dm-legal-main h2 {
  margin: 0 0 .75rem;
  color: #f3f3f3;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.dm-legal-main p,
.dm-legal-main address {
  margin: 0;
  color: #c7c1be;
  font-size: clamp(.78rem, 1.2vw, .94rem);
  font-style: normal;
  letter-spacing: .025em;
  line-height: 1.75;
}

.dm-legal-lead {
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid rgb(255 255 255 / .12);
}

.dm-legal-lead address {
  color: #f3f3f3;
  font-size: clamp(1rem, 1.65vw, 1.3rem);
  line-height: 1.65;
}

.dm-legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem) clamp(2rem, 10vw, 9rem);
  padding: clamp(2rem, 5vw, 4rem) 0;
}

.dm-legal-notes {
  max-width: 46rem;
  padding-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid rgb(255 255 255 / .12);
}

.dm-legal-footer {
  margin-top: auto;
  padding-top: 2rem;
  border-top: 1px solid rgb(255 255 255 / .12);
}

.dm-effects-panel__header {
  order: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .55rem;
  padding-top: .65rem;
  border-top: 1px solid rgba(255,255,255,.12);
  text-transform: uppercase;
}

.dm-effects-panel__switches {
  order: 2;
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(255,255,255,.1);
}

.dm-effects-panel.is-collapsed .dm-effects-panel__switches {
  display: none;
}

.dm-effects-panel.is-collapsed {
  width: auto;
}

.dm-effects-panel.is-collapsed > :not(.dm-effects-panel__header),
.dm-effects-panel.is-collapsed .dm-grain-toggle,
.dm-effects-panel.is-collapsed .dm-hat-toggle {
  display: none;
}

/* Hat off: neither the 3D mask nor the flat fallback silhouette renders. */
.dm-hat-off .wordmark-line--1::before,
.dm-hat-off .wordmark-line--1::after {
  display: none;
}

.dm-effects-panel__body {
  order: 1;
  overflow-y: auto;
  min-height: 0;
}

.dm-effect-group {
  display: grid;
  gap: .55rem;
  padding: .7rem 0 .15rem;
}

.dm-effect-group + .dm-effect-group {
  margin-top: .55rem;
  border-top: 1px solid rgba(255,255,255,.1);
}

.dm-effect-group h2 {
  margin: 0;
  color: #e8e8e8;
  font: inherit;
  text-transform: uppercase;
}

.dm-effect-group label {
  display: grid;
  grid-template-columns: 64px 1fr 38px;
  align-items: center;
  gap: .55rem;
}

.dm-effect-group input[type="range"] {
  width: 100%;
  accent-color: #bcded7;
}

.dm-effect-group input[type="color"] {
  width: 100%;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
}

.dm-effect-group output {
  color: #e8e8e8;
  text-align: right;
}

.dm-grain-toggle,
.dm-hat-toggle,
.dm-panel-toggle {
  padding: .25rem .4rem;
  border: 0;
  background: transparent;
  color: #b4b4b4;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, opacity .2s ease, transform .2s ease;
}

.dm-grain-toggle:hover,
.dm-hat-toggle:hover,
.dm-grain-toggle:focus-visible,
.dm-hat-toggle:focus-visible,
.dm-panel-toggle:hover,
.dm-panel-toggle:focus-visible {
  color: #fff;
}

.dm-grain-toggle:focus-visible,
.dm-hat-toggle:focus-visible,
.dm-panel-toggle:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.dm-grain-toggle:active, .dm-hat-toggle:active { transform: scale(.98); }

@keyframes dm-grain-jitter {
  0%, 100% { transform: translate3d(0, 0, 0); }
  12% { transform: translate3d(-7%, -13%, 0); }
  24% { transform: translate3d(11%, 4%, 0); }
  36% { transform: translate3d(-17%, 8%, 0); }
  48% { transform: translate3d(5%, -25%, 0); }
  60% { transform: translate3d(-9%, 21%, 0); }
  72% { transform: translate3d(16%, -6%, 0); }
  84% { transform: translate3d(2%, 28%, 0); }
}

@media (max-width: 640px), (pointer: coarse) {
  .dm-grain--fine,
  .dm-grain-halo--fine { display: none; }
  .dm-grain--coarse {
    inset: -30%;
    opacity: .38;
  }
  .dm-grain-halo--coarse { inset: -30%; }

  .dm-effects-panel {
    right: 16px;
    bottom: 16px;
    max-height: 54svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dm-grain,
  .dm-grain-halo {
    inset: 0;
    animation: none;
    will-change: auto;
  }
  .dm-grain-toggle { display: none; }
}

@media (max-width: 640px) {
  .dm-impressum-link {
    left: 22px;
    bottom: 18px;
  }

  .dm-legal-root {
    width: min(100% - 2.75rem, 74rem);
  }

  .dm-legal-header,
  .dm-legal-footer {
    gap: 1rem;
  }

  .dm-legal-main {
    margin: 4.5rem 0;
  }

  .dm-legal-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .dm-legal-footer {
    flex-direction: column;
  }
}