/* IBMH Home Motion System (v1.0) — nur Startseite (lädt mit dem House-Experience-Shortcode).
 * Ergänzt house-experience.css: zentrale Motion-/Glass-Tokens, Project-Journey-Rail
 * (Fortschrittslinie, Hover-Expansion, Aktivierungs-Puls, Label-Swap), mobile Abschnitts-Pill,
 * gestaffelte Reveals für Hero/Warum/Situationen/Kontakt, Hover-Feinschliff.
 * Leitbild: "Technische Präzision in Bewegung" — nur transform/opacity, weich auslaufend.
 * Reduced Motion: alle Bewegungen aus, Zustandswechsel unmittelbar. Keine Menü-/Header-Regeln. */

/* ---------------------------------------------------------------------------
 * 1) Motion- und Glass-Tokens (zentral; mappen die Alt-Tokens aufs System)
 * ------------------------------------------------------------------------- */
.ibmh-hx {
  /* Dauern */
  --m-icon: 180ms;        /* Icon-/Button-Reaktionen */
  --m-hover: 280ms;       /* Hover-Erweiterungen */
  --m-card: 420ms;        /* Karten-/Textanimationen */
  --m-reveal: 700ms;      /* Abschnitts-Reveals */
  --m-hero: 1000ms;       /* größere Hero-Bewegungen */
  /* Easing: eine Aus- und eine Verlaufs-Kurve für alles */
  --m-out: cubic-bezier(0.16, 1, 0.3, 1);
  --m-inout: cubic-bezier(0.65, 0, 0.35, 1);
  /* Liquid Glass */
  --g-blur: 14px;
  --g-bg: linear-gradient(160deg, rgba(255,255,255,0.72), rgba(226,240,252,0.5));
  --g-border: rgba(255, 255, 255, 0.66);
  --g-shadow: 0 14px 40px rgba(13, 43, 99, 0.14);
  --g-inner: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  /* Fokus */
  --m-focus: 3px solid var(--ibmh-blue-500);
  /* Alt-Tokens auf das System mappen */
  --ibmh-duration-fast: var(--m-icon);
  --ibmh-duration-base: var(--m-hover);
  --ibmh-duration-slow: var(--m-reveal);
  --ibmh-ease-out: var(--m-out);
}

/* Kontrolliertes natives Smooth-Scrolling für Ankersprünge (nur Seiten mit Experience). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------------------------------------------------------------------------
 * 2) Project Journey Rail — Desktop-Erweiterungen
 * ------------------------------------------------------------------------- */


/* Auf die OpenA-Rail zurückgebaut (2026-07-27).
 *
 * Entfallen sind hier drei Dinge, die der OpenA-Richtung widersprachen:
 *   - die durchgehende 2px-Fortschrittslinie (ol::before/::after) — der Brief verlangt
 *     ausdrücklich KEINE dauerhafte Verbindungslinie zwischen den Punkten;
 *   - die Hover-/Fokus-Expansion, die die <ol> zu einer mehrzeiligen Karte mit ALLEN
 *     Abschnittsnamen aufklappte — ersetzt durch das eine gemeinsame Panel;
 *   - das Ausblenden von Liquid-Form und Indikator im geöffneten Zustand (beide Elemente
 *     existieren nicht mehr).
 *
 * Der kontinuierliche Scrollfortschritt (--scroll-p) wird von ibmh-home-motion.js weiter
 * gesetzt und von der mobilen Pill genutzt; die Rail wertet ihn nicht mehr aus. */

/* Bereits absolvierte Abschnitte dezent hervorheben (leise Fortschrittsanzeige ohne Linie). */
.ibmh-progress li.is-passed .ibmh-progress__dot { background: rgba(24, 72, 160, 0.55); }

/* Aktivierungs-Puls: kurzer, einmaliger Impuls am Marker beim Abschnittswechsel. */
@keyframes ibmh-rail-pulse {
  0%   { transform: translate(-50%, calc(var(--active-index) * var(--slot))) scale(1); }
  40%  { transform: translate(-50%, calc(var(--active-index) * var(--slot))) scale(1.09); }
  100% { transform: translate(-50%, calc(var(--active-index) * var(--slot))) scale(1); }
}
.ibmh-progress__marker.is-pulse { animation: ibmh-rail-pulse 360ms cubic-bezier(0.16, 1, 0.3, 1); }

/* Rail zurücknehmen, wenn Header-Menü offen ist (Klasse setzt ibmh-home-motion.js;
 * es werden nur vorhandene Menü-Zustände GELESEN, keine Menüdateien verändert). */
.ibmh-progress, .ibmh-progress-mini { transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1); }
body.ibmh-nav-suppressed .ibmh-progress,
body.ibmh-nav-suppressed .ibmh-progress-mini {
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * 3) Abschnitts-Pill — überall dort, wo die OpenA-Rail NICHT läuft
 *
 * Die Bedingung ist die exakte Negation der Rail-Bedingung in house-experience.css
 * (`min-width: 1180px and hover: hover and pointer: fine`). Dadurch ist genau eine der
 * beiden Navigationen sichtbar — nie beide, nie keine. Das deckt Mobil, Tablets in
 * Hoch- UND Querformat, Touch-Notebooks und kleine Desktopfenster in einer Regel ab,
 * ohne Zwischenvariante für 1024–1179px.
 * ------------------------------------------------------------------------- */
.ibmh-progress-mini { display: none; }
@media not all and (min-width: 1180px) and (hover: hover) and (pointer: fine) {
  .ibmh-progress-mini {
    display: block;
    position: fixed;
    left: 50%;
    bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 55;
    max-width: min(92vw, 24rem);
    font-family: var(--ibmh-font-body, system-ui, sans-serif);
  }
  .ibmh-progress-mini__toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--g-border, rgba(255,255,255,0.66));
    border-radius: 999px;
    background: linear-gradient(160deg, rgba(255,255,255,0.78), rgba(226,240,252,0.6));
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 14px 40px rgba(13,43,99,0.16);
    color: var(--ibmh-blue-700, #1848a0);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.62rem 0.95rem;
    min-height: 44px;
    cursor: pointer;
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Fallback ohne backdrop-filter: deckender Hintergrund */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ibmh-progress-mini__toggle { background: rgba(255, 255, 255, 0.94); }
    .ibmh-progress-mini__list { background: rgba(255, 255, 255, 0.97); }
  }
  .ibmh-progress-mini__toggle:active { transform: scale(0.98); }
  .ibmh-progress-mini__toggle:focus-visible { outline: 3px solid var(--ibmh-blue-500, #1e9fe9); outline-offset: 2px; }
  .ibmh-progress-mini__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 11rem;
  }
  .ibmh-progress-mini__bar {
    flex: none;
    width: 3.2rem;
    height: 3px;
    border-radius: 2px;
    background: rgba(20, 35, 61, 0.14);
    overflow: hidden;
  }
  .ibmh-progress-mini__bar::after {
    content: "";
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--ibmh-blue-500, #1e9fe9), var(--ibmh-blue-700, #1848a0));
    transform-origin: left center;
    transform: scaleX(var(--scroll-p, 0));
  }
  .ibmh-progress-mini__chev {
    flex: none;
    width: 0.5rem; height: 0.5rem;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(-45deg) translateY(1px);
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .ibmh-progress-mini.is-open .ibmh-progress-mini__chev { transform: rotate(135deg); }
  .ibmh-progress-mini__list {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.55rem);
    transform: translateX(-50%) translateY(6px);
    min-width: 13rem;
    max-height: min(58vh, 22rem);
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0.45rem;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 14px 40px rgba(13,43,99,0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 180ms;
  }
  .ibmh-progress-mini.is-open .ibmh-progress-mini__list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
  }
  .ibmh-progress-mini__list li { margin: 0; }
  .ibmh-progress-mini__list a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0.45rem 0.8rem;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ibmh-text, #14233d);
    text-decoration: none;
  }
  .ibmh-progress-mini__list a:hover { background: rgba(24, 72, 160, 0.07); }
  .ibmh-progress-mini__list a:focus-visible { outline: 3px solid var(--ibmh-blue-500, #1e9fe9); outline-offset: -2px; }
  .ibmh-progress-mini__list a[aria-current="true"] {
    background: rgba(24, 72, 160, 0.1);
    color: var(--ibmh-blue-700, #1848a0);
    font-weight: 700;
  }
}

/* ---------------------------------------------------------------------------
 * 4) Startseiten-Reveals & Hover-Feinschliff
 * ------------------------------------------------------------------------- */

/* Hero: Eyebrow → Titel → Text → CTAs → Trust leicht zeitversetzt (einmalig beim Laden). */
@keyframes ibmh-rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-stage-scene--hero .ibmh-glass-panel > * {
  animation: ibmh-rise-in var(--m-reveal, 700ms) var(--m-out, ease-out) both;
}
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-stage-scene--hero .ibmh-glass-panel > :nth-child(2) { animation-delay: 90ms; }
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-stage-scene--hero .ibmh-glass-panel > :nth-child(3) { animation-delay: 180ms; }
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-stage-scene--hero .ibmh-glass-panel > :nth-child(4) { animation-delay: 270ms; }
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-stage-scene--hero .ibmh-glass-panel > :nth-child(n+5) { animation-delay: 340ms; }

/* Gruppen-Reveals (JS setzt .is-visible auf den Container; Staffelung nur innerhalb der Gruppe). */
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-situation-strip > li,
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-why__list > li,
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-why__lead,
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-contact-block__location {
  opacity: 0;
  transform: translateY(14px) scale(0.99);
  transition: opacity var(--m-card, 420ms) var(--m-out, ease-out), transform var(--m-card, 420ms) var(--m-out, ease-out);
}
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-why__inner.is-visible .ibmh-why__lead,
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-situation-strip.is-visible > li,
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-why__list.is-visible > li,
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-contact-block.is-visible .ibmh-contact-block__location {
  opacity: 1;
  transform: none;
}
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-situation-strip.is-visible > li:nth-child(2),
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-why__list.is-visible > li:nth-child(2),
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-contact-block.is-visible .ibmh-contact-block__location:nth-child(2) { transition-delay: 80ms; }
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-situation-strip.is-visible > li:nth-child(3),
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-why__list.is-visible > li:nth-child(3) { transition-delay: 160ms; }
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-situation-strip.is-visible > li:nth-child(4),
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-why__list.is-visible > li:nth-child(4) { transition-delay: 240ms; }

/* Karten-Hover: minimale Anhebung + klarerer Rand (keine Größenänderung, kein Layout-Shift). */
.ibmh-situation-strip li,
.ibmh-anchor-strip li {
  transition: transform var(--m-hover, 280ms) var(--m-out, ease-out),
              box-shadow var(--m-hover, 280ms) var(--m-out, ease-out),
              border-color var(--m-hover, 280ms) var(--m-out, ease-out);
}
.ibmh-situation-strip li:hover,
.ibmh-situation-strip li:focus-within,
.ibmh-anchor-strip li:hover,
.ibmh-anchor-strip li:focus-within {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 18px 44px rgba(13, 43, 99, 0.13);
}

/* CTA-Buttons: kontrollierter Glass-Hover (weich auslaufend, keine Dauer-Animation). */
.ibmh-hx .ibmh-btn {
  transition: transform var(--m-icon, 180ms) var(--m-out, ease-out),
              background var(--m-icon, 180ms) var(--m-out, ease-out),
              box-shadow var(--m-icon, 180ms) var(--m-out, ease-out);
}
.ibmh-hx .ibmh-btn--primary:hover,
.ibmh-hx .ibmh-btn--primary:focus-visible {
  box-shadow: 0 10px 26px rgba(24, 72, 160, 0.3);
}
.ibmh-hx .ibmh-btn:focus-visible { outline: 3px solid var(--ibmh-blue-500, #1e9fe9); outline-offset: 3px; }

/* Kontakt-Szene: ruhiger Abschluss — Panel mit ruhigerem Timing. */
.ibmh-hx.ibmh-js.ibmh-motion .ibmh-stage-scene--contact .ibmh-glass-panel {
  transition-duration: var(--m-reveal, 700ms);
}

/* ---------------------------------------------------------------------------
 * 5) Reduced Motion / ?noanim: alles Neue aus, Funktion bleibt vollständig.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ibmh-progress ol,
  .ibmh-progress a,
  .ibmh-progress__marker,
  .ibmh-progress__panel,
  .ibmh-progress,
  .ibmh-progress-mini,
  .ibmh-progress-mini__toggle,
  .ibmh-progress-mini__chev,
  .ibmh-progress-mini__list,
  .ibmh-situation-strip li,
  .ibmh-anchor-strip li,
  .ibmh-hx .ibmh-btn { transition: none !important; }
  .ibmh-progress__marker.is-pulse { animation: none !important; }
  .ibmh-hx.ibmh-js.ibmh-motion .ibmh-stage-scene--hero .ibmh-glass-panel > * { animation: none !important; }
  .ibmh-hx.ibmh-js.ibmh-motion .ibmh-situation-strip > li,
  .ibmh-hx.ibmh-js.ibmh-motion .ibmh-why__list > li,
  .ibmh-hx.ibmh-js.ibmh-motion .ibmh-why__lead,
  .ibmh-hx.ibmh-js.ibmh-motion .ibmh-contact-block__location {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
.ibmh-no-anim .ibmh-situation-strip > li,
.ibmh-no-anim .ibmh-why__list > li,
.ibmh-no-anim .ibmh-why__lead,
.ibmh-no-anim .ibmh-contact-block__location,
.ibmh-no-anim .ibmh-stage-scene--hero .ibmh-glass-panel > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}