:root {
  color-scheme: dark;
  --forest: #153f2b;
  --forest-deep: #0b271b;
  --cream: #f3edda;
  --lime: #c9dd72;
  --white-soft: rgba(255, 255, 255, 0.9);
  --line: rgba(255, 255, 255, 0.42);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--forest-deep);
  color: var(--cream);
}

a {
  color: inherit;
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100svh;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

.hero__image,
.hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__image {
  z-index: 0;
  object-fit: cover;
  object-position: 64% center;
  animation: settle 1.8s ease-out both;
}

.hero__shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(8, 32, 21, 0.95) 0%, rgba(12, 39, 27, 0.82) 38%, rgba(7, 25, 17, 0.24) 72%, rgba(7, 25, 17, 0.18) 100%),
    linear-gradient(0deg, rgba(6, 23, 15, 0.92) 0%, transparent 38%, rgba(6, 23, 15, 0.68) 100%);
}

.sun-rays {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.sun-rays::before,
.sun-rays::after {
  content: "";
  position: absolute;
  inset: -5%;
  background-repeat: no-repeat;
  background-size: 105% 105%;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 0 24%, rgba(0, 0, 0, 0.78) 44%, transparent 82%);
  mask-image: radial-gradient(ellipse at 100% 0%, #000 0 24%, rgba(0, 0, 0, 0.78) 44%, transparent 82%);
  transform-origin: 100% 0%;
  will-change: opacity, transform;
}

.sun-rays::before {
  background-image: conic-gradient(
    from 191deg at 100% 0%,
    transparent 0deg 4deg,
    rgba(255, 249, 218, 0.13) 5.5deg,
    transparent 8deg 12deg,
    rgba(255, 246, 205, 0.11) 13.5deg,
    transparent 16deg 21deg,
    rgba(255, 250, 222, 0.13) 22.5deg,
    transparent 25deg 30deg,
    rgba(255, 244, 196, 0.1) 31.5deg,
    transparent 34deg 39deg,
    rgba(255, 249, 215, 0.12) 40.5deg,
    transparent 43deg 48deg,
    rgba(255, 246, 204, 0.09) 49.5deg,
    transparent 52deg 360deg
  );
  animation: rays-wander-a 11s ease-in-out -2s infinite alternate;
}

.sun-rays::after {
  background-image: conic-gradient(
    from 194deg at 100% 0%,
    transparent 0deg 7deg,
    rgba(255, 250, 224, 0.08) 9deg,
    transparent 11deg 18deg,
    rgba(255, 244, 196, 0.075) 20deg,
    transparent 22deg 29deg,
    rgba(255, 250, 220, 0.08) 31deg,
    transparent 33deg 41deg,
    rgba(255, 246, 204, 0.07) 43deg,
    transparent 45deg 54deg,
    rgba(255, 249, 216, 0.075) 56deg,
    transparent 58deg 360deg
  );
  animation: rays-wander-b 15s ease-in-out -8s infinite alternate;
}

.site-header,
.hero__content,
.site-footer {
  position: relative;
  z-index: 3;
  width: min(100% - 3rem, 90rem);
  min-width: 0;
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 2rem;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: block;
  text-decoration: none;
}

.wordmark__image {
  display: block;
  width: clamp(14rem, 27vw, 22rem);
  height: auto;
}

.contact-link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem;
  padding-inline: 0.2rem;
  color: var(--cream);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.contact-link svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: var(--lime);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  transition: transform 180ms ease;
}

.contact-link:hover svg,
.contact-link:focus-visible svg {
  transform: translateX(0.3rem);
}

.contact-link:focus-visible,
.wordmark:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 0.45rem;
}

.hero__content {
  align-self: center;
  padding-block: clamp(4rem, 10vh, 8rem);
}

.eyebrow {
  margin: 0 0 1.5rem;
  color: var(--lime);
  font-size: clamp(0.82rem, 0.85vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  animation: rise 700ms 120ms ease-out both;
}

h1 {
  max-width: 10ch;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4.4rem, 10vw, 9.8rem);
  font-weight: 400;
  letter-spacing: -0.07em;
  line-height: 0.79;
  text-wrap: balance;
  animation: rise 850ms 180ms ease-out both;
}

.intro {
  max-width: 38rem;
  margin: clamp(2.2rem, 5vw, 3.5rem) 0 0;
  color: var(--white-soft);
  font-size: clamp(1.08rem, 1.8vw, 1.45rem);
  line-height: 1.58;
  animation: rise 850ms 260ms ease-out both;
}

.promise {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
  color: var(--cream);
  font-size: clamp(0.95rem, 0.85vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  animation: rise 850ms 340ms ease-out both;
}

.promise p {
  margin: 0;
}

.promise__line {
  width: 3.2rem;
  height: 1px;
  background: var(--lime);
}

[hidden] {
  display: none !important;
}

.stay-button {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 3.4rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: 0 1.5rem;
  border: 1px solid var(--lime);
  background: var(--lime);
  color: var(--forest-deep);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
  animation: rise 850ms 420ms ease-out both;
}

.stay-button svg,
.stay-close svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.stay-button svg {
  transition: transform 180ms ease;
}

.stay-button:hover,
.stay-button:focus-visible {
  background: transparent;
  color: var(--lime);
}

.stay-button:hover svg,
.stay-button:focus-visible svg {
  transform: translateX(0.3rem);
}

.stay-button:focus-visible,
.stay-submit:focus-visible,
.stay-close:focus-visible,
.stay-note a:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 0.3rem;
}

.stay-dialog {
  width: min(100% - 2rem, 34rem);
  max-height: calc(100% - 2rem);
  padding: 0;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 88% 0%, rgba(201, 221, 114, 0.14), transparent 20rem),
    var(--forest-deep);
  color: var(--cream);
}

.stay-dialog::backdrop {
  background: rgba(4, 16, 10, 0.74);
  backdrop-filter: blur(0.2rem);
}

.stay-panel {
  position: relative;
  padding: clamp(1.75rem, 5vw, 2.75rem);
}

.stay-panel .eyebrow {
  margin-bottom: 1rem;
  padding-right: 3rem;
  animation: none;
}

.stay-panel h2 {
  margin: 0 0 1.25rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.stay-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: color 180ms ease;
}

.stay-close:hover {
  color: var(--lime);
}

.stay-text {
  margin: 0 0 1.5rem;
  color: var(--white-soft);
  font-size: 1.05rem;
  line-height: 1.6;
}

.stay-label {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.stay-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stay-row input {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 3.2rem;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.08);
  color: var(--cream);
  font: inherit;
  font-size: 1rem;
}

.stay-row input::placeholder {
  color: rgba(243, 237, 218, 0.5);
}

.stay-row input:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
  border-color: var(--lime);
}

.stay-submit {
  min-height: 3.2rem;
  padding: 0 1.4rem;
  border: 1px solid var(--lime);
  background: var(--lime);
  color: var(--forest-deep);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease;
}

.stay-submit:hover {
  background: #d8e78f;
}

.stay-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.stay-status {
  margin: 0.9rem 0 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid #e6a35c;
  background: rgba(176, 101, 32, 0.22);
  color: #f8d9bd;
  font-size: 0.95rem;
  line-height: 1.5;
}

.stay-note {
  margin: 1.4rem 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  line-height: 1.6;
}

.stay-note a {
  color: var(--cream);
  text-underline-offset: 0.2rem;
}

.stay-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--line);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}

.site-footer p {
  margin: 0;
}

.site-footer__meta {
  display: flex;
  grid-column: 3;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 0.35rem 0.65rem;
  white-space: nowrap;
}

/* Hinweis „KI-generiertes Bild“ mittig in der Fußleiste; die Erklärung erscheint
   bei Maus, Tastaturfokus und Antippen (Button bekommt Fokus bzw. Hover) */
.ai-note {
  position: relative;
  justify-self: center;
}

.ai-image-label {
  margin: 0;
  padding: 0.42rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(6, 23, 15, 0.58);
  color: rgba(255, 255, 255, 0.88);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  cursor: help;
  backdrop-filter: blur(0.35rem);
  transition: border-color 180ms ease, color 180ms ease;
}

.ai-image-label:hover,
.ai-image-label:focus-visible {
  border-color: var(--lime);
  color: var(--lime);
}

.ai-image-label:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 0.2rem;
}

.ai-note__tip {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  z-index: 4;
  width: max-content;
  max-width: min(18rem, calc(100vw - 2rem));
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--cream);
  color: var(--forest-deep);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 0.25rem);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

.ai-note__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 0.4rem solid transparent;
  border-top-color: var(--cream);
  transform: translateX(-50%);
}

.ai-note:hover .ai-note__tip,
.ai-image-label:focus + .ai-note__tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.site-footer__meta a {
  text-underline-offset: 0.25rem;
  transition: color 180ms ease;
}

.site-footer__meta a:hover,
.site-footer__meta a:focus-visible {
  color: var(--lime);
}

.site-footer__meta a:focus-visible,
.legal-back:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 0.3rem;
}

.legal-body {
  display: grid;
  min-height: 100svh;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(circle at 82% 12%, rgba(201, 221, 114, 0.12), transparent 28rem),
    var(--forest-deep);
}

.legal-page {
  width: min(100% - 3rem, 54rem);
  margin-inline: auto;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.legal-header {
  width: min(100% - 3rem, 90rem);
}

.legal-back {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--cream);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.legal-content {
  padding: 0;
}

.legal-content h1 {
  max-width: none;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  font-size: clamp(3.4rem, 8vw, 6.5rem);
  line-height: 0.92;
  animation: none;
}

.legal-content .eyebrow {
  margin: 0 0 1.5rem;
  color: var(--lime);
  font-size: clamp(0.82rem, 0.85vw, 0.95rem);
  line-height: 1.5;
  animation: none;
}

.legal-content h2 {
  margin: 2.5rem 0 0.8rem;
  color: var(--lime);
  font-size: clamp(0.82rem, 0.85vw, 0.92rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.legal-content p {
  max-width: 42rem;
  margin: 0;
  color: var(--white-soft);
  font-size: clamp(1.02rem, 1.1vw, 1.12rem);
  line-height: 1.72;
}

.legal-content a {
  color: var(--cream);
  text-underline-offset: 0.25rem;
}

.legal-content .legal-optout {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.06);
}

.legal-optout label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--cream);
  font-weight: 700;
  cursor: pointer;
}

.legal-optout input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--lime);
}

.legal-optout span {
  display: block;
  margin: 0.5rem 0 0 2rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.legal-note {
  margin-top: 3.5rem !important;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(1.2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes settle {
  from {
    opacity: 0.65;
    transform: scale(1.025);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rays-wander-a {
  from {
    opacity: 0.5;
    transform: translate3d(1vw, -0.4vh, 0) rotate(-0.35deg);
  }
  to {
    opacity: 0.9;
    transform: translate3d(-1.4vw, 0.6vh, 0) rotate(0.55deg);
  }
}

@keyframes rays-wander-b {
  from {
    opacity: 0.35;
    transform: translate3d(0.5vw, 0.5vh, 0) rotate(0.4deg);
  }
  to {
    opacity: 0.72;
    transform: translate3d(-1.1vw, -0.4vh, 0) rotate(-0.45deg);
  }
}

@media (min-width: 44.01rem) {
  .sun-rays {
    display: block;
  }
}

@media (max-width: 44rem) {
  .hero__image {
    object-position: 62% center;
  }

  .hero__shade {
    background:
      linear-gradient(90deg, rgba(7, 28, 18, 0.93) 0%, rgba(7, 28, 18, 0.68) 72%, rgba(7, 28, 18, 0.34) 100%),
      linear-gradient(0deg, rgba(6, 23, 15, 0.92) 0%, transparent 48%, rgba(6, 23, 15, 0.68) 100%);
  }

  .site-header,
  .hero__content,
  .site-footer {
    width: min(100% - 2rem, 90rem);
  }

  .site-header {
    padding-block: 1.35rem;
  }

  .wordmark__image {
    width: clamp(10.5rem, 48vw, 13rem);
  }

  .contact-link {
    gap: 0.35rem;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
  }

  .contact-link svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  h1 {
    font-size: clamp(3.8rem, 18vw, 5rem);
    line-height: 0.84;
  }

  .intro {
    max-width: 30rem;
    font-size: 1.05rem;
  }

  .site-footer {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 0.75rem;
    font-size: 0.8rem;
  }

  .site-footer__meta {
    grid-column: auto;
    justify-content: flex-start;
    justify-self: start;
    white-space: normal;
  }

  .ai-note {
    justify-self: start;
  }

  .ai-image-label {
    font-size: 0.69rem;
  }

  /* Auf schmalen Bildschirmen steht der Hinweis links, die Erklärung richtet sich daran aus */
  .ai-note__tip {
    left: 0;
    transform: translateY(0.25rem);
  }

  .ai-note__tip::after {
    left: 1.25rem;
  }

  .ai-note:hover .ai-note__tip,
  .ai-image-label:focus + .ai-note__tip {
    transform: none;
  }

  .stay-row .stay-submit {
    flex: 1 1 100%;
  }

  .legal-page {
    width: min(100% - 2rem, 54rem);
    padding-block: 3.75rem;
  }

  .legal-header {
    width: min(100% - 2rem, 90rem);
  }

  .legal-content h1 {
    font-size: clamp(2.9rem, 13vw, 4.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}