/* werkier.de – Feinschliff nach Apple-Design-Prinzipien (DE + PL Startseite)
 * Wird NACH motion.css geladen und überschreibt nur Verhalten und Typografie.
 * Layout, Farben, Texte, Hero-Sequenz, Icons und Lichtkugeln bleiben unverändert.
 * Zum Zurückdrehen: die <link>-Zeile auf /apple.css in index.html und pl/index.html entfernen.
 */

:root {
  /* Feder: kritisch gedämpft (damping 1.0), kein Überschwingen.
     Fallback für Browser ohne linear(): weiche Ease-out-Kurve. */
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.0512, 0.1628, 0.2936, 0.4219, 0.5372, 0.6356, 0.7168, 0.7822, 0.8339, 0.8743, 0.9054, 0.9292, 0.9473, 0.9609, 0.9711, 0.9787, 0.9843, 0.9885, 0.9916, 1);
  }
}

/* Response: kein Tap-Delay, kein graues Aufblitzen beim Antippen */
a, button, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Feedback auf Pointer-Down: sofort, nicht erst beim Loslassen.
   Die Rückkehr aus dem Druck läuft über die Feder. */
.btn, .menu-btn, .nav ul a, .brand, .event a.more {
  transition-property: transform, opacity, background-color, color, box-shadow, border-color;
  transition-duration: 0.45s;
  transition-timing-function: var(--spring);
}
.btn:active, .menu-btn:active, .nav ul a:active, .brand:active, .event a.more:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
  transition-timing-function: ease-out;
}
summary { transition: opacity 0.2s ease; }
summary:active { opacity: 0.6; transition-duration: 0.08s; }

/* Hover-Zustände nur mit Maus – kein „klebendes" Hover auf dem Handy */
@media (hover: none) {
  .btn:hover { transform: none; opacity: 1; }
  .nav ul a:hover { color: var(--muted); }
  .site-footer a:hover { color: inherit; }
}

/* Scroll-Reveal: kürzerer Weg, Feder statt Ease, Opazität schneller.
   Kein Blur-Filter mehr – der kostet beim Scrollen viel Rechenleistung. */
html.motion .mo {
  transform: translateY(28px);
  filter: none;
  transition:
    opacity 0.55s ease-out,
    transform 0.9s var(--spring);
  transition-delay: var(--mo-delay, 0ms);
}

/* Material: Header als Glasschicht mit heller Oberkante */
header {
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Typografie: Spurweite folgt der Größe (große Schrift enger), ruhige Umbrüche */
h1, h2, h3, .statement, .contact h2 { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }
.hero h1 { letter-spacing: -0.03em; line-height: 1.08; }
h2 { letter-spacing: -0.02em; }
h3 { letter-spacing: -0.01em; }
.eyebrow { letter-spacing: 0.15em; }

/* Reduzierte Transparenz: Glas wird zur festen Fläche */
@media (prefers-reduced-transparency: reduce) {
  header {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Mehr Kontrast: klare Kanten */
@media (prefers-contrast: more) {
  header { background: var(--bg); }
  .card, .price, .step, blockquote, .event, .btn-ghost { border-color: var(--muted); }
}

/* Reduzierte Bewegung: nichts springt, Zustände wechseln nur kurz */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .menu-btn:active, .nav ul a:active, .brand:active, .event a.more:active { transform: none; }
}