/* ===== Bewegung nach Design-Engineering-Prinzipien, seitenuebergreifend ===== */
:root {
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
/* Globale Transition: kurz, nur Farben und transform/opacity/box-shadow, kein visibility */
--transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease,
  transform 200ms var(--ease-out), opacity 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

/* 6. Karten: gezielte Eigenschaften statt all. Preis-Karten und Listen sind keine Links, daher
 ohne Hover-Anhebung (auch nicht aus styles.min.css). */
body .pain-point-card { transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out); }
body .card:hover, body .home-card:hover { transform: none; }

/* Cookie-Buttons: kein transition: all */
body .cookie-btn {
transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease,
  transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), opacity 150ms ease;
}

/* 2., 4., 5. Hover-Effekte nur bei echtem Hover-Zeiger (Maus) */
@media (hover: hover) and (pointer: fine) {
body .btn-primary:hover, body .btn-secondary:hover { transform: translateY(-2px); }
body .pain-point-card:hover,
body .service-item-card:hover, body .stat-box:hover { transform: translateY(-4px); }
body .cookie-btn:hover { transform: translateY(-1px); }
}
/* Touch: Hover-Verschiebungen und Hover-Schatten aus den gemeinsamen Dateien neutralisieren */
@media (hover: none), (pointer: coarse) {
body .btn-primary:hover:not(:disabled), body .btn-secondary:hover:not(:disabled),
body .pain-point-card:hover, body .service-item-card:hover, body .stat-box:hover,
body .cookie-btn:hover { transform: none; }
body .btn-primary:hover { box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); }
body .pain-point-card:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05); }
}
/* 3. :active steht nach den Hover-Regeln und hebt die Verschiebung auf. Mit :not(:disabled) ist die
 Spezifitaet hoeher als bei styles.min.css (.btn-primary:hover:not(:disabled)), sonst gewinnt die
 Hover-Anhebung und der Druck-Effekt bleibt aus. */
body .btn-primary:active:not(:disabled), body .btn-secondary:active:not(:disabled), body .cookie-btn:active,
body .nav-toggle:active, body .burger:active, body #back-to-top:active {
transform: scale(0.97);
transition-duration: 120ms;
}

/* 7. Header beim Scrollen: nur transform */
body #header { transition: transform 250ms var(--ease-out); }
body.header-hidden #header { transition-duration: 180ms; }

/* 8. Dropdowns (Desktop) */
@media (min-width: 769px) {
body .nav-dropdown {
  opacity: 0; visibility: hidden;
  transform: translateY(4px) scale(0.97); transform-origin: top center;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s linear 160ms;
}
body .nav-dropdown-wide { transform: translate(-50%, 4px) scale(0.97); transform-origin: top center; }
body .has-dropdown.is-open > .nav-dropdown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
body .has-dropdown.is-open > .nav-dropdown-wide { transform: translateX(-50%); }
}
body .nav-toggle svg { transition: transform 160ms var(--ease-out); }

/* 9. Mobiles Menue: Oeffnen weich (Drawer), Schliessen kuerzer */
@media screen and (max-width: 768px) {
body .nav-links { transition: transform 250ms var(--ease-out), visibility 0s linear 250ms; }
body .nav-links.nav-active { transition: transform 380ms var(--ease-drawer), visibility 0s linear 0s; }
}

/* 10. FAQ: grid-template-rows 0fr nach 1fr statt max-height. Der Seitenrand liegt als Margin an allen direkten Kindern, damit sich der Wrapper auf Hoehe 0 zusammenziehen kann. */
body .faq-answer {
display: grid; grid-template-rows: 0fr; max-height: none; overflow: hidden; visibility: hidden;
transition: grid-template-rows 250ms var(--ease-out), visibility 0s linear 250ms;
}
body .faq-item.active .faq-answer { grid-template-rows: 1fr; max-height: none; visibility: visible; transition-delay: 0s; }
body .faq-content { padding: 0; min-height: 0; overflow: hidden; }
body .faq-content > * { margin: 0 2.5rem 1rem; opacity: 0; transition: opacity 120ms var(--ease-out); }
body .faq-content > :last-child { margin-bottom: 2.5rem; }
/* Listen tragen teils Inline-Styles (margin, padding-left): !important, damit der Rand einheitlich bleibt */
body .faq-content > ul, body .faq-content > ol { margin: 0 2.5rem 0.75rem !important; padding-left: 1.25rem !important; }
body .faq-content > ul { list-style: disc; }
body .faq-content > ol { list-style: decimal; }
body .faq-content > ul:last-child, body .faq-content > ol:last-child { margin-bottom: 2.5rem !important; }
body .faq-content :is(ul, ol) > li { font-size: 1.1rem; line-height: 1.8; color: var(--text-color); margin-bottom: 0.35rem; }
body .faq-item.active .faq-content > * { opacity: 0.9; transition-duration: 200ms; }
@media (max-width: 768px) {
body .faq-content > *, body .faq-content > ul, body .faq-content > ol { margin-left: 1.75rem !important; margin-right: 1.75rem !important; }
body .faq-content > :last-child, body .faq-content > ul:last-child, body .faq-content > ol:last-child { margin-bottom: 1.75rem !important; }
body .faq-content :is(ul, ol) > li { font-size: 1rem; }
}

/* 11. Ueberschriften: ruhiger Scroll-Einstieg ohne letter-spacing, Skalierung und starken Blur.
 Der Bereich endet bei 25 % Eintritt (Ende nahe am unteren Rand), damit eine Ueberschrift nie
 halb transparent oder unscharf stehen bleibt, wenn man mitten im Scrollen anhaelt. */
@keyframes fluidTitleSoft {
from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
to { opacity: 1; transform: none; filter: none; }
}
@supports (animation-timeline: view()) {
h2.fluid-type { animation-name: fluidTitleSoft; animation-range: entry 0% entry 25%; }
}

/* 12. Gestaffeltes Einblenden (Klassen setzt das Script am Seitenende) */
@keyframes rvIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.motion-ready .rv:not(.is-in) { opacity: 0; transform: translateY(8px); }
.motion-ready .rv.is-in { animation: rvIn 300ms var(--ease-out) backwards; animation-delay: calc(var(--rv-i, 0) * 50ms); }

/* 12b. Begriffskarten im Glossar: styles.min.css blendet sie mit eigener Animation (opacity 0, forwards) ein.
 Die wird neutralisiert, damit nur das Einblenden oben greift und keine Karte unsichtbar bleibt. */
.glossary-grid > .term-card { opacity: 1; transform: none; animation: none; }
.motion-ready .glossary-grid > .term-card.rv.is-in { animation: rvIn 300ms var(--ease-out) backwards; animation-delay: calc(var(--rv-i, 0) * 50ms); }
.glossary-grid > .term-card:hover { transform: translateY(-3px); }

/* 13. Back-to-top */
#back-to-top {
transform: scale(0.95);
transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 0s linear 150ms;
}
#back-to-top.show {
transform: none;
transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 0s;
}

/* 14. Cookie-Banner: Zustaende .cookie-banner-show / .cookie-banner-hidden (unten/oben) */
body #cookie-banner { transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 0s linear 150ms; }
body #cookie-banner.cookie-banner-show { transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out), visibility 0s linear 0s; }
body #cookie-banner.cookie-banner-bottom { transform: translateY(16px); }
body #cookie-banner.cookie-banner-bottom.cookie-banner-show { transform: none; }
body #cookie-banner.cookie-banner-bottom.cookie-banner-hidden { transform: translateY(16px); }
body #cookie-banner.cookie-banner-top { transform: translateY(-16px); }
body #cookie-banner.cookie-banner-top.cookie-banner-show { transform: none; }
body #cookie-banner.cookie-banner-top.cookie-banner-hidden { transform: translateY(-16px); }

/* Reduced Motion: keine Versaetze oder Skalierungen, nur kurze Opacity-Uebergaenge */
@media (prefers-reduced-motion: reduce) {
body .btn-primary:hover, body .btn-secondary:hover, body .card:hover, body .home-card:hover,
body .pain-point-card:hover, body .service-item-card:hover, body .stat-box:hover, body .cookie-btn:hover,
body .btn-primary:active, body .btn-secondary:active, body .cookie-btn:active, body .nav-toggle:active,
body .burger:active, body #back-to-top:active { transform: none !important; }
.home-card-link:hover .arr { transform: none !important; }
.motion-ready .rv:not(.is-in) { opacity: 1; transform: none; }
.motion-ready .rv.is-in { animation: none; }
@supports (animation-timeline: view()) { h2.fluid-type { animation: none; opacity: 1; transform: none; filter: none; } }
body .nav-dropdown { transform: none; transition: opacity 150ms ease, visibility 0s linear 150ms; }
body .nav-dropdown-wide, body .has-dropdown.is-open > .nav-dropdown-wide { transform: translateX(-50%); }
body .has-dropdown.is-open > .nav-dropdown { transform: none; }
#back-to-top, #back-to-top.show { transform: none; transition: opacity 150ms ease, visibility 0s linear 150ms; }
body #cookie-banner.cookie-banner-bottom, body #cookie-banner.cookie-banner-top,
body #cookie-banner.cookie-banner-bottom.cookie-banner-hidden, body #cookie-banner.cookie-banner-top.cookie-banner-hidden { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .motion-ready .glossary-grid > .term-card.rv.is-in { animation: none; } }
@media print { .motion-ready .rv { opacity: 1 !important; transform: none !important; animation: none !important; } }

/* Pfeil in Textlinks: bei Maus 2 px nach rechts */
.home-card-link .arr { display: inline-block; transition: transform 150ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .home-card-link:hover .arr { transform: translateX(2px); } }