/* denkt.digital – V5 */

@font-face {
  font-family: "Caveat Brush";
  src: url("fonts/caveat-brush-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #2b2d2f;
  --text: #f1eee6;
  --muted: #a9adb3;
  --yellow: #f5c400;
  --ink: #1c1d1f;
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Caveat Brush", cursive;
  --measure: 65ch;
  --gutter: 1.25rem;
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
}

h1,
h2,
p,
ul {
  margin: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--yellow);
}

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

.wordmark {
  font-family: var(--font-hand);
  font-weight: 400;
  color: var(--yellow);
  line-height: 1;
  white-space: nowrap;
}

/* ---------- Poster (Startseite) ---------- */

.poster-page {
  overflow: hidden;
}

.poster {
  --band: 36vh;
  --band: 36dvh;
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 22rem;
  overflow: hidden;
}

.scene {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 118vw;
  height: calc(var(--band) * 2);
  transform: translate(-50%, -50%) rotate(-5deg);
}

.tilt,
.breathe,
.land {
  position: absolute;
  inset: 0;
}

.land {
  isolation: isolate;
  transform-origin: 50% 50%;
}

.stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.claim {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -54%);
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: min(calc(var(--band) * 0.52), 15.5vw);
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
}

.ink {
  display: inline-block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Jedes Wort in eigener Box, damit seine Abdeckung nur dieses Wort freigibt */
.ink > span {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 0.18em 0.16em 0.24em;
  margin: -0.18em -0.16em -0.24em;
}

.w1 {
  transform: rotate(-0.9deg) translateY(0.02em);
}

.w2 {
  transform: rotate(0.6deg) translateY(-0.02em) scale(1.03);
}

/* Gelbe Abdeckung, die die Schrift von links nach rechts freigibt */
.ink > span::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.5em;
  width: calc(100% + 0.5em);
  background: linear-gradient(90deg, rgb(245 196 0 / 0), var(--yellow) 0.5em);
  opacity: 0;
  pointer-events: none;
}

.tagline {
  position: absolute;
  left: 0;
  right: 0;
  top: 80%;
  color: var(--muted);
  font-size: clamp(0.75rem, 1.1vw + 0.4rem, 1rem);
  letter-spacing: 0.32em;
  text-align: center;
  text-indent: 0.32em;
}

.grain {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 22%;
  bottom: 22%;
  overflow: hidden;
  mix-blend-mode: multiply;
  opacity: 0.2;
  pointer-events: none;
}

.grain > span {
  position: absolute;
  top: -128px;
  left: -128px;
  right: 0;
  bottom: 0;
  background-image: url("data:image/png;base64,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");
  background-size: 128px 128px;
}

/* Anthrazit-Abdeckung, die den Strich freimalt */
.paint {
  position: absolute;
  z-index: 3;
  top: -12%;
  bottom: -12%;
  left: -6%;
  width: 116%;
  background: linear-gradient(90deg, rgb(43 45 47 / 0), var(--bg) 7%);
  opacity: 0;
  pointer-events: none;
}

.poster-foot {
  position: fixed;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}

.poster-foot a {
  display: inline-block;
  padding: 0.45rem 0.2rem;
  text-decoration: none;
}

.poster-foot a:hover {
  text-decoration: underline;
}

/* Auftritt */
@media (prefers-reduced-motion: no-preference) {
  .paint {
    opacity: 1;
    animation: paint 1s cubic-bezier(0.55, 0.05, 0.3, 1) both;
  }

  .ink > span::after {
    opacity: 1;
  }

  .w1::after {
    animation: write 0.7s cubic-bezier(0.45, 0.1, 0.4, 1) 0.9s both;
  }

  .w2::after {
    animation: write 0.4s cubic-bezier(0.45, 0.1, 0.4, 1) 1.8s both;
  }

  .land {
    animation: settle 0.45s ease-out 0.8s both;
  }

  .tagline,
  .poster-foot {
    animation: appear 0.4s ease-out 2s both;
  }

  .live .tilt {
    will-change: transform;
  }

  .live .breathe {
    animation: breathe 7s ease-in-out 2.4s infinite;
  }

  .live .grain > span {
    animation: drift 60s linear infinite;
  }

  .claim.wet .ink {
    animation: wet 0.3s linear;
  }
}

@keyframes paint {
  from {
    transform: translateX(0);
  }

  99% {
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes write {
  from {
    transform: translateX(0);
  }

  99% {
    opacity: 1;
  }

  to {
    transform: translateX(105%);
    opacity: 0;
  }
}

@keyframes settle {
  0% {
    transform: scale(1, 1);
  }

  45% {
    transform: scale(1.004, 1.03);
  }

  100% {
    transform: scale(1, 1);
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.012);
  }
}

@keyframes drift {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(128px, 128px);
  }
}

@keyframes wet {
  0% {
    transform: translate(0, 0) rotate(0);
  }

  20% {
    transform: translate(0.6px, -0.5px) rotate(0.25deg);
  }

  40% {
    transform: translate(-0.7px, 0.4px) rotate(-0.3deg);
  }

  60% {
    transform: translate(0.5px, 0.3px) rotate(0.15deg);
  }

  80% {
    transform: translate(-0.3px, -0.2px) rotate(-0.1deg);
  }

  100% {
    transform: translate(0, 0) rotate(0);
  }
}

@media (max-width: 40rem) {
  .poster {
    --band: min(30vh, 58vw);
    --band: min(30dvh, 58vw);
  }
}

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--yellow);
  color: var(--bg);
  font-weight: 600;
  border-radius: 0.375rem;
}

.skip-link:focus {
  top: 0.75rem;
}

.wrap {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site-header .wrap {
  padding-top: 1.25rem;
  padding-bottom: 0.5rem;
}

.site-header .wordmark {
  font-size: 1.75rem;
  text-decoration: none;
}

.site-header .wordmark:hover {
  color: var(--yellow);
}

.legal {
  padding-top: 2rem;
  padding-bottom: 3.5rem;
}

.legal h1 {
  font-size: clamp(1.875rem, 7vw, 2.5rem);
  line-height: 1.2;
  font-weight: 650;
}

.legal h2 {
  margin-top: 2.25rem;
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 650;
}

.legal p,
.legal ul,
.legal address {
  max-width: var(--measure);
  margin-top: 0.9rem;
}

.legal address {
  font-style: normal;
}

.legal ul {
  padding-left: 1.25rem;
}

.legal li + li {
  margin-top: 0.35rem;
}

.legal a {
  overflow-wrap: anywhere;
}

.note {
  color: var(--muted);
  font-size: 0.9375rem;
}

.site-footer {
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}

.site-footer .wrap {
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}

.site-footer a {
  display: inline-block;
  padding: 0.45rem 0.2rem;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a[aria-current] {
  text-decoration: underline;
}

@media (min-width: 48rem) {
  :root {
    --gutter: 2rem;
  }
}