/* 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);
}
/* Ruhiger rechter Rand ab Desktopbreite. Muss VOR der Rail-Bedingung stehen: beide Regeln
 * haben Spezifitaet (0,2,0), die spaetere gewinnt. Frueher stand dieser Block am Dateiende
 * mit `!important` — dadurch war die Rail-Gutter-Regel darunter wirkungslos und der Inhalt
 * lief bei 1180-1280px unter die Rail (gemessen 2026-08-04: 6px Ueberdeckung bei 1180px). */
@media (min-width: 901px) {
  .ibmh-hx .ibmh-stage-overlay,
  .ibmh-hx .ibmh-section-inner,
  .ibmh-hx .ibmh-scene__inner { padding-right: 3.75rem; }
}

@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-scene__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);
  /* border-box ist hier die Bedingung dafuer, dass die Rail-Gutter ueberhaupt wirkt:
   * mit content-box begrenzt max-width nur den INHALT, das rechte Padding waechst dann
   * nach aussen statt den Inhalt hereinzuziehen. Gemessen 2026-08-04: rechtsbuendige
   * Glass-Panels endeten trotz Gutter bei x=1400, die Rail beginnt bei x=1368 — 32px
   * Ueberdeckung. Gilt genauso fuer .ibmh-section-inner und .ibmh-scene__inner. */
  box-sizing: border-box;
  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);
  box-sizing: border-box;      /* Begruendung siehe .ibmh-stage-overlay */
  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.
 *
 * Der `margin: 0` ist ein Kollisionsfix, kein Stilwunsch: ibmh-components.css:812 setzt
 * `.ibmh-situations { margin: 2.2rem 0 3rem }` fuer ein voellig anderes Bauteil
 * (sc_situations(), Karten-Grid der Leistungsseiten) — gleicher Klassenname, andere
 * Komponente. Diese CSS-Datei laedt auf der Startseite mit, weil der Seiteninhalt `[ibmh_`
 * enthaelt. Gemessen 2026-08-04: 35,2px tote Flaeche ueber und 48px unter dem Abschnitt.
 * Behoben wird das hier lokal (Spezifitaet 0,2,0 gegen 0,1,0), nicht drueben — die
 * Leistungsseiten brauchen ihre Abstaende weiterhin. */
.ibmh-situations {
  background: var(--ibmh-bg);
  padding: clamp(2.5rem, 4.5vw, 4rem) clamp(1.25rem, 3vw, 2.5rem);
}
.ibmh-hx .ibmh-situations { margin: 0; }
.ibmh-situations h2 { font-size: clamp(1.35rem, 2.6vw, 2rem); margin-bottom: 0.4rem; }
.ibmh-situations .ibmh-eyebrow { margin-bottom: 0.35rem; }
.ibmh-situations__intro { color: var(--ibmh-text-muted); margin: 0 0 1.5rem; max-width: 34rem; }
.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). */
/* 150vh (2026-08-05, vorher 175vh, davor 200vh): die Pin-Strecke war weiterhin laenger als
 * die Fahrt brauchte. HOLD_START/HOLD_END im JS sind ANTEILE der Pin-Strecke, die Fahrt
 * laeuft also unveraendert vollstaendig durch (letzte Karte bleibt erreichbar) — nur zuegiger.
 *
 * WARUM NUR die Sektionshoehe und NICHT die Buehnenhoehe angefasst wird: Nachlauf zwischen
 * Fahrtende und Loesen des Sticky = 0,06*sitH + 0,94*vh - headerTop - stickyH. Mit der
 * bestehenden Buehne (stickyH = 100svh - header) kuerzt sich das zu 0,06*(sitH - vh) und
 * bleibt damit IMMER knapp positiv. Jede Verkleinerung der Buehne vergroessert den Nachlauf
 * 1:1 — eine kompaktere Buehne wuerde den Abschnitt also laenger "kleben" lassen, nicht
 * kuerzer. Gemessen 1440x900: Nachlauf 40,5px (175vh) -> 27,0px (150vh), Sektion 1575 -> 1350px.
 * min-height/top der Buehne bleiben deshalb unveraendert (auch wegen Slide-Rechnung + Rail-Zone). */
.ibmh-situations--track { padding: 0; height: 150vh; }
.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));
  /* Kein !important noetig: (0,3,0) schlaegt die allgemeine Gutter-Regel (0,2,0), seit
   * deren `!important` am 2026-08-04 entfallen ist. */
  padding-inline: var(--ibmh-stage-pad) 0;
  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-lg);
  padding: 1.5rem 1.6rem 1.4rem;
  min-width: 0;
  margin: 0;
  counter-increment: ibmh-situation;
}
.ibmh-situation-strip { counter-reset: ibmh-situation; }
.ibmh-situation-strip li::before {
  content: counter(ibmh-situation, decimal-leading-zero);
  display: block;
  font-family: var(--ibmh-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ibmh-blue-500);
  margin-bottom: 0.6rem;
}
.ibmh-situation-strip h3 { font-size: 1.06rem; margin-bottom: 0.35rem; }
.ibmh-situation-strip p { margin: 0 0 0.7rem; color: var(--ibmh-text-muted); font-size: 0.92rem; }
.ibmh-situation-strip a { font-weight: 700; font-size: 0.92rem; }

.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);
}
/* Nummer im normalen Fluss (2026-08-05, vorher absolut positioniert).
 * Alt: `::before` lag absolut auf top:1.25rem bei 2.7rem Hoehe (Unterkante 63,2px), waehrend
 * das Karten-Padding-Top nur 3.7rem = 59,2px reserviert hatte — die Ueberschrift begann also
 * 4px INNERHALB des Nummernsiegels und beruehrte es sichtbar. Bei zweizeiligen Ueberschriften
 * ("Konzept & Sanierungsfahrplan", "Umsetzung & Dokumentation") fiel das am staerksten auf.
 * Im normalen Fluss kann diese Kollision strukturell nicht mehr auftreten: der Abstand
 * Nummer->Ueberschrift ist ein echter margin, unabhaengig von Schriftgroesse und Zeilenzahl,
 * und alle fuenf Karten richten sich automatisch identisch aus. */
.ibmh-process__steps li {
  counter-increment: ibmh-step;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 1.25rem 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);
  /* align-self statt Stretch: die Ziffer bleibt ein 2.7rem-Kreis und wird nicht auf
   * Kartenbreite gezogen. flex-shrink:0, damit sie bei engen Karten rund bleibt. */
  align-self: flex-start;
  flex: 0 0 auto;
  margin-bottom: 0.85rem;
  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; }
}


/* ===========================================================================
 * Kompositionsformen und Gliederung (2026-08-04)
 *
 * Ausgangslage: zehn Leistungsszenen in exakt derselben Form (vollflaechige Buehne +
 * Glass-Panel, nur die Panelseite wechselte). Beim Scrollen las sich das als Bildfolge,
 * nicht als Dramaturgie. Jetzt eroeffnet jedes Kapitel mit einer Buehne, die Folgeszenen
 * laufen als editorialer Split. Die Kapitelmarken setzen die Zaesur dazwischen.
 * ========================================================================= */

/* --- Split-Szene: gerahmtes Bild neben Text, kein Glas ---------------------- */
.ibmh-scene--split {
  min-height: 0;
  display: block;
  overflow: visible;          /* Hotspot-Popups duerfen ueber die Szene hinausragen */
  background: var(--ibmh-surface);
}
/* Flaechenwechsel folgt der Bildseite -> zwei aufeinanderfolgende Splits stehen nie auf
 * derselben Flaeche. data-text ist die vorhandene Quelle aus dem Datenvertrag. */
.ibmh-scene--split[data-text="right"] { background: var(--ibmh-bg); }

.ibmh-scene__inner {
  max-width: var(--ibmh-container-wide);
  box-sizing: border-box;      /* Begruendung siehe .ibmh-stage-overlay */
  margin: 0 auto;
  padding: clamp(3.25rem, 6.5vw, 6.5rem) clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* Text links (data-text="left") -> Bild rechts, und umgekehrt. */
.ibmh-scene--split[data-text="left"] .ibmh-scene__media { order: 2; }

.ibmh-scene__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
}
.ibmh-scene__frame {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;           /* haelt den Ken-Burns-Pan an der Rahmenkante */
  border-radius: var(--ibmh-radius-lg);
  box-shadow: 0 30px 70px rgba(13, 43, 99, 0.16);
}
.ibmh-scene__panel { max-width: 34rem; }
.ibmh-scene__panel h2 { font-size: clamp(1.5rem, 3vw, 2.35rem); }
.ibmh-scene__panel > p { color: var(--ibmh-text-muted); }
.ibmh-scene__panel .ibmh-trust { border-top-color: rgba(24, 72, 160, 0.16); }
/* Hotspots liegen im figure, also relativ zum Bildrahmen — dieselben Prozentwerte wie auf
 * der Buehne treffen damit dieselben Bildstellen. */
.ibmh-scene--split .ibmh-hotspots { z-index: 4; }

@media (max-width: 900px) {
  .ibmh-scene__inner { grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2.25rem); }
  .ibmh-scene--split[data-text="left"] .ibmh-scene__media { order: 0; }
  .ibmh-scene__panel { max-width: none; }
}
@media (max-width: 700px) {
  .ibmh-scene__inner { padding: 2.5rem 1.25rem; }
  .ibmh-scene__media { aspect-ratio: 16 / 11; }
  .ibmh-scene__frame { border-radius: var(--ibmh-radius-md); }
}

/* --- Kapitelmarken --------------------------------------------------------- */
.ibmh-chapter { background: var(--ibmh-bg); }
.ibmh-chapter__inner {
  padding: clamp(3rem, 5.5vw, 5.5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.75rem);
}
.ibmh-chapter__eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0 0 0.6rem;
  font-family: var(--ibmh-font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--ibmh-blue-500);
}
.ibmh-chapter__num { font-variant-numeric: tabular-nums; }
.ibmh-chapter__of { color: var(--ibmh-text-soft); }
.ibmh-chapter__title {
  font-family: var(--ibmh-font-display);
  font-weight: 700;
  color: var(--ibmh-ink);
  line-height: 1.12;
  font-size: clamp(1.7rem, 4vw, 3rem);
  margin: 0 0 0.5rem;
}
.ibmh-chapter__text {
  margin: 0;
  max-width: 38rem;
  color: var(--ibmh-text-muted);
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
}

/* --- Teamvorschau ---------------------------------------------------------- */
.ibmh-team-preview {
  background: linear-gradient(180deg, var(--ibmh-bg) 0%, #ffffff 100%);
  padding: clamp(3.5rem, 6vw, 6rem) clamp(1.25rem, 3vw, 2.5rem);
}
.ibmh-team-preview__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
.ibmh-team-preview__lead h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); }
.ibmh-team-preview__lead > p { color: var(--ibmh-text-muted); max-width: 28rem; margin: 0 0 1.5rem; }
.ibmh-team-preview__group { margin: 0; }
.ibmh-team-preview__group img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ibmh-radius-lg);
  box-shadow: 0 30px 70px rgba(13, 43, 99, 0.16);
}
.ibmh-team-preview__people {
  grid-column: 1 / -1;
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--ibmh-gap);
}
.ibmh-team-preview__people li { margin: 0; min-width: 0; }
/* Portrait links, Text rechts: bei nur zwei Karten wird jede ~600px breit — eine
 * zentrierte Spalte liesse den Grossteil davon leer. */
.ibmh-team-preview__person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: repeat(4, auto);
  align-content: center;
  column-gap: 1.4rem;
  text-decoration: none;
  color: inherit;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--ibmh-border);
  border-radius: var(--ibmh-radius-lg);
  background: var(--ibmh-surface);
  box-shadow: 0 10px 30px rgba(13, 43, 99, 0.06);
  height: 100%;
  transition: transform var(--ibmh-duration-base, 280ms) var(--ibmh-ease-out),
              box-shadow var(--ibmh-duration-base, 280ms) var(--ibmh-ease-out),
              border-color var(--ibmh-duration-base, 280ms) var(--ibmh-ease-out);
}
.ibmh-team-preview__person:hover,
.ibmh-team-preview__person:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(24, 72, 160, 0.28);
  box-shadow: 0 22px 50px rgba(13, 43, 99, 0.14);
}
/* Portraitoptik = Theme-Klasse .ibmh-team-avatar (50 % Radius, style.css); hier nur die
 * Groesse auf den Kartenkontext gezogen, kein zweiter Radiuswert. */
.ibmh-team-preview__avatar {
  width: 116px;
  height: 116px;
  margin: 0;
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
}
.ibmh-team-preview__name {
  font-family: var(--ibmh-font-display);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--ibmh-ink);
  line-height: 1.25;
}
.ibmh-team-preview__focus {
  margin-top: 0.3rem;
  font-size: 0.92rem;
  color: var(--ibmh-text-muted);
}
.ibmh-team-preview__place {
  margin-top: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ibmh-text-soft);
}
.ibmh-team-preview__cue {
  margin-top: 0.7rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ibmh-blue-700);
}
@media (max-width: 560px) {
  .ibmh-team-preview__person { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 0; }
  .ibmh-team-preview__avatar { grid-row: auto; margin-bottom: 1rem; }
}
.ibmh-team-preview__person:hover .ibmh-team-preview__cue { text-decoration: underline; }
.ibmh-hx .ibmh-team-preview__person:focus-visible {
  outline: 3px solid var(--ibmh-blue-500);
  outline-offset: 3px;
  border-radius: var(--ibmh-radius-lg);
}
@media (max-width: 900px) {
  .ibmh-team-preview__inner { grid-template-columns: 1fr; }
}

/* --- Unterer Seitenabschluss: Footer buendig an die letzte Buehne -----------
 * parts/footer.html setzt inline `.dg-site-footer { margin-top: clamp(2.5rem,6vw,4.5rem) }`.
 * Diese Margin kollabiert durch den Template-Part-Wrapper hindurch und erzeugte unter der
 * letzten vollflaechigen Buehne einen hellen Streifen (gemessen 2026-08-04: 72px Desktop,
 * 54px Tablet, 40px Mobil). Hier nur diese eine Eigenschaft, nur auf Seiten mit der
 * Experience, mit hoeherer Spezifitaet — KEIN negativer Margin: der iOS-Overscroll-Fix des
 * Footers arbeitet mit box-shadow und darf nicht ueberlagert werden. */
.wp-site-blocks > main.wp-block-group:has(.ibmh-hx) + footer .dg-site-footer { margin-top: 0; }

/* ===========================================================================
 * Startseiten-Varianten — gleiches DOM, zwei Handschriften (siehe home_variant())
 *
 * A „Editorial"      — asymmetrische Kompositionen, viel Weissraum, starke Typohierarchie,
 *                      Kapitel als ruhige Zaesur auf heller Flaeche.
 * B „Gefuehrte Reise" — engere Taktung, deutlichere Farbwechsel, Kapitel als dunkles Band
 *                      mit sichtbarem Faden zur naechsten Szene.
 * ========================================================================= */

/* --- Variante A: Editorial ------------------------------------------------- */
.ibmh-hx--var-a .ibmh-scene__inner {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  padding-block: clamp(4rem, 8vw, 8rem);
}
.ibmh-hx--var-a .ibmh-scene--split[data-text="left"] .ibmh-scene__inner {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}
.ibmh-hx--var-a .ibmh-scene__media { aspect-ratio: 4 / 5; }
.ibmh-hx--var-a .ibmh-scene__panel h2 { font-size: clamp(1.7rem, 3.6vw, 2.9rem); letter-spacing: -0.01em; }
.ibmh-hx--var-a .ibmh-scene__panel > p:not([class]) { font-size: 1.08rem; }
/* Haarlinie statt Farbflaeche: die Zaesur entsteht typografisch, nicht durch ein Band. */
.ibmh-hx--var-a .ibmh-chapter { background: var(--ibmh-surface); }
.ibmh-hx--var-a .ibmh-chapter__inner { border-top: 1px solid var(--ibmh-border); }
.ibmh-hx--var-a .ibmh-chapter__title { max-width: 20ch; }
.ibmh-hx--var-a .ibmh-scene--split[data-text="right"] { background: var(--ibmh-surface); }
.ibmh-hx--var-a .ibmh-scene--split[data-text="left"] { background: var(--ibmh-bg); }
.ibmh-hx--var-a .ibmh-team-preview { background: var(--ibmh-surface); }

@media (max-width: 900px) {
  .ibmh-hx--var-a .ibmh-scene__inner,
  .ibmh-hx--var-a .ibmh-scene--split[data-text="left"] .ibmh-scene__inner { grid-template-columns: 1fr; }
  .ibmh-hx--var-a .ibmh-scene__media { aspect-ratio: 16 / 11; }
}

/* --- Variante B: Gefuehrte Reise ------------------------------------------- */
.ibmh-hx--var-b .ibmh-chapter {
  position: relative;
  background: linear-gradient(160deg, #123a86 0%, var(--ibmh-blue-900) 100%);
  color: rgba(255, 255, 255, 0.86);
}
.ibmh-hx--var-b .ibmh-chapter__inner {
  padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(3.25rem, 6vw, 5.5rem);
}
.ibmh-hx--var-b .ibmh-chapter__eyebrow { color: var(--ibmh-blue-500); font-size: 0.78rem; }
/* Die Nummer muss MIT dem Kapiteltitel skalieren, nicht mit dem Eyebrow.
 *
 * Vorher `2.2em` — relativ zum Eyebrow (0.78rem), also fix 27,5px auf jeder Breite. Der Titel
 * skaliert dagegen mit clamp(1.7rem, 4vw, 3rem). Gemessen 2026-08-04: Desktop Nummer 27,5px zu
 * Titel 48px (Verhaeltnis 0,57 — korrekt untergeordnet), Mobil Nummer 27,5px zu Titel 27,2px
 * (Verhaeltnis 1,01 — die dekorative Zahl war genauso gross wie die Ueberschrift, beide Poppins
 * 700, die Hierarchie war flach). Bei fuenf Wiederholungen faellt das auf.
 *
 * Der clamp haelt das Verhaeltnis jetzt auf ~0,57-0,59 ueber alle Breiten: Desktop bleibt
 * unveraendert bei 27,2px, Mobil geht auf 16px zurueck. */
.ibmh-hx--var-b .ibmh-chapter__num {
  font-size: clamp(1rem, 2.3vw, 1.7rem);
  line-height: 1;
  color: #ffffff;
  letter-spacing: 0;
}
.ibmh-hx--var-b .ibmh-chapter__of { color: rgba(255, 255, 255, 0.6); }
.ibmh-hx--var-b .ibmh-chapter__title { color: #ffffff; }
.ibmh-hx--var-b .ibmh-chapter__text { color: rgba(255, 255, 255, 0.78); }
/* Der Faden: laeuft aus dem Kapitelband heraus in die folgende Szene. Rein dekorativ,
 * ausserhalb des Textflusses, deshalb ohne eigenes Markup. */
.ibmh-hx--var-b .ibmh-chapter::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2.25rem;
  width: 2px;
  height: 4.5rem;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, var(--ibmh-blue-500), rgba(30, 159, 233, 0));
  z-index: 4;
  pointer-events: none;
}
.ibmh-hx--var-b .ibmh-scene--split[data-text="left"] { background: var(--ibmh-blue-100); }
.ibmh-hx--var-b .ibmh-scene--split[data-text="right"] { background: var(--ibmh-surface); }
.ibmh-hx--var-b .ibmh-scene__inner { padding-block: clamp(3rem, 5.5vw, 5rem); }
.ibmh-hx--var-b .ibmh-scene__media { aspect-ratio: 4 / 3; }
.ibmh-hx--var-b .ibmh-scene__frame { border-radius: var(--ibmh-radius-md); }
.ibmh-hx--var-b .ibmh-process { background: linear-gradient(180deg, var(--ibmh-blue-100) 0%, var(--ibmh-bg) 100%); }
.ibmh-hx--var-b .ibmh-team-preview { background: linear-gradient(180deg, var(--ibmh-surface) 0%, var(--ibmh-blue-100) 100%); }

/* ===========================================================================
 * FIX-LAUF 1 VOR GO-LIVE — 2026-09-20 (Agent B-frontend)
 *
 * PL-015 (P1) — Abschnittsnavigation: fokussierbar, aber unsichtbar
 *
 * Ursache: Die Rail wird oben in dieser Datei nur ueber `opacity: 0` +
 * `pointer-events: none` ausgeblendet. Ein Element mit Opazitaet 0 bleibt im
 * Dokumentfluss und damit in der Tab-Reihenfolge. Im Landezustand (scrollY 0,
 * Klasse `is-rail-visible` noch nicht gesetzt) bekamen die 16 Abschnittslinks
 * deshalb nacheinander den Tastaturfokus, ohne sichtbar zu sein — verdeckt
 * zusaetzlich von .ibmh-stage-overlay (Audit 2026-09-19, Tabstopps 12-27).
 *
 * Fix: Im ausgeblendeten Zustand zusaetzlich `visibility: hidden`. Damit sind
 * die Links weder fokussierbar noch von Screenreadern erreichbar, solange die
 * Rail verborgen ist. Das Ein-/Ausblenden bleibt exakt wie bisher eine reine
 * Opazitaetsanimation: beim Einblenden schaltet visibility ohne Verzoegerung
 * auf sichtbar (transition-delay 0s), beim Ausblenden erst nach Ablauf der
 * 240ms Blende (`visibility 0s linear 240ms`) — die Rail blendet also weiter
 * weich aus, statt hart zu verschwinden. Kein Einfluss auf das Layout, auf die
 * Scroll-Animation oder auf die Marker-Position (visibility aendert keine
 * Geometrie).
 *
 * Ohne JavaScript greift `.ibmh-js` nicht, die Rail bleibt dann wie bisher
 * dauerhaft sichtbar und bedienbar.
 * ======================================================================== */
.ibmh-hx.ibmh-js .ibmh-progress {
  visibility: hidden;
  transition: opacity 240ms var(--ibmh-ease-out), visibility 0s linear 240ms;
}
.ibmh-hx.ibmh-js .ibmh-progress.is-rail-visible {
  visibility: visible;
  transition: opacity 240ms var(--ibmh-ease-out), visibility 0s linear 0s;
}


/* ===========================================================================
 * FIX-LAUF 2 VOR GO-LIVE — 2026-09-21 (Agent U-frontend)
 *
 * PL-051 (P2, WCAG 1.4.12 Text Spacing) — Hero-Panel wird mit eigenen
 * Textabstaenden breiter als der Viewport, Text wird rechts abgeschnitten
 *
 * URSACHE (gemessen 2026-09-21, 390px, mit den WCAG-Textabstaenden
 * line-height 1.5 / letter-spacing 0.12em / word-spacing 0.16em / 2em
 * Absatzabstand):
 *   .ibmh-glass-panel--hero  x=16  width=405.4  right=421.4
 *   .ibmh-stage-overlay      clientWidth 390  scrollWidth 421
 * Die Buehne ist `display: grid` (.ibmh-stage-overlay). Ein Grid-Item hat
 * `min-width: auto`, seine Mindestgroesse ist also die min-content-Breite des
 * Inhalts. Das laengste unteilbare Wort der H1 ("Ingenieurleistungen") ist mit
 * 0.12em Zeichenabstand breiter als die verfuegbare Spalte — die Spur wird
 * ueber den Container hinaus aufgezogen, und `overflow: clip` der Szene
 * schneidet den Ueberstand einfach ab. Bei ≤700px steht auf dem Panel
 * zusaetzlich `max-width: none`, es gibt also keine zweite Bremse.
 *
 * FIX, zwei Teile, beide noetig:
 *  1. `min-width: 0` nimmt dem Grid-Item die automatische Mindestbreite; die
 *     Spur bleibt damit in der Bühne. `max-width: 100%` deckelt zusaetzlich
 *     den Fall, dass die Bühne ihrerseits breiter waere.
 *  2. `overflow-wrap: break-word` auf den Textkindern laesst das zu lange Wort
 *     umbrechen, statt aus dem jetzt schmaleren Panel zu laufen.
 *
 * BEWUSST NICHT `overflow-wrap: anywhere` und KEIN `hyphens: auto`:
 *  - `anywhere` geht in die min-content-Berechnung ein und wuerde die
 *    Spaltenbreite auch im Normalzustand veraendern (Hero = Aushaengeschild).
 *  - `break-word` wirkt ausschliesslich im Zeilenumbruch und erst dann, wenn
 *    das Wort ohnehin nicht passt. Ohne Textabstaende aendert sich nichts.
 *  - `hyphens: auto` wuerde im Normalzustand sichtbare Trennstriche in die
 *    Hero-Ueberschrift setzen.
 * Verifiziert im Normalzustand bei 360/390/430/768/1024/1440 gegen
 * evidence/A-visual/sweep.json: keine Verschiebung.
 * ------------------------------------------------------------------------- */
.ibmh-glass-panel {
  min-width: 0;
  max-width: min(34rem, 100%);
}
.ibmh-glass-panel--hero { max-width: min(38rem, 100%); }
.ibmh-glass-panel--compact { max-width: min(27rem, 100%); }
.ibmh-glass-panel--contact { max-width: min(40rem, 100%); }

@media (max-width: 700px) {
  /* Die Mobile-Regel weiter oben setzt `max-width: none`; sie steht frueher in
   * der Datei und haette bei gleicher Spezifitaet sonst das letzte Wort. */
  .ibmh-glass-panel { max-width: 100%; }
}

.ibmh-glass-panel > *,
.ibmh-glass-panel h1,
.ibmh-glass-panel h2,
.ibmh-glass-panel h3,
.ibmh-glass-panel p,
.ibmh-glass-panel li,
.ibmh-glass-panel a {
  overflow-wrap: break-word;
}


/* ---------------------------------------------------------------------------
 * PL-048 (P2, WCAG 2.4.7 / 2.4.11) — vierte Situationskarte bekommt den Fokus
 * ausserhalb des sichtbaren Bereichs
 *
 * URSACHE (gemessen 2026-09-21, 1440x900, Landezustand):
 * Der Situations-Track faehrt horizontal, indem house-experience.js bei jedem
 * Scroll-Frame ein INLINE `transform: translateX(-Npx)` auf
 * .ibmh-situation-strip setzt. Die Fahrt haengt ausschliesslich an der
 * vertikalen Scrollposition; auf Fokus reagiert sie nicht. Beim Tabben landet
 * der Link der vierten Karte deshalb bei x=1458 (Viewport 1440) und wird von
 * `overflow-x: clip` der Bühne abgeschnitten — elementFromPoint trifft ihn
 * nicht (Tab-Stopp 15, Link „Feuchteschutz & Akustik“).
 *
 * FIX: Solange irgendwo im Track ein :focus-visible sitzt, wird die Fahrt
 * ausgesetzt und der Streifen als umbrechende Kachelreihe dargestellt. Dann
 * sind alle vier Karten gleichzeitig in der gepinnten Bühne sichtbar, der
 * Fokusrahmen liegt garantiert im Viewport, und es muss nichts nachgescrollt
 * werden (das waere die fehleranfaellige Variante: Chrome berechnet
 * scroll-into-view vor dem naechsten Style-Durchlauf).
 *
 * Gleiches Muster und gleiche Begruendung wie beim Partner-Logoband in
 * ibmh-partner.css, inklusive der Wahl von :focus-VISIBLE statt :focus-within:
 * Ein Mausklick auf eine Karte setzt zwar den Fokus, aber kein
 * :focus-visible — sonst klappte der Track bei jedem Mausdruck um.
 *
 * `!important` ist hier zwingend und kein Notnagel: Das transform kommt als
 * Inline-Style aus dem JavaScript und ist ohne !important nicht erreichbar.
 * Es wirkt ausschliesslich im Fokuszustand; loest sich der Fokus, uebernimmt
 * das Skript beim naechsten Frame wieder unveraendert (die Scroll-Choreografie
 * selbst bleibt also unangetastet — keine Zeile JS geaendert).
 *
 * Platzprobe (gemessen 2026-09-21): Bühnenhoehe/Kartenhoehe
 *   1440x900 822/164, 1280x800 722/188, 1024x768 704/188, 1920x1080 1002/164,
 *   768x900 836/188 — zwei Karten je Reihe, zwei Reihen, plus Kopfzeile:
 *   ueberall deutlich unter der Bühnenhoehe, nichts wird vertikal geklippt.
 *
 * Faellt :has() aus (sehr alter Browser), greift die Regel gar nicht; es
 * bleibt beim bisherigen Verhalten. Unter 700px gibt es den Track nicht
 * (native Swipebar mit scroll-snap), dort ist nichts zu tun.
 * ------------------------------------------------------------------------- */
.ibmh-situations--track .ibmh-situation-strip:has(:focus-visible) {
  transform: none !important;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  row-gap: var(--ibmh-gap);
}
.ibmh-situations--track .ibmh-situation-strip:has(:focus-visible) > li {
  max-width: 100%;
}

/* Mobile Variante desselben Findings (≤700px, native Swipebar statt Track).
 *
 * Gemessen 21.09.2026 bei 390: Beim Tabben auf Karte 2 und 4 landet der Link bei x=387 bzw.
 * x=387 und reicht bis 575 bzw. 569 — bei Viewport 390 also praktisch ausserhalb. Ursache ist
 * nicht die Fahrt (die gibt es hier nicht), sondern `scroll-snap-type: x proximity`: Der Browser
 * scrollt den Container auf den Fokus hin, die Snap-Regel zieht ihn danach auf die naechste
 * Snapkante zurueck, und die liegt genau so, dass die Karte am rechten Rand anfaengt
 * (Kartenrechteck 360–700 bei Fenster 390).
 *
 * Fix: Solange ein :focus-visible im Streifen sitzt, kein Snap und ein Innenabstand fuer das
 * Heranscrollen. Fuer Wischen mit dem Finger aendert sich nichts — dabei entsteht kein
 * :focus-visible. Gemessen danach: alle vier Kartenlinks vollstaendig im Viewport
 * (Karte 2 bei x=101–289, Karte 4 bei x=104–286).
 *
 * Dieser Teil war im Audit nicht erfasst (PL-048 nennt nur Desktop 1440); er hat dieselbe
 * Ursachenfamilie und wird hier mitbehoben, weil die Regel genauso eng gescopt ist. */
@media (max-width: 700px) {
  .ibmh-situation-strip:has(:focus-visible) {
    scroll-snap-type: none;
    scroll-padding-inline: 1.25rem;
  }
}