/*
 * Phase 3: Ergänzungen für WCAG 2.2, Fokusführung, reduzierte Bewegung,
 * nachträglich eingefügte Layout-Hilfsklassen und den Start-Hinweis.
 * Separat vom generierten Astro-CSS, weil der ursprüngliche Astro-Quellstand
 * nicht vorliegt.
 * Version: 4
 */

:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 3px solid #a66000;
  outline-offset: 3px;
}

.input:focus-visible {
  border-color: #a66000;
  outline: 3px solid #a66000;
  outline-offset: 2px;
}

.mode-option:has(input:focus-visible) {
  outline: 3px solid #a66000;
  outline-offset: 3px;
}

main,
[id] {
  scroll-margin-top: 6rem;
}

footer a,
header nav a {
  min-height: 1.5rem;
}

button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.cf-turnstile {
  min-height: 70px;
}

img.h-14.w-auto {
  width: 3.5rem;
}

img.h-10.w-auto {
  width: 2.5rem;
}

/*
 * Diese Klassen wurden erst nach dem Astro-/Tailwind-Build in die statischen
 * Rechtstextseiten eingefügt und fehlen deshalb im generierten Basis-CSS.
 */
.max-w-4xl {
  max-width: 56rem;
}

.pt-7 {
  padding-top: 1.75rem;
}

:where(.space-y-7 > :not(:last-child)) {
  margin-block-end: 1.75rem;
}

:where(.space-y-8 > :not(:last-child)) {
  margin-block-end: 2rem;
}

/*
 * Start-Hinweis: bewusst unregelmäßige Papierkante, dezente Knicke und
 * halbtransparentes, abgerissenes Tape. Der Text bleibt auf einer ruhigen
 * Fläche, damit die Gestaltung nicht zulasten der Lesbarkeit geht.
 */
.homepage-hero__inner {
  position: relative;
}

.homepage-start-note {
  position: absolute;
  z-index: 3;
  top: clamp(2.5rem, 8vw, 6rem);
  right: clamp(-0.5rem, 2vw, 2rem);
  display: grid;
  gap: 0.35rem;
  width: clamp(15rem, 25vw, 19rem);
  padding: 1.9rem 1.65rem 1.6rem;
  color: #07101c;
  text-align: left;
  text-transform: uppercase;
  transform: rotate(-3.5deg);
}

.homepage-start-note small,
.homepage-start-note strong {
  position: relative;
  z-index: 2;
  display: block;
}

.homepage-start-note small {
  justify-self: start;
  margin-bottom: 0.25rem;
  padding: 0.36rem 0.5rem 0.32rem;
  color: #fff8ea;
  background: #07101c;
  font: 800 clamp(0.68rem, 1.1vw, 0.84rem)/1 Arial, sans-serif;
  letter-spacing: 0.13em;
}

.homepage-start-note strong {
  font: 900 clamp(1.05rem, 2vw, 1.55rem)/1.02 Arial, sans-serif;
  letter-spacing: -0.035em;
}

.homepage-start-note::before {
  position: absolute;
  z-index: 3;
  top: -1.05rem;
  left: 50%;
  width: 7.2rem;
  height: 2.15rem;
  content: "";
  background:
    linear-gradient(100deg, transparent 0 47%, rgba(108, 74, 10, 0.13) 48%, rgba(255, 255, 255, 0.22) 50%, transparent 52%),
    repeating-linear-gradient(6deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 5px),
    rgba(255, 211, 108, 0.88);
  clip-path: polygon(
    1% 12%, 8% 5%, 16% 9%, 24% 3%, 33% 8%, 43% 2%, 52% 7%, 62% 1%,
    71% 6%, 81% 2%, 90% 8%, 99% 3%, 96% 22%, 100% 39%, 96% 55%,
    99% 73%, 94% 96%, 84% 91%, 75% 98%, 65% 93%, 55% 99%, 45% 94%,
    34% 99%, 24% 93%, 14% 98%, 3% 91%, 6% 72%, 1% 55%, 5% 37%
  );
  box-shadow: 0 0.22rem 0.35rem rgba(7, 16, 28, 0.16);
  transform: translateX(-50%) rotate(3deg);
}

.homepage-start-note::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 30% 40%, rgba(53, 38, 12, 0.06) 0 0.55px, transparent 0.8px 4px),
    linear-gradient(132deg, transparent 0 46%, rgba(96, 70, 21, 0.08) 46.4%, rgba(255, 255, 255, 0.55) 47%, transparent 47.6%),
    linear-gradient(38deg, transparent 0 67%, rgba(96, 70, 21, 0.07) 67.4%, rgba(255, 255, 255, 0.5) 68%, transparent 68.6%),
    linear-gradient(84deg, transparent 0 22%, rgba(69, 48, 13, 0.055) 22.4%, transparent 23.2%),
    linear-gradient(164deg, transparent 0 74%, rgba(69, 48, 13, 0.06) 74.5%, transparent 75.2%),
    radial-gradient(ellipse at 14% 18%, rgba(122, 86, 22, 0.08), transparent 25%),
    radial-gradient(ellipse at 88% 73%, rgba(122, 86, 22, 0.07), transparent 28%),
    #fff8ea;
  clip-path: polygon(
    1% 3%, 9% 1%, 18% 2.5%, 29% 0.5%, 40% 2%, 51% 0.5%, 62% 2.5%, 72% 1%,
    84% 2%, 92% 0.5%, 99% 3%, 98% 14%, 100% 25%, 98.5% 37%, 100% 49%,
    98% 62%, 99.5% 73%, 97.5% 84%, 99% 97%, 89% 98.5%, 79% 97%, 68% 99%,
    57% 97.5%, 47% 99.5%, 36% 97.5%, 25% 99%, 14% 97%, 2% 98.5%,
    3.5% 87%, 1% 76%, 2.5% 64%, 0.5% 52%, 2.5% 41%, 1% 29%, 3% 17%
  );
  filter:
    drop-shadow(0.38rem 0.42rem 0 #ffb000)
    drop-shadow(0.4rem 0.42rem 0 rgba(0, 0, 0, 0.32));
}

@media (max-width: 56rem) {
  .homepage-start-note {
    position: relative;
    top: auto;
    right: auto;
    width: min(19rem, 88vw);
    margin: 0 auto 2.8rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .homepage-start-note {
    animation: homepage-note-in 0.46s cubic-bezier(0.2, 0.85, 0.35, 1.2) both;
  }

  @keyframes homepage-note-in {
    from {
      opacity: 0;
      translate: 0 -1rem;
      scale: 0.94;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  :where(a, button, summary, input, textarea, select):focus-visible,
  .mode-option:has(input:focus-visible) {
    outline-color: Highlight;
  }

  .homepage-start-note {
    border: 2px solid CanvasText;
    background: Canvas;
  }

  .homepage-start-note::before,
  .homepage-start-note::after {
    display: none;
  }
}