/* stryct — shared styles: keyframes, hover/focus states, responsive layer.
   Das visuelle Design lebt bewusst in Inline-Styles (1:1 aus dem Claude-Design-Entwurf);
   diese Datei ergänzt nur, was Inline-Styles nicht können. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'IBM Plex Mono', monospace; -webkit-font-smoothing: antialiased; }

@keyframes reveal { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
@keyframes blink { 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
@keyframes mk1 { 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-3px,-3px); } }
@keyframes mk3 { 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(3px,3px); } }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes ldSq1 { from { opacity:0; transform:translate(-30px,-30px); } to { opacity:1; transform:translate(0,0); } }
@keyframes ldSq2 { from { opacity:0; transform:translate(0,0) scale(.72); } to { opacity:1; transform:translate(0,0) scale(1); } }
@keyframes ldSq3 { from { opacity:0; transform:translate(30px,30px); } to { opacity:1; transform:translate(0,0); } }
@keyframes ldFade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes gridpulse { 0%,100%{ opacity:0.3; } 50%{ opacity:0.65; } }

a { color: inherit; }

input, textarea, button { font-family: 'IBM Plex Mono', monospace; }
input::placeholder, textarea::placeholder { color: #6f6c66; }
input:focus, textarea:focus { outline: none; border-color: #f4f3f1 !important; }

/* Prinzipien-Karten (process): Invert on hover */
.principle { transition: background .25s ease, color .25s ease; }
.principle:hover { background: #0d0d0d !important; color: #f4f3f1; }
.principle:hover p { color: #a8a49c !important; }

/* FAQ */
.faq-q { user-select: none; }
.faq-a[hidden] { display: none; }

/* Tastatur-Fokus sichtbar, Maus-Fokus unauffällig */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* Timeline-Linie (process) */
.steps-grid { position: relative; --steps-col: 120px; }
.steps-line {
  position: absolute; left: var(--steps-col); top: 0; width: 2px; height: 100%;
  background: #0d0d0d; transform-origin: top; transform: scaleY(0); pointer-events: none;
}

/* ============ RESPONSIVE LAYER ============ */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 44px !important; }
  .grid-4 { grid-template-columns: 1fr 1fr !important; }
  .contact-grid, .proc-head-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 719px) {
  section, .sec { padding-left: 20px !important; padding-right: 20px !important; }
  .sec-pad { padding-top: 72px !important; padding-bottom: 72px !important; }
  .nav-inner { padding: 12px 20px !important; flex-wrap: wrap; row-gap: 10px; }
  .nav-links { gap: 16px !important; width: auto; }
  .nav-links .nav-cta { padding: 9px 12px !important; }
  .footer-inner { padding-left: 20px !important; padding-right: 20px !important; }
  .footer-cols { gap: 36px !important; }

  h1 { font-size: clamp(32px, 9.2vw, 44px) !important; }
  h2 { font-size: clamp(25px, 6.6vw, 32px) !important; }

  .grid-2, .grid-4, .grid-3, .project-grid { grid-template-columns: 1fr !important; }
  .grid-2 > div, .grid-4 > div { padding: 30px 24px !important; }
  .project-grid > div { border-right: none !important; }
  .project-grid > div:first-child { border-bottom: 1px solid #e0ddd7; }
  .project-copy { padding: 30px 24px !important; }

  .steps-grid { grid-template-columns: 48px 1fr !important; --steps-col: 48px; }
  .steps-grid .step-body { padding-left: 20px !important; }

  .cta-flex { gap: 32px !important; }
}

@media (max-width: 430px) {
  .nav-links { gap: 13px !important; font-size: 10px !important; }
}

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