/* Shared responsive/behavioral styles.
   Colors and one-off spacing stay inline (as authored in the design);
   this file only adds what plain inline styles can't: hover states,
   focus states, responsive breakpoints and print rules. */

html {
  scroll-behavior: smooth;
}

a, button, input, textarea {
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid oklch(42% 0.09 145);
  outline-offset: 2px;
}

input:focus, textarea:focus {
  border-color: oklch(42% 0.09 145) !important;
  outline: none;
}

/* Hamburger menu button: hidden on desktop, shown under the mobile breakpoint below */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: oklch(23% 0.02 50);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Hero entrance animation (index.html):
   the background image "settles" from a slight zoom to rest over 7s,
   then heading / subtitle / buttons rise in, staggered. */
@keyframes hero-bg-settle {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}
@keyframes hero-reveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-bg {
  transform-origin: center;
  will-change: transform;
  animation: hero-bg-settle 7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-reveal {
  animation: hero-reveal 0.7s ease-out both;
}
.hero-reveal-1 { animation-delay: 0.2s; }
.hero-reveal-2 { animation-delay: 0.38s; }
.hero-reveal-3 { animation-delay: 0.56s; }

@media (prefers-reduced-motion: reduce) {
  .hero-bg,
  .hero-reveal {
    animation: none !important;
  }
}

/* Scroll reveal: sections fade + rise into view once as they are scrolled to.
   main.js adds .js-reveal on <html> (only when motion is allowed and
   IntersectionObserver exists) and .is-visible on each element when it enters
   the viewport. Without JS, or with reduced motion, nothing here matches and
   the content just shows normally. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out,
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered variant: the container stays put, its direct children rise in one
   after another. */
.js-reveal [data-reveal="stagger"] {
  opacity: 1;
  transform: none;
  transition: none;
}
.js-reveal [data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease-out,
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.js-reveal [data-reveal="stagger"].is-visible > * {
  opacity: 1;
  transform: none;
}
.js-reveal [data-reveal="stagger"].is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.js-reveal [data-reveal="stagger"].is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.js-reveal [data-reveal="stagger"].is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.js-reveal [data-reveal="stagger"].is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.js-reveal [data-reveal="stagger"].is-visible > *:nth-child(6) { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal],
  .js-reveal [data-reveal] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Responsive grids: collapse multi-column layouts on small screens */
@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }
  .grid-span-2 {
    grid-column: span 1 !important;
  }
  .hero-title {
    font-size: 34px !important;
  }
  .hero-section {
    height: 520px !important;
  }
  header > div {
    padding: 14px 20px !important;
    position: relative;
  }
  .nav-toggle {
    display: flex;
  }
  .site-nav {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: oklch(97% 0.012 75);
    border-bottom: 1px solid oklch(85% 0.015 75);
    box-shadow: 0 10px 20px oklch(20% 0.02 50 / 0.1);
    padding: 4px 20px 20px;
  }
  .site-nav.open {
    display: flex !important;
  }
  .site-nav a {
    padding: 13px 4px !important;
    border-bottom: 1px solid oklch(90% 0.012 75);
    width: 100%;
  }
  .site-nav a:last-child {
    border-bottom: none;
    margin-top: 10px;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .form-row-2 {
    grid-template-columns: 1fr !important;
  }
}

/* Form feedback */
.form-status {
  font-size: 14px;
  margin: 14px 0 0;
  display: none;
}
.form-status.visible {
  display: block;
}
.form-status.success {
  color: oklch(42% 0.09 145);
}
.form-status.error {
  color: oklch(50% 0.18 30);
}

button[disabled] {
  opacity: 0.65;
  cursor: not-allowed !important;
}

/* Print: used by the "Als PDF herunterladen" button (window.print).
   Only the Beitrittserklärung itself is printed, as a clean A4 sheet. */
.print-only {
  display: none;
}
@page {
  size: A4;
  margin: 0; /* removes the browser's own date/URL header and footer */
}
@media print {
  header, footer, .no-print {
    display: none !important;
  }
  html, body {
    background: #fff !important;
  }
  body > div {
    background: #fff !important;
    min-height: 0 !important;
  }
  .print-only {
    display: block !important;
  }
  .print-sheet {
    max-width: none !important;
    padding: 0 !important;
  }
  .print-card {
    border: none !important;
    border-radius: 0 !important;
    background: #fff !important;
    padding: 16mm 20mm !important;
    color: #000;
  }
  .print-card * {
    color: #000 !important;
  }
  /* keep the two-column field rows even though A4 is narrower than the mobile breakpoint */
  .form-row-2 {
    grid-template-columns: 1fr 1fr !important;
  }
  .form-row-2[style*="2fr"] {
    grid-template-columns: 2fr 1fr !important;
  }
  /* fields look like lines on paper; empty ones stay blank for handwriting */
  .print-card input[type="text"],
  .print-card input[type="tel"],
  .print-card input[type="email"],
  .print-card input[type="number"],
  .print-card input[type="date"] {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    padding: 4px 2px !important;
    -webkit-appearance: none;
    appearance: none;
  }
  .print-card input::placeholder {
    color: transparent !important;
  }
  .print-card input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
  }
  .print-card input.is-empty {
    color: transparent !important;
  }
  .print-sign {
    display: flex !important;
    gap: 48px;
    margin-top: 40px;
  }
  .print-sign > div {
    flex: 1;
    font-size: 12px;
  }
  .print-sign > div:first-child {
    flex: 0 0 35%;
  }
  .print-sign span {
    display: block;
    height: 32px;
    border-bottom: 1px solid #000;
    margin-bottom: 4px;
  }
  .print-card a {
    text-decoration: none;
  }
}