/* IBMH House Experience — vollflächige Bild-Bühnen + Frosted-Glass-Panels (Plugin v1.1)
 * Prinzip: Bild = Bühne über volle Breite/Höhe; Inhalte = Glass-Panel auf der freien
 * Bildfläche (data-text); Hotspots = dezente Glas-/Lichtpunkte (Desktop-only).
 * Alle Selektoren unter .ibmh-hx gescopt; IBMH-Tokens lokal (Quelle: brand/tokens.css).
 * Video-ready: .ibmh-stage-bg video wird von den Cover-Regeln mit abgedeckt (v1 lädt keines). */

.ibmh-hx {
  --ibmh-blue-900: #0d2b63;
  --ibmh-blue-700: #1848a0;
  --ibmh-blue-600: #1f63c4;
  --ibmh-blue-500: #1e9fe9;
  --ibmh-blue-100: #e7f3fc;
  --ibmh-ink: #161616;
  --ibmh-text: #14233d;
  --ibmh-text-muted: #51607a;
  --ibmh-text-soft: #67718a;
  --ibmh-bg: #f6f9fd;
  --ibmh-surface: #ffffff;
  --ibmh-border: rgba(24, 72, 160, 0.14);
  --ibmh-glass-bg: rgba(255, 255, 255, 0.58);
  --ibmh-glass-border: rgba(255, 255, 255, 0.45);
  --ibmh-font-display: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ibmh-font-body: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ibmh-radius-md: 18px;
  --ibmh-radius-lg: 28px;
  --ibmh-radius-pill: 999px;
  --ibmh-container-wide: 1360px;
  --ibmh-gap: clamp(1.25rem, 2vw, 2rem);
  --ibmh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ibmh-duration-fast: 160ms;
  --ibmh-duration-slow: 700ms;

  /* Full-bleed via symmetrische negative Margins: funktioniert für jeden ZENTRIERTEN
   * Container unabhängig von dessen Breite/Padding (50% = halbe Containerbreite, 50vw =
   * halbe Viewportbreite → linke Kante landet exakt auf 0). left/position NICHT verwenden
   * (verschiebt die Box um die halbe Containerbreite). Scrollbar-Overrun: overflow-x:clip. */
  position: relative;
  width: auto;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  font-family: var(--ibmh-font-body);
  color: var(--ibmh-text);
  background: var(--ibmh-bg);
  line-height: 1.65;
  overflow-x: clip;
}

/* Bewusst ungescopt (lädt nur auf Seiten mit der Experience): verhindert horizontales
 * Scrollen durch den 50vw-Breakout und absolut positionierte Bühnen-Elemente. */
html, body { overflow-x: clip; max-width: 100%; }

/* Home-Blockgap-Fix: WordPress setzt margin-block-start:24px auf die direkten Kinder von
 * .wp-site-blocks (main, footer) → 24px heller Streifen über dem Hero UND zwischen letzter
 * Bühne und Footer. Auf der Startseite (main enthält .ibmh-hx) beide Margins entfernen,
 * damit Hero bei y=0 startet und der Footer bündig anschließt. */
.wp-site-blocks > main.wp-block-group:has(.ibmh-hx) { margin-top: 0 !important; margin-bottom: 0 !important; }
.wp-site-blocks > main.wp-block-group:has(.ibmh-hx) + footer.wp-block-template-part { margin-top: 0 !important; }

/* Full-bleed-Override: der WordPress-Constrained-Layout-Wrapper (.wp-block-post-content
 * .is-layout-constrained) erzwingt margin:auto !important auf direkten Kindern und würde
 * den 50vw-Breakout neutralisieren. Höhere Spezifität (0,2,0) gewinnt den !important-Gleichstand. */
.wp-block-post-content > .ibmh-hx,
.entry-content > .ibmh-hx {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.ibmh-hx h1, .ibmh-hx h2, .ibmh-hx h3 {
  font-family: var(--ibmh-font-display);
  color: var(--ibmh-ink);
  line-height: 1.12;
  margin: 0 0 0.75rem;
}
.ibmh-hx a { color: var(--ibmh-blue-700); }
.ibmh-hx a:focus-visible {
  outline: 3px solid var(--ibmh-blue-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Buttons */
.ibmh-btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.4rem;
  border-radius: var(--ibmh-radius-pill);
  transition: transform var(--ibmh-duration-fast) var(--ibmh-ease-out),
              background var(--ibmh-duration-fast) var(--ibmh-ease-out);
}
/* Farbregeln bewusst mit .ibmh-hx-Prefix: müssen die generische Linkfarbe (.ibmh-hx a) schlagen */
.ibmh-hx .ibmh-btn--primary { background: var(--ibmh-blue-700); color: #fff; }
.ibmh-hx .ibmh-btn--primary:hover { background: var(--ibmh-blue-600); transform: translateY(-2px); color: #fff; }
.ibmh-hx .ibmh-btn--glass {
  background: rgba(255, 255, 255, 0.4);
  color: var(--ibmh-blue-700);
  border: 1px solid rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ibmh-hx .ibmh-btn--glass:hover { background: rgba(255, 255, 255, 0.62); transform: translateY(-2px); }
.ibmh-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }

/* ---------------------------------------------------------------------------
 * OpenA-Rail — seitliche Abschnittsnavigation der Startseite (2026-07-27)
 *
 * Ersetzt die frühere durchgehende Liquid-Glass-Säule. Deren Silhouette entstand aus einer
 * siebenteiligen CSS-Mask, die Säule, Marker-Blase und Label-Kapsel zu EINER Fläche
 * verschmolz — genau das soll die OpenA-Richtung nicht.
 *
 * Jetzt drei klar getrennte Ebenen:
 *   1. freistehende Punktreihe        — keine Verbindungslinie, keine Trägerfläche
 *   2. EIN beweglicher Marker (Pill)  — folgt --active-index
 *   3. EIN gemeinsames Panel          — Hover UND Tastaturfokus, seitlich schwebend
 *
 * Zustandsklassen (bewusst getrennt gehalten):
 *   --active-index  aktiver Abschnitt (vom Scrollspy, unverändert)
 *   --cue-index     gerade gehoverter/fokussierter Punkt (nur Darstellung)
 *   .is-cued        Panel zeigt einen Hover-/Fokuspunkt
 *   .is-idle-label  Panel zeigt im Ruhezustand den aktiven Abschnitt (Variante B)
 *
 * Aktivierung: NUR ab 1180px mit echtem Zeigegerät. Darunter bzw. bei pointer:coarse
 * übernimmt die kompakte Abschnitts-Pill (ibmh-home-motion.css) — die Bedingungen sind
 * exakte Komplemente, Rail und Pill können nie gleichzeitig oder gar nicht erscheinen.
 * ------------------------------------------------------------------------- */
.ibmh-progress {
  display: none;                 /* Standard: Pill übernimmt */
  position: fixed;
  /* Abstand über bestehende Tokens statt Einzelwerten je Viewport. */
  right: clamp(1rem, 2.2vw, 2.25rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 55;

  --slot: 1.625rem;              /* 26px Rasterhöhe je Punkt */
  --dot: 0.45rem;
  --marker: 2.5rem;              /* 40px Marker-Pill */
  --active-index: 0;
  --cue-index: 0;
  --rail-pad: 0.55rem;
  --panel-w: 14.125rem;          /* 226px */
  --nav-ink: var(--ibmh-blue-700, #1848a0);
}
@media (min-width: 1180px) and (hover: hover) and (pointer: fine) {
  .ibmh-progress { display: block; }

  /* Rail-Gutter: Inhalt darf nicht unter die Rail laufen (Fable-Review 2026-07-27).
   * Gemessen ohne diese Regel: bei 1280px 29 ueberdeckte Textelemente — Punkte lagen
   * direkt auf dem Kartentext der Situationen und auf Szenen-Eyebrows.
   * Breite = Dot-Spalte (40px) + Randabstand + Luft. Nur in der Rail-Bedingung, darunter
   * bleibt das Layout unveraendert. */
  .ibmh-hx { --ibmh-rail-gutter: calc(2.5rem + clamp(1rem, 2.2vw, 2.25rem) + 1.25rem); }
  .ibmh-hx .ibmh-stage-overlay,
  .ibmh-hx .ibmh-section-inner,
  .ibmh-hx .ibmh-anchors { padding-right: var(--ibmh-rail-gutter); }
  /* BEWUSST KEIN Gutter auf der Sticky-Buehne der Situationsauswahl.
   *
   * Ein frueherer Versuch mit margin-right auf .ibmh-situations__sticky brach den
   * horizontalen Slide (letzte Karte 160px abgeschnitten): die Bühne wuchs durch ihr
   * eigenes Padding wieder ueber die verkleinerte Sticky-Box hinaus, `clientWidth` folgte
   * deshalb nicht und die Slide-Grenze `scrollWidth - clientWidth` wuchs nicht mit.
   *
   * Geloest wird das seit 2026-07-28 INNERHALB der Komponente: die Bühne
   * (.ibmh-situations--track .ibmh-section-inner, weiter unten) ist border-box, klippt
   * selbst per `overflow-x: clip` und haelt rechts `--ibmh-rail-gutter` als Margin frei.
   * Damit liegen Clip-Kante, Track-Content-Kante und Slide-Endkante auf derselben Linie.
   * Der Gutter darf hier oben deshalb weiterhin NICHT gesetzt werden. */
}

/* Ein-/Ausblenden an Abschnittsgrenzen (Klasse setzt house-experience.js):
 * im Hero verborgen, ab dem ersten Inhaltsabschnitt sichtbar, im Seitenfuss wieder aus.
 * Bewusst auf .ibmh-js gescopt — ohne JavaScript bleibt die Rail dauerhaft sichtbar und
 * damit als Sprungliste vollstaendig bedienbar. */
.ibmh-hx.ibmh-js .ibmh-progress {
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ibmh-ease-out);
}
.ibmh-hx.ibmh-js .ibmh-progress.is-rail-visible {
  opacity: 1;
  pointer-events: auto;
}

.ibmh-progress ol {
  position: relative;
  list-style: none;
  margin: 0;
  padding: var(--rail-pad) 0;
  display: flex;
  flex-direction: column;
  /* KEIN background, KEIN backdrop-filter, KEIN border — die Punkte stehen frei. */
}
.ibmh-progress li { margin: 0; }

/* --- 1. Punktreihe -------------------------------------------------------- */
.ibmh-progress a {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  /* Klickfläche füllt den ganzen Slot: 26px hoch, 40px breit -> zusammen mit dem
   * Slot-Abstand über der WCAG-2.5.8-Schwelle, ohne die Punkte optisch zu vergrößern. */
  width: var(--marker); height: var(--slot);
  text-decoration: none; border-radius: var(--ibmh-radius-pill);
}
.ibmh-progress__dot {
  width: var(--dot); height: var(--dot); border-radius: 50%;
  background: rgba(20, 35, 61, 0.52);
  /* Helle Kontur, damit die Punkte auch auf Foto- und Betonflaechen tragen — ohne
   * Gluehen. 2026-07-27 von 0.38/1px auf 0.52/1.5px angehoben: im Review waren die
   * inaktiven Punkte ueber der Bühne kaum sichtbar. */
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.72);
  transition: background 160ms var(--ibmh-ease-out),
              transform 160ms var(--ibmh-ease-out);
}
/* Sichtbarer Linktext bleibt im DOM (Accessible Name, No-JS), ist in der Rail aber
 * ausgeblendet — der Text erscheint im gemeinsamen Panel. */
.ibmh-progress__sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Bereits absolvierte Abschnitte etwas kräftiger — leise Fortschrittsanzeige. */
.ibmh-progress a:hover .ibmh-progress__dot,
.ibmh-progress a:focus-visible .ibmh-progress__dot {
  background: var(--nav-ink);
  transform: scale(1.35);
}
/* Der aktive Punkt wird vom Marker getragen und selbst kräftig gesetzt (nicht nur Farbe:
   zusätzlich Größe -> nicht allein durch Farbe unterscheidbar). */
.ibmh-progress a[aria-current] .ibmh-progress__dot {
  background: var(--nav-ink);
  transform: scale(1.5);
}
.ibmh-hx .ibmh-progress a:focus-visible {
  outline: 3px solid var(--nav-ink);
  outline-offset: 1px;
  /* .ibmh-hx a:focus-visible setzt global border-radius:4px — der Outline folgt dem
   * Radius, der Ring saehe sonst als Rechteck um einen runden Punkt aus. */
  border-radius: var(--ibmh-radius-pill);
}

/* --- 2. Beweglicher Marker ------------------------------------------------ */
.ibmh-progress__marker {
  position: absolute;
  left: 50%;
  /* Vertikale Zentrierung im Slot über top, horizontale über translate(-50%) — bewusst
   * OHNE margin: `.ibmh-progress li { margin: 0 }` hat höhere Spezifität (0,1,1) und
   * würde Marker-Margins zurücksetzen. Das kostete beim ersten Anlauf 21px Versatz. */
  top: calc(var(--rail-pad) + (var(--slot) - var(--marker)) / 2);
  box-sizing: border-box;              /* 40px bleiben 40px, Border rechnet nicht auf */
  width: var(--marker); height: var(--marker);
  border-radius: var(--ibmh-radius-pill);
  pointer-events: none;
  z-index: 1;                    /* unter den Punkten -> verdeckt keine Nachbarn */
  /* Ruhige Soft-Background-Pill statt großflächigem Blur. backdrop-filter nur als
   * Zugabe; die Grundfläche trägt auch ohne ihn (Fallback = dieser Farbverlauf). */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(226, 240, 252, 0.66));
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px rgba(13, 43, 99, 0.16);
  /* Transform statt top: bewegt sich auf dem Compositor, kein Layout je Frame. */
  transform: translate(-50%, calc(var(--active-index) * var(--slot)));
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .ibmh-progress__marker {
    backdrop-filter: blur(9px) saturate(1.25);
    -webkit-backdrop-filter: blur(9px) saturate(1.25);
  }
}

/* --- 3. Gemeinsames Panel ------------------------------------------------- */
.ibmh-progress__panel {
  position: absolute;
  right: calc(100% + 0.6rem);
  top: var(--rail-pad);
  /* Breite folgt dem Inhalt, 226px bleiben die Obergrenze. Fest 226px liessen bei
   * Kurzlabels wie „Keller" (39px Textbreite) den groessten Teil leer. */
  width: max-content;
  min-width: 8.5rem;
  max-width: var(--panel-w);
  box-sizing: border-box;
  margin-top: calc((var(--slot) - 2.75rem) / 2);
  min-height: 2.75rem;
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  border-radius: 1.5625rem;      /* 25px */
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 30px rgba(13, 43, 99, 0.16);
  color: var(--nav-ink);         /* dunkelblau auf hell — kein weißer Text */
  pointer-events: none;          /* schwebt über freiem Rand, fängt nichts ab */
  opacity: 0;
  /* Keine Breitenanimation (wirkte unruhig) — nur Opacity + kleine Translation. */
  transform: translateY(calc(var(--cue-index) * var(--slot))) translateX(6px);
  transition: opacity 180ms var(--ibmh-ease-out),
              transform 180ms var(--ibmh-ease-out);
  z-index: 3;
}
.ibmh-progress.is-cued .ibmh-progress__panel {
  opacity: 1;
  transform: translateY(calc(var(--cue-index) * var(--slot))) translateX(0);
}
/* Variante B: Panel zeigt im Ruhezustand den aktiven Abschnitt. */
.ibmh-progress.is-idle-label:not(.is-cued) .ibmh-progress__panel {
  opacity: 1;
  transform: translateY(calc(var(--active-index) * var(--slot))) translateX(0);
}
.ibmh-progress__panel-pos {
  flex: none;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em;
  color: rgba(24, 72, 160, 0.55);
  font-variant-numeric: tabular-nums;
}
.ibmh-progress__panel-title {
  font-size: 0.8125rem; font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* No-JS: kein Marker, kein Panel — die Punkte bleiben als Sprungziele bedienbar. */
.ibmh-hx:not(.ibmh-js) .ibmh-progress__marker,
.ibmh-hx:not(.ibmh-js) .ibmh-progress__panel { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ibmh-progress__dot { transition: none; }
  /* Marker springt ohne räumliche Animation direkt an die Zielposition. */
  .ibmh-progress__marker { transition: none; }
  .ibmh-progress__panel {
    transition: opacity 120ms linear;
    transform: translateY(calc(var(--cue-index) * var(--slot)));
  }
  .ibmh-progress.is-cued .ibmh-progress__panel {
    transform: translateY(calc(var(--cue-index) * var(--slot)));
  }
  .ibmh-progress.is-idle-label:not(.is-cued) .ibmh-progress__panel {
    transform: translateY(calc(var(--active-index) * var(--slot)));
  }
}

/* ---------------------------------------------------------------------------
 * Vollflächige Bühnen-Szenen
 * ------------------------------------------------------------------------- */
.ibmh-stage-scene {
  position: relative;
  min-height: 92svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
/* Hero: randlos bis an den oberen Viewport-Rand — der Glass-Header ist FIXED Overlay
 * (kein Layout-Space), die Bühne beginnt bei y=0. --ibmh-header-h kommt vom Header-Part. */
.ibmh-stage-scene--hero {
  min-height: 100vh;
  min-height: 100svh;
  margin-top: 0;
}
.ibmh-stage-scene--hero .ibmh-stage-overlay { padding-top: calc(var(--ibmh-header-h, 4.9rem) + 2rem); }
/* Kein Theme-Block-Gap über der Bühne */
.ibmh-hx { margin-top: 0; }
.ibmh-hx > :first-child { margin-top: 0; }

.ibmh-stage-bg { position: absolute; inset: 0; z-index: 0; }
/* Video-Layer (per JS eingesetzt): liegt über dem Poster-Bild, unter dem Overlay */
.ibmh-stage-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease;
}
.ibmh-stage-video.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ibmh-stage-video { display: none; } }
.ibmh-stage-bg img,
.ibmh-stage-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Sehr dezenter Ken-Burns-Pan nur mit JS + ohne reduced-motion */
.ibmh-js .ibmh-stage-scene[data-motion="subtle-pan"] .ibmh-stage-bg img {
  transform: scale(1.001);
  transition: transform 9s var(--ibmh-ease-out);
}
.ibmh-js .ibmh-stage-scene[data-motion="subtle-pan"].is-visible .ibmh-stage-bg img {
  transform: scale(1.035);
}

/* Overlay-Raster: Panel auf der freien Bildfläche */
.ibmh-stage-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ibmh-container-wide);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
}
.ibmh-glass-panel {
  max-width: 34rem;
  background: var(--ibmh-glass-bg);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--ibmh-glass-border);
  border-radius: var(--ibmh-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: 0 24px 70px rgba(13, 43, 99, 0.14);
}
.ibmh-stage-scene[data-text="right"] .ibmh-glass-panel { justify-self: end; }

.ibmh-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ibmh-blue-700);
  margin: 0 0 0.5rem;
}
.ibmh-glass-panel h1 { font-size: clamp(1.7rem, 3.2vw, 2.55rem); }
.ibmh-glass-panel h2 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
.ibmh-glass-panel p { margin: 0 0 1rem; }
.ibmh-panel-links { font-weight: 600; }

/* Panel-Varianten: dezente Differenzierung statt Einheitsbox */
.ibmh-glass-panel--hero {
  max-width: 38rem;
  padding: clamp(1.8rem, 3.4vw, 2.9rem);
  background: rgba(255, 255, 255, 0.64);
}
.ibmh-glass-panel--compact { max-width: 27rem; }
.ibmh-glass-panel--contact { max-width: 40rem; background: rgba(255, 255, 255, 0.66); }
.ibmh-trust {
  margin: 1rem 0 0 !important;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(24, 72, 160, 0.10);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ibmh-text-muted);
}
.ibmh-checklist {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.ibmh-checklist li {
  position: relative;
  padding: 0.18rem 0 0.18rem 1.5rem;
  font-size: 0.95rem;
}
.ibmh-checklist li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.72rem;
  width: 0.5rem;
  height: 0.5rem;
  border-left: 2.5px solid var(--ibmh-blue-500);
  border-top: 2.5px solid var(--ibmh-blue-500);
  transform: rotate(45deg);
}

/* Hotspots: Glas-Lichtpunkt (Button) + größeres Glass-Popup mit Titel/Text/Link.
 * Öffnet per :hover/:focus-within (CSS, No-JS-fähig) und per Klick (.is-open, JS). */
.ibmh-hotspots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ibmh-hotspot { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; }
.ibmh-hotspot__dot {
  display: block;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.10), 0 6px 18px rgba(13, 43, 99, 0.18);
  position: relative;
  transition: opacity var(--ibmh-duration-slow) var(--ibmh-ease-out),
              box-shadow var(--ibmh-duration-fast) var(--ibmh-ease-out);
}
.ibmh-hotspot__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(30, 159, 233, 0.75);
}
.ibmh-hotspot__dot:hover,
.ibmh-hotspot__dot:focus-visible {
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.16), 0 8px 22px rgba(13, 43, 99, 0.24);
}
.ibmh-hotspot__pop {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(8px) scale(0.96);
  transform-origin: center top;
  width: clamp(17rem, 24vw, 21rem);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--ibmh-radius-lg);
  box-shadow: 0 24px 60px rgba(13, 43, 99, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  padding: 1.15rem 1.3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--ibmh-ease-out),
              transform 260ms var(--ibmh-ease-out),
              visibility 0s linear 260ms;
}
/* Zarte Lichtspur zum Dot */
.ibmh-hotspot__pop::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px; height: 0.7rem;
  transform: translateX(-50%);
  background: linear-gradient(rgba(30, 159, 233, 0.6), transparent);
}
.ibmh-hotspot__pop--above { bottom: calc(100% + 0.85rem); transform-origin: center bottom; }
.ibmh-hotspot__pop--above::after { top: 100%; background: linear-gradient(transparent, rgba(30, 159, 233, 0.6)); }
.ibmh-hotspot__pop--below { top: calc(100% + 0.85rem); }
.ibmh-hotspot__pop--below::after { bottom: 100%; }
.ibmh-hotspot__pop--left { left: auto; right: -0.4rem; transform: translateY(8px) scale(0.96); }
.ibmh-hotspot__pop--right { left: -0.4rem; transform: translateY(8px) scale(0.96); }
.ibmh-hotspot__pop h4 {
  margin: 0 0 0.4rem;
  font-family: var(--ibmh-font-display);
  font-size: 1rem;
  color: var(--ibmh-ink);
}
.ibmh-hotspot__pop p { margin: 0 0 0.7rem; font-size: 0.88rem; line-height: 1.55; color: var(--ibmh-text-muted); }
.ibmh-hotspot__pop a { font-weight: 700; font-size: 0.88rem; }
.ibmh-hotspot:hover .ibmh-hotspot__pop,
.ibmh-hotspot:focus-within .ibmh-hotspot__pop,
.ibmh-hotspot.is-open .ibmh-hotspot__pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition-delay: 0s;
}
.ibmh-hotspot:hover .ibmh-hotspot__pop--left,
.ibmh-hotspot:focus-within .ibmh-hotspot__pop--left,
.ibmh-hotspot.is-open .ibmh-hotspot__pop--left,
.ibmh-hotspot:hover .ibmh-hotspot__pop--right,
.ibmh-hotspot:focus-within .ibmh-hotspot__pop--right,
.ibmh-hotspot.is-open .ibmh-hotspot__pop--right { transform: translateY(0) scale(1); }
.ibmh-hotspot__dot:hover, .ibmh-hotspot__dot:focus-visible,
.ibmh-hotspot.is-open .ibmh-hotspot__dot { transform: scale(1.12); }
.ibmh-js .ibmh-hotspot { opacity: 0; transition: opacity var(--ibmh-duration-slow) var(--ibmh-ease-out); }
.ibmh-js .ibmh-stage-scene.is-visible .ibmh-hotspot { opacity: 1; }
@media (max-width: 700px) { .ibmh-hx .ibmh-hotspots { display: none; } }

/* ---------------------------------------------------------------------------
 * Ruhige Zwischensektionen (Anker, Ablauf, Leistungen, Warum)
 * ------------------------------------------------------------------------- */
.ibmh-section-inner {
  max-width: var(--ibmh-container-wide);
  margin: 0 auto;
}
.ibmh-anchors {
  background: linear-gradient(180deg, #ffffff 0%, var(--ibmh-bg) 100%);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
}
.ibmh-anchor-strip {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--ibmh-container-wide);
  display: grid;
  gap: var(--ibmh-gap);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.ibmh-anchor-strip li {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--ibmh-glass-border);
  border-radius: var(--ibmh-radius-md);
  padding: 1.2rem 1.3rem;
  box-shadow: 0 10px 30px rgba(13, 43, 99, 0.06);
  min-width: 0;
  margin: 0;
}
.ibmh-anchor-strip h2 { font-size: 1rem; margin-bottom: 0.35rem; }
.ibmh-anchor-strip p { margin: 0 0 0.5rem; color: var(--ibmh-text-muted); font-size: 0.92rem; }
.ibmh-anchor-strip a { font-weight: 600; font-size: 0.92rem; }

/* „Welche Situation passt zu Ihnen?" — kompakte Einstiegshilfen nach dem Hero */
.ibmh-situations {
  background: var(--ibmh-bg);
  padding: clamp(2.5rem, 4.5vw, 4rem) clamp(1.25rem, 3vw, 2.5rem);
}
.ibmh-situations h2 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-bottom: 1.2rem; }
.ibmh-situation-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ibmh-gap);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
/* Desktop mit JS: hohe Sektion + Sticky-Innencontainer. Beim Durchscrollen bleibt der
 * Inhalt gepinnt und der Track fährt horizontal (kein Scroll-Jacking). Karte 1 ist beim
 * Einpinnen vollständig sichtbar (Start-Hold im JS). */
.ibmh-situations--track { padding: 0; height: 200vh; }
.ibmh-situations--track .ibmh-situations__sticky {
  position: sticky;
  top: var(--ibmh-header-h, 4.9rem);
  min-height: calc(100svh - var(--ibmh-header-h, 4.9rem));
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Bühne der Situationsauswahl.
 *
 * Zwei Eigenschaften müssen exakt auf derselben Kante liegen, sonst bricht entweder die
 * Darstellung oder die Slide-Rechnung (`max = scrollWidth - clientWidth` in
 * house-experience.js zielt immer auf die rechte Content-Kante dieser Box):
 *
 *   Clip-Kante == rechte Content-Kante der Bühne == Endkante der letzten Karte
 *
 * Deshalb hier:
 *   - `box-sizing: border-box` + `min-width: 0`: die Bühne bleibt tatsächlich in der
 *     Sticky-Box. Ohne beides wächst sie durch ihr eigenes Padding darüber hinaus
 *     (gemessen 2026-07-28: Kante bei 1180px auf 1275 statt 1180 — die letzte Karte war
 *     am Slide-Ende um 35px abgeschnitten) bzw. verhindert die automatische
 *     Mindestbreite des Flex-Items (min-content des nowrap-Tracks) jedes Schrumpfen.
 *   - rechter Abstand als `margin-right`, NICHT als Padding: `overflow-x: clip` schneidet
 *     an der Padding-Box, Padding läge also innerhalb der Clip-Zone.
 *   - Selektor mit `.ibmh-hx` davor: die Alt-Regel `@media (min-width:901px) …
 *     padding-right: 3.75rem !important` (unten in dieser Datei) hat dieselbe Spezifität
 *     und steht später — ohne die dritte Klasse gewinnt sie, und zwischen letzter Karte
 *     und Clip-Kante bliebe ein toter Streifen von 60px (live gemessen 2026-07-28).
 *   - `overflow-x: clip`: die Karten enden an der Bühnenkante statt erst am Viewportrand
 *     (der Clip der Sticky-Bühne). `overflow-y: visible` lässt Hover-Schatten frei.
 *   - Rail-Sicherheitszone: `var(--ibmh-rail-gutter, 0px)`. Die Variable ist ausschließlich
 *     in der Rail-Bedingung (min-width:1180px + hover + pointer:fine) auf `.ibmh-hx`
 *     definiert; bei Pill-Darstellung greift automatisch der Fallback 0px, es entsteht
 *     also kein Leerraum. Keine zweite Zahlenpflege, Resize wird von selbst mitgeführt.
 *
 * Ersetzt den früheren `margin-right`-Versuch auf .ibmh-situations__sticky, der die
 * Slide-Grenze brach (siehe Kommentar in der Rail-Sektion oben). */
.ibmh-hx .ibmh-situations--track .ibmh-section-inner {
  --ibmh-stage-pad: clamp(1.25rem, 3vw, 2.5rem);
  box-sizing: border-box;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: calc(var(--ibmh-container-wide) + var(--ibmh-stage-pad));
  margin-left: max(0px, calc((100% - var(--ibmh-container-wide) - var(--ibmh-stage-pad)) / 2));
  margin-right: calc(var(--ibmh-stage-pad) + var(--ibmh-rail-gutter, 0px));
  /* !important hebt die Alt-Regel `@media (min-width:901px) … padding-right: 3.75rem
   * !important` NUR in diesem Abschnitt auf; alle anderen Sektionen bleiben unberührt. */
  padding-inline: var(--ibmh-stage-pad) 0 !important;
  overflow-x: clip;
  overflow-y: visible;
}
.ibmh-situations--track .ibmh-situation-strip {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}
.ibmh-situations--track .ibmh-situation-strip li { flex: 0 0 clamp(18rem, 26vw, 24rem); }
/* Mobile: horizontal swipebar mit Snap */
@media (max-width: 700px) {
  .ibmh-situation-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
  }
  .ibmh-situation-strip::-webkit-scrollbar { display: none; }
  .ibmh-situation-strip li { flex: 0 0 82%; scroll-snap-align: start; }
}
.ibmh-situation-strip li {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--ibmh-glass-border);
  border-radius: var(--ibmh-radius-md);
  padding: 1.1rem 1.25rem;
  min-width: 0;
  margin: 0;
}
.ibmh-situation-strip h3 { font-size: 0.98rem; margin-bottom: 0.3rem; }
.ibmh-situation-strip p { margin: 0 0 0.5rem; color: var(--ibmh-text-muted); font-size: 0.9rem; }
.ibmh-situation-strip a { font-weight: 600; font-size: 0.9rem; }

.ibmh-process, .ibmh-services, .ibmh-why {
  padding: clamp(3.5rem, 6vw, 6rem) clamp(1.25rem, 3vw, 2.5rem);
}
.ibmh-process { background: var(--ibmh-bg); }
.ibmh-services { background: linear-gradient(180deg, var(--ibmh-bg) 0%, #ffffff 100%); }
.ibmh-why { background: #ffffff; }
.ibmh-process h2, .ibmh-services h2, .ibmh-why h2 {
  margin-bottom: 1.5rem;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
}

.ibmh-process__steps {
  list-style: none;
  counter-reset: ibmh-step;
  margin: 1.8rem 0 0;
  padding: 0;
  display: flex;
  align-items: stretch;         /* gleiche Karten-Höhe */
  gap: var(--ibmh-gap);
}
.ibmh-process__steps li {
  counter-increment: ibmh-step;
  position: relative;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 3.7rem 1.25rem 1.4rem;
  border-radius: var(--ibmh-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 8px 24px rgba(13, 43, 99, 0.05);
  transition: transform var(--ibmh-duration-base, 240ms) var(--ibmh-ease-out),
              box-shadow var(--ibmh-duration-base, 240ms) var(--ibmh-ease-out),
              border-color var(--ibmh-duration-base, 240ms) var(--ibmh-ease-out),
              background var(--ibmh-duration-base, 240ms) var(--ibmh-ease-out);
}
/* Hover-Lift muss die spezifischere Reveal-Regel (.is-visible li { transform:none })
 * schlagen — daher zusätzlich im is-visible-Kontext ausformuliert. */
.ibmh-process__steps li:hover,
.ibmh-process__steps li:focus-within,
.ibmh-js .ibmh-process.is-visible .ibmh-process__steps li:hover,
.ibmh-js .ibmh-process.is-visible .ibmh-process__steps li:focus-within {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 20px 46px rgba(13, 43, 99, 0.14);
}
.ibmh-process__steps li::before {           /* Nummern-Siegel im Liquid-Glass-Stil */
  content: counter(ibmh-step);
  position: absolute; top: 1.25rem; left: 1.25rem;
  width: 2.7rem; height: 2.7rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(255,255,255,0.75), rgba(226,240,252,0.45));
  backdrop-filter: blur(8px) saturate(1.5);
  -webkit-backdrop-filter: blur(8px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95),
              inset 0 -3px 8px rgba(24,72,160,0.06),
              0 6px 16px rgba(13, 43, 99, 0.10);
  font-family: var(--ibmh-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ibmh-blue-700);
  transition: box-shadow var(--ibmh-duration-base, 240ms) var(--ibmh-ease-out);
  z-index: 1;
}
.ibmh-process__steps li:hover::before,
.ibmh-process__steps li:focus-within::before {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95),
              0 0 14px 2px rgba(30,159,233,0.4),
              0 8px 20px rgba(13, 43, 99, 0.16);
}
@media (max-width: 820px) {
  .ibmh-process__steps { flex-direction: column; gap: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ibmh-process__steps li,
  .ibmh-process__steps li:hover,
  .ibmh-process__steps li:focus-within { transform: none; transition: none; }
}
.ibmh-no-anim .ibmh-process__steps li { transform: none !important; }
.ibmh-process__steps h3 { margin: 0 0 0.4rem; font-size: 1rem; }
/* Gestaffelter Karten-Reveal (nur mit JS; No-JS = sofort sichtbar) */
.ibmh-js .ibmh-process__steps li {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--ibmh-duration-slow) var(--ibmh-ease-out),
              transform var(--ibmh-duration-slow) var(--ibmh-ease-out);
}
.ibmh-js .ibmh-process.is-visible .ibmh-process__steps li { opacity: 1; transform: none; }
.ibmh-js .ibmh-process.is-visible .ibmh-process__steps li:nth-child(2) { transition-delay: 90ms; }
.ibmh-js .ibmh-process.is-visible .ibmh-process__steps li:nth-child(3) { transition-delay: 180ms; }
.ibmh-js .ibmh-process.is-visible .ibmh-process__steps li:nth-child(4) { transition-delay: 270ms; }
.ibmh-js .ibmh-process.is-visible .ibmh-process__steps li:nth-child(5) { transition-delay: 360ms; }
.ibmh-no-anim .ibmh-process__steps li { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ibmh-js .ibmh-process__steps li { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.ibmh-process__steps p { margin: 0; color: var(--ibmh-text-muted); font-size: 0.95rem; }

.ibmh-service-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ibmh-gap);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.ibmh-service-grid > li {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--ibmh-glass-border);
  border-radius: var(--ibmh-radius-md);
  padding: 1.4rem;
  box-shadow: 0 10px 30px rgba(13, 43, 99, 0.05);
  min-width: 0;
  margin: 0;
}
.ibmh-service-grid h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.ibmh-service-grid ul { list-style: none; margin: 0; padding: 0; }
.ibmh-service-grid ul li { padding: 0.2rem 0; margin: 0; }
.ibmh-service-grid ul a { text-decoration: none; font-weight: 600; }
.ibmh-service-grid ul a:hover { text-decoration: underline; }

.ibmh-why { background: linear-gradient(180deg, #ffffff 0%, var(--ibmh-bg) 100%); }
.ibmh-why__inner {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.ibmh-why__lead .ibmh-eyebrow { margin-bottom: 0.5rem; }
.ibmh-why__lead h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); }
.ibmh-why__statement { color: var(--ibmh-text-muted); font-size: 1.05rem; margin: 0.8rem 0 1.5rem; max-width: 26rem; }
.ibmh-why__list { list-style: none; margin: 0; padding: 0; }
.ibmh-why__list li {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.3rem 0;
  border-top: 1px solid rgba(24, 72, 160, 0.12);
}
.ibmh-why__list li:first-child { padding-top: 0.3rem; border-top: 0; }
.ibmh-why__num {
  font-family: var(--ibmh-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ibmh-blue-500);
  line-height: 1.7;
  flex: none;
}
.ibmh-why__body h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.ibmh-why__body p { margin: 0; color: var(--ibmh-text-muted); font-size: 0.98rem; }
@media (max-width: 820px) { .ibmh-why__inner { grid-template-columns: 1fr; } }

/* Kontaktblock im Glass-Panel (Szene 11) */
.ibmh-contact-block {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-bottom: 1.1rem;
}
.ibmh-contact-block__location {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--ibmh-radius-md);
  padding: 0.9rem 1.1rem;
  min-width: 0;
}
.ibmh-contact-block__location h3 { margin: 0 0 0.35rem; font-size: 0.92rem; }
.ibmh-contact-block__location p { margin: 0; font-size: 0.92rem; }
.ibmh-contact-block__mail { grid-column: 1 / -1; margin: 0; font-weight: 600; }

/* ---------------------------------------------------------------------------
 * Mobile: Bild oben (Mobile-WebP), Glass-Card überlappend darunter
 * ------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .ibmh-stage-scene { min-height: 0; display: block; }
  .ibmh-stage-bg { position: relative; inset: auto; height: 52vh; }
  .ibmh-stage-scene--hero .ibmh-stage-bg { height: 56vh; }
  .ibmh-stage-overlay { padding: 0 1rem 2.2rem; margin-top: -3.2rem; }
  .ibmh-glass-panel {
    max-width: none;
    background: rgba(255, 255, 255, 0.82);
  }
  .ibmh-stage-scene[data-text="right"] .ibmh-glass-panel { justify-self: stretch; }
}

/* Reveal (nur mit JS aktiv; ohne JS ist alles sichtbar) */
.ibmh-js .ibmh-glass-panel {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--ibmh-duration-slow) var(--ibmh-ease-out),
              transform var(--ibmh-duration-slow) var(--ibmh-ease-out);
}
.ibmh-js .ibmh-stage-scene.is-visible .ibmh-glass-panel,
.ibmh-js .ibmh-stage-scene--hero .ibmh-glass-panel { opacity: 1; transform: none; }

/* Review-/Test-Schalter (?noanim) */
.ibmh-no-anim .ibmh-glass-panel,
.ibmh-no-anim .ibmh-hotspot { opacity: 1 !important; transform: none !important; transition: none !important; }
.ibmh-no-anim .ibmh-hotspot { transform: translate(-50%, -50%) !important; opacity: 1 !important; }
.ibmh-no-anim .ibmh-stage-scene[data-motion="subtle-pan"] .ibmh-stage-bg img { transform: none !important; transition: none !important; }

/* Reduced Motion: keine Reveals, keine Pans, keine Transitions */
@media (prefers-reduced-motion: reduce) {
  .ibmh-js .ibmh-glass-panel { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ibmh-js .ibmh-hotspot { opacity: 1; transition: none; }
  .ibmh-js .ibmh-stage-scene[data-motion="subtle-pan"] .ibmh-stage-bg img { transform: none !important; transition: none !important; }
  .ibmh-btn { transition: none; }
}

/* Rechte Gutter für die Floating-Szenen-Navigation: Inhalt bleibt frei vom Dot-Rail
 * (nur ab Desktop-Breite, wo die Nav sichtbar ist). */
@media (min-width: 901px) {
  .ibmh-hx .ibmh-stage-overlay,
  .ibmh-hx .ibmh-section-inner { padding-right: 3.75rem !important; }
}