/* Aus der bestehenden hero-app-preview.html übernommen und für Inline-Nutzung isoliert. */
.fmh-inline-ui{
      --navy:#001f41;--navy-700:#11316e;--ink:#4a5b78;--muted:#7f8ca5;
      --line:#e1e7f0;--line-soft:#edf1f7;--line-strong:#c8d3e2;
      --surface:#fff;--surface-2:#f5f8fc;--surface-3:#edf2f8;
      --cyan:#0b9fd8;--cyan-dark:#0576a6;--ok:#166f4c;--ok-bg:#e3f5ec;
      --warn:#8a5f00;--warn-bg:#fbf1d8;--done:#11316e;--done-bg:#e8ebf2;
    }
    .fmh-inline-ui,.fmh-inline-ui *{box-sizing:border-box}
    .fmh-inline-ui{margin:0;min-height:100%;background:transparent;color:var(--navy);font-family:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
    .fmh-inline-ui{padding:28px}
    .fha-window{width:min(1320px,100%);margin:auto;overflow:hidden;border:1px solid rgba(0,31,65,.14);border-radius:18px;background:var(--surface-2);box-shadow:0 22px 50px -24px rgba(0,31,65,.25),0 50px 90px -60px rgba(0,31,65,.32)}
    .fha-chrome{height:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px;border-bottom:1px solid var(--line);background:#fbfcfe}
    .fha-dots{display:flex;gap:6px}.fha-dots i{width:7px;height:7px;border-radius:50%;background:#cbd5e1}
    .fha-address{padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:white;color:var(--muted);font-size:10px}
    .fha-shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:660px}
    .fha-sidebar{display:grid;grid-template-rows:52px minmax(0,1fr) auto;border-right:1px solid var(--line);background:var(--surface-2)}
    .fha-brand{display:flex;align-items:center;padding:0 16px}.fha-brand img{width:84px;height:auto;display:block}
    .fha-nav{padding:8px}.fha-group{padding:12px 8px 5px;color:var(--muted);font-size:11px;font-weight:500}
    .fha-navitem{height:32px;display:flex;align-items:center;gap:9px;padding:0 8px;margin:1px 0;border-radius:6px;color:var(--ink);font-size:13px}
    .fha-navitem.fha-active{background:var(--surface-3);color:var(--navy);font-weight:500}
    .fha-ico{width:16px;height:16px;display:grid;place-items:center;color:var(--muted);font-size:12px}
    .fha-active .fha-ico{color:var(--navy)}
    .fha-count{margin-left:auto;min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px;border-radius:999px;background:var(--cyan);color:white;font-size:10px}
    .fha-sidefoot{padding:8px;border-top:1px solid var(--line)}
    .fha-user{display:flex;align-items:center;gap:8px;margin-top:6px;padding:8px}.fha-avatar{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--navy-700);color:#fff;font-size:10px;font-weight:600}.fha-user strong,.fha-user small{display:block}.fha-user strong{font-size:12px;font-weight:500}.fha-user small{margin-top:1px;color:var(--muted);font-size:10px}
    .fha-workspace{min-width:0;background:var(--surface-2)}
    .fha-topbar{height:52px;border-bottom:1px solid var(--line);background:white}
    .fha-page{min-height:600px;margin:8px 8px 8px 0;padding:26px 28px 32px;border-radius:12px;background:white}
    .fha-pagehead{display:flex;align-items:flex-start;justify-content:space-between;min-height:52px}.fha-pagehead h1{margin:0;font-size:22px;line-height:1.2;font-weight:500;letter-spacing:-.02em}.fha-pagehead p{margin:4px 0 0;color:var(--muted);font-size:12px}
    .fha-toolbar{display:flex;align-items:center;gap:12px;min-height:40px;margin-top:4px}.fha-seg{display:flex;padding:2px;border-radius:8px;background:var(--surface-3)}.fha-seg span{height:30px;display:flex;align-items:center;padding:0 12px;border-radius:6px;color:var(--ink);font-size:12px;font-weight:500}.fha-seg .fha-on{background:white;color:var(--navy);box-shadow:0 1px 1px rgba(0,31,65,.04)}
    .fha-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.fha-search{width:300px;height:34px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--line-strong);border-radius:8px;color:var(--muted);font-size:12px}.fha-search b{font-weight:400}.fha-btn{height:34px;display:flex;align-items:center;gap:6px;padding:0 11px;border:1px solid var(--line-strong);border-radius:8px;background:white;color:var(--navy);font-size:12px;font-weight:500}.fha-btn.fha-primary{border-color:var(--navy);background:var(--navy);color:white}
    .fha-table{margin-top:14px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:white}.fha-thead,.fha-row{display:grid;grid-template-columns:126px 142px minmax(190px,1fr) 110px 132px 105px 126px;align-items:center;padding:0 12px}.fha-thead{height:35px;border-bottom:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:500}.fha-month{height:29px;display:flex;align-items:center;padding:0 12px;border-bottom:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:11px;font-weight:500}.fha-row{min-height:61px;border-bottom:1px solid var(--line);font-size:12px}.fha-row:last-child{border-bottom:0}.fha-date{font-variant-numeric:tabular-nums}.fha-loc strong,.fha-loc small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fha-loc strong{font-weight:500}.fha-loc small{margin-top:2px;color:var(--muted);font-size:10px}
    .fha-pill{max-width:calc(100% - 10px);display:inline-flex;align-items:center;gap:6px;overflow:hidden;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.fha-pill:before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:currentColor;opacity:.72}.fha-p1{background:#e4f0fb;color:#155e9c}.fha-p3{background:#e3f5ec;color:#1b7a52}.fha-p5{background:#e0f4f7;color:#0f6f7d}.fha-p6{background:#fae6ee;color:#a33266}
    .fha-speakers{display:flex;align-items:center}.fha-sp{width:25px;height:25px;display:grid;place-items:center;margin-left:-4px;border:2px solid #fff;border-radius:50%;background:#eef1f6;color:var(--navy-700);font-size:9px;font-weight:500}.fha-sp:first-child{margin-left:0}
    .fha-cap{display:flex;align-items:center;gap:8px}.fha-track{width:66px;height:5px;overflow:hidden;border-radius:999px;background:var(--surface-3)}.fha-track i{display:block;height:100%;border-radius:inherit;background:var(--navy-700)}.fha-track.fha-over i{background:#c98a00}.fha-cap small{min-width:40px;color:var(--ink);font-size:10px;font-variant-numeric:tabular-nums}
    .fha-reg{min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 5px;border-radius:999px;background:var(--surface-3);color:var(--ink);font-size:10px}.fha-reg.fha-on{background:var(--cyan);color:white}
    .fha-status{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:6px;font-size:10px;font-weight:500;white-space:nowrap}.fha-status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.fha-live{background:var(--ok-bg);color:var(--ok)}.fha-done{background:var(--done-bg);color:var(--done)}.fha-warn{background:var(--warn-bg);color:var(--warn)}

/* Hero refinement: bestehende Desktop-App bleibt inhaltlich erhalten. */

.fmh-embed-stage {
  container-name: fobiHeroPreview;
  container-type: inline-size;
  max-width: 1100px;
}

.fmh-hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 18px;
  color: #6f7d92;
  font-size: 12px;
  line-height: 1.4;
}

.fmh-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fmh-hero-trust .icon {
  width: 13px;
  height: 13px;
  color: #166f4c;
}

.fmh-inline-preview.fmh-embed-frame {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.fmh-inline-ui { width: 100%; }

.fmh-mobile-appbar,
.fmh-mobile-cards {
  display: none;
}

.fmh-product-callout {
  transform: none !important;
  rotate: none !important;
  opacity: 0;
  animation:
    fmh-hero-chip-enter 460ms cubic-bezier(.2,.75,.25,1) both,
    fmh-hero-chip-float 6s ease-in-out infinite;
}

.fmh-product-callout--invite { animation-delay: 50ms, 900ms; }
.fmh-product-callout--registration { animation-delay: 350ms, 1200ms; }
.fmh-product-callout--tasks { animation-delay: 650ms, 1500ms; }

.fmh-product-callout--registration .fmh-product-callout-status i {
  animation: fmh-hero-pulse 1.8s ease-out infinite;
}

.fmh-inline-ui .fha-track > i {
  transform-origin: left center;
  scale: 0 1;
  animation: fmh-hero-bar-fill 850ms cubic-bezier(.2,.7,.2,1) 300ms forwards;
}

@container fobiHeroPreview (min-width: 768px) and (max-width: 1023px) {
  .fmh-inline-ui { padding: 18px; }

  .fmh-inline-ui .fha-shell {
    grid-template-columns: 64px minmax(0,1fr);
  }

  .fmh-inline-ui .fha-brand {
    justify-content: center;
    padding: 0;
  }

  .fmh-inline-ui .fha-brand img { display: none; }

  .fmh-inline-ui .fha-brand::before {
    content: "";
    width: 28px;
    height: 28px;
    background: url("assets/fobi-mark.svg") center / contain no-repeat;
  }

  .fmh-inline-ui .fha-group,
  .fmh-inline-ui .fha-navitem > span:not(.fha-ico):not(.fha-count),
  .fmh-inline-ui .fha-user > span:last-child {
    display: none;
  }

  .fmh-inline-ui .fha-nav { padding: 8px 7px; }

  .fmh-inline-ui .fha-navitem {
    position: relative;
    justify-content: center;
    padding-inline: 0;
  }

  .fmh-inline-ui .fha-count {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 15px;
    height: 15px;
    padding-inline: 4px;
    font-size: 8px;
  }

  .fmh-inline-ui .fha-user {
    justify-content: center;
    padding-inline: 0;
  }

  .fmh-inline-ui .fha-page { padding: 22px 18px; }
  .fmh-inline-ui .fha-search { width: 190px; }

  .fmh-inline-ui .fha-thead,
  .fmh-inline-ui .fha-row {
    grid-template-columns: 112px minmax(170px,1fr) 102px 118px 88px 114px;
  }

  .fmh-inline-ui .fha-thead > *:nth-child(2),
  .fmh-inline-ui .fha-row > *:nth-child(2) {
    display: none;
  }

  .fmh-product-callout--invite {
    left: 16px !important;
    right: auto !important;
  }

  .fmh-product-callout--registration {
    right: 16px !important;
    left: auto !important;
  }

  .fmh-product-callout--tasks {
    right: 16px !important;
    left: auto !important;
  }
}

@container fobiHeroPreview (max-width: 767px) {
  .fmh-inline-preview.fmh-embed-frame {
    max-height: 420px;
    overflow: hidden;
    border: 1px solid #d8e1ec;
    border-radius: 14px;
    background: #f5f8fc;
    box-shadow: 0 18px 44px -30px rgba(0,31,65,.34);
  }

  .fmh-inline-ui {
    padding: 0;
    min-height: 0;
  }

  .fmh-inline-ui .fha-window { display: none; }

  .fmh-mobile-appbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46px;
    padding: 0 14px;
    border-bottom: 1px solid #e1e7f0;
    background: #fff;
  }

  .fmh-mobile-appbar > span {
    color: #001f41;
    font-size: 11px;
    font-weight: 550;
  }

  .fmh-mobile-appbar > i {
    position: relative;
    width: 16px;
    height: 11px;
    border-top: 1.5px solid #66768f;
    border-bottom: 1.5px solid #66768f;
  }

  .fmh-mobile-appbar > i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 16px;
    border-top: 1.5px solid #66768f;
  }

  .fmh-mobile-cards {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 58px 12px 18px;
  }

  .fmh-mobile-cards article {
    padding: 12px;
    border: 1px solid #e1e7f0;
    border-radius: 9px;
    background: #fff;
  }

  .fmh-mobile-cards article > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .fmh-mobile-cards strong {
    color: #001f41;
    font-size: 11px;
    font-weight: 560;
  }

  .fmh-mobile-cards em {
    flex: none;
    padding: 3px 6px;
    border-radius: 999px;
    background: #e3f5ec;
    color: #166f4c;
    font-size: 8px;
    font-style: normal;
    font-weight: 550;
  }

  .fmh-mobile-cards em.is-done {
    background: #e8ebf2;
    color: #11316e;
  }

  .fmh-mobile-cards article > small {
    display: block;
    margin-top: 5px;
    color: #7f8ca5;
    font-size: 9px;
  }

  .fmh-mobile-capacity {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
  }

  .fmh-mobile-capacity > i {
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf4;
  }

  .fmh-mobile-capacity > i > b {
    display: block;
    width: var(--mobile-fill);
    height: 100%;
    border-radius: inherit;
    background: #0b9fd8;
    transform-origin: left center;
    scale: 0 1;
    animation: fmh-hero-bar-fill 800ms ease 180ms forwards;
  }

  .fmh-mobile-capacity > small {
    color: #65748a;
    font-size: 8px;
  }

  .fmh-mobile-cards .is-fading { opacity: .48; }

  .fmh-mobile-cards::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    height: 74px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(245,248,252,0), #f5f8fc 88%);
  }

  .fmh-product-callout--invite,
  .fmh-product-callout--tasks {
    display: none !important;
  }

  .fmh-product-callout--registration {
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
    animation: fmh-hero-chip-mobile-enter 420ms ease 160ms both;
  }

  .fmh-product-callout--registration .fmh-product-callout-status i {
    animation: none;
  }
}

@media (max-width: 767px) {
  .fmh-hero-trust {
    display: grid;
    justify-content: start;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    gap: 8px;
    text-align: left;
  }
}

@keyframes fmh-hero-chip-enter {
  from { opacity: 0; scale: .985; }
  to { opacity: 1; scale: 1; }
}

@keyframes fmh-hero-chip-float {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@keyframes fmh-hero-chip-mobile-enter {
  from { opacity: 0; scale: .985; }
  to { opacity: 1; scale: 1; }
}

@keyframes fmh-hero-pulse {
  0% { box-shadow: 0 0 0 0 rgba(22,111,76,.34); }
  70% { box-shadow: 0 0 0 5px rgba(22,111,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,111,76,0); }
}

@keyframes fmh-hero-bar-fill {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fmh-product-callout,
  .fmh-product-callout--registration .fmh-product-callout-status i,
  .fmh-inline-ui .fha-track > i,
  .fmh-mobile-capacity > i > b {
    animation: none !important;
  }

  .fmh-product-callout {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }

  .fmh-inline-ui .fha-track > i,
  .fmh-mobile-capacity > i > b {
    scale: 1 1;
  }
}

/* =========================================================
   fobi Web 1.1 · Hero mobile normalization
   ========================================================= */
@media(max-width:767px){
  .fmh-embed-hero{
    padding-top:var(--fw-section-mobile);
  }

  .fmh-embed-copy{
    padding-inline:0;
  }

  .fmh-embed-copy h1{
    max-width:100%;
    text-wrap:balance;
  }

  .fmh-embed-lead{
    max-width:36rem;
    margin-inline:auto;
  }

  .fmh-embed-actions .button{
    min-height:50px;
  }

  .fha-preview,
  .fha-app,
  .fha-shell{
    max-width:100%;
  }
}

/* Hero · Mobile App Preview Visibility */

/*
 * Die Produktvorschau braucht ausreichend Fläche, um seriös
 * und lesbar zu wirken. Auf Smartphone-Breiten wird deshalb
 * die komplette Bühne inklusive aller Preview-Overlays entfernt.
 */
@media (max-width: 767px) {
  .fmh-embed-stage {
    display: none !important;
  }
}

/*
 * Auch bei einem Smartphone im Querformat soll die Vorschau
 * nicht plötzlich wieder erscheinen, nur weil die Breite groß ist.
 */
@media (max-width: 1023px) and (max-height: 560px) {
  .fmh-embed-stage {
    display: none !important;
  }
}

/* END Hero · Mobile App Preview Visibility */