/* mypacing — modern.css
 * Sitweite Interaktions- und Bewegungsschicht (2026-Design-Update), additiv zu den
 * bestehenden Seiten-Stylesheets. Wird auf JEDER Seite NACH dem Seiten-<style> geladen,
 * damit sie bestehende Farben/Variablen respektiert, aber Kanten abrundet, Tiefe und
 * gezielte, ruhige Bewegung hinzufügt.
 *
 * Leitplanke: Menschen mit Long COVID/ME-CFS/POTS reagieren teils empfindlich auf
 * Bewegung/Flackern (kognitive Belastung, Reizüberflutung). Deshalb: Bewegung ist
 * IMMER dezent (kurze Distanzen, sanftes Easing), NIE blinkend/schnell, und
 * @media (prefers-reduced-motion: reduce) schaltet grundsätzlich auf „aus".
 */

/* -- Cross-Document View Transitions (progressive enhancement, nur unterstützende Browser) -- */
@view-transition { navigation: auto; }

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

/* -- Auswahl & Scrollbar, dezent an die Markenfarbe angepasst -- */
::selection { background: var(--good, #2E7D6B); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--good, #2E7D6B) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line, #E1E7E2); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--good, #2E7D6B); }

/* -- Header: mehr Tiefe beim Scrollen (Glassmorphism 2.0) -- */
header { transition: box-shadow .35s ease, background-color .35s ease; }
header.mp-scrolled {
  box-shadow: 0 1px 0 rgba(30,43,40,.05), 0 12px 28px -18px rgba(30,43,40,.28);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

/* -- Kinetische Typografie: sparsam eingesetzter Verlaufstext für Hervorhebungen -- */
.grad-text, em.grad-text, h1 em.grad-text, .hero h1 em.grad-text {
  background: linear-gradient(100deg, var(--good, #2E7D6B) 0%, var(--accent, #3AA894) 45%, var(--lilac, #6E6AC6) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}

/* -- Buttons: sanftes Heben + weicher Glanz beim Hover, ohne bestehendes .btn zu ersetzen -- */
.btn { transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, background-color .22s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(30,43,40,.35); }
.btn:active { transform: translateY(0); }

/* -- Karten/Boxen: minimaler 3D-Tilt bei Maus-Hover (nur pointer:fine, siehe modern.js) -- */
.mp-tilt {
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
  transform: perspective(900px) rotateX(calc(var(--my, 0) * -3deg)) rotateY(calc(var(--mx, 0) * 3deg));
  will-change: transform;
}
.mp-tilt:hover { box-shadow: 0 18px 40px -20px rgba(30,43,40,.32); }

/* -- Scroll-Reveal: Startzustand wird ausschließlich per JS gesetzt (siehe modern.js),
      damit ohne JavaScript IMMER alles sofort sichtbar bleibt. -- */
.mp-reveal-init { opacity: 0; transform: translateY(14px); }
.mp-reveal-visible {
  opacity: 1; transform: translateY(0);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .mp-reveal-init { opacity: 1; transform: none; }
  .mp-tilt { transform: none !important; }
}

/* -- Bento-Grid-Baustein für neue, modulare Feature-Flächen -- */
.bento { display: grid; gap: 14px; grid-template-columns: repeat(6, 1fr); }
.bento > * { grid-column: span 6; border-radius: 20px; }
.bento .b-2 { grid-column: span 2; }
.bento .b-3 { grid-column: span 3; }
.bento .b-4 { grid-column: span 4; }
@media (max-width: 900px) { .bento > * { grid-column: span 6 !important; } }

/* -- Zähler-Animation (Zahlen zählen beim Sichtbarwerden hoch, siehe modern.js) -- */
.mp-count { font-variant-numeric: tabular-nums; }

/* -- Fokuszustände zusätzlich verstärkt für Tastatur-Nutzung -- */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--good, #2E7D6B); outline-offset: 3px; border-radius: 4px;
}