/* OMSAG LP · Messe · 06 Team
   Personenkarten mit eigenem Terminknopf. Der Knopf im Kartenfuss legt seinen
   Schatten ueber die ganze Karte — deshalb loest jeder Klick auf der Karte den
   Termin dieser Person aus, ohne dass Name und Rolle in einem Knopf stecken. */

.omsag-lp-mteam {
  --b:    var(--omsag-lp-brand, #50aa3c);
  /* Kicker und Zaehler tragen den Markenton. Auf Weiss sind das 2,9:1 —
     unter der Schwelle fuer kleine Schrift, aber es ist die Hausfarbe. */
  --bt:   var(--omsag-lp-brand, #50aa3c);
  --bl:   var(--omsag-lp-lime, #aad337);
  --ink:  var(--omsag-lp-ink, #232730);
  --ts:   var(--omsag-lp-text-soft, #5a6270);
  --mut:  var(--omsag-lp-muted, #8a93a3);
  --ln:   var(--omsag-lp-line, #e6e8ec);
  --bga:  var(--omsag-lp-bg-alt, #f9faf8);
  --grad: var(--omsag-lp-brand-grad, linear-gradient(135deg, #50aa3c 0%, #aad337 100%));
  --ez:   var(--omsag-lp-ease, cubic-bezier(.2,.7,.2,1));
  --font: var(--omsag-lp-font, 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);

  --cols: 4;
  --pratio: 1 / 1;

  position: relative; font-family: var(--font); color: var(--ink);
  padding: clamp(66px, 7.4vw, 112px) 0;
  -webkit-font-smoothing: antialiased;
}
.omsag-lp-mteam--bg-alt   { background: var(--bga); }
.omsag-lp-mteam--bg-white { background: #fff; }

.omsag-lp-mteam, .omsag-lp-mteam *, .omsag-lp-mteam *::before, .omsag-lp-mteam *::after { box-sizing: border-box; }
.omsag-lp-mteam :is(h2,h3,p,li,span,strong,em,b) { overflow-wrap: break-word; }

.omsag-lp-mteam__container { position: relative; z-index: 1; width: 100%; max-width: 1450px; margin: 0 auto; padding: 0 28px; }

/* ── Kopf ───────────────────────────────────────────────────────────────── */
.omsag-lp-mteam__head { max-width: 800px; margin: 0 0 clamp(30px, 3.4vw, 46px); }
.omsag-lp-mteam--head-center .omsag-lp-mteam__head { margin-left: auto; margin-right: auto; text-align: center; }
.omsag-lp-mteam__overline {
  display: block; margin: 0 0 16px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bt);
}
.omsag-lp-mteam__headline {
  margin: 0; font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: -.03em;
}
/* Der Umbruch in der Headline gilt fuer die breite Ansicht. Auf schmalen
   Schirmen bricht die Zeile ohnehin — dort wuerde er nur ein einzelnes Wort
   stehen lassen. */
.omsag-lp-mteam__headline br { display: inline; }
.omsag-lp-mteam__headline em {
  font-style: normal; background: linear-gradient(100deg, var(--b), var(--bl));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.omsag-lp-mteam__lead {
  margin: 16px 0 0; max-width: 58ch;
  font-size: clamp(15.5px, 1.25vw, 17px); line-height: 1.6; color: var(--ts);
}
.omsag-lp-mteam--head-center .omsag-lp-mteam__lead { margin-left: auto; margin-right: auto; }

/* ── Karten ─────────────────────────────────────────────────────────────── */
.omsag-lp-mteam__grid {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}
.omsag-lp-mteam__card {
  position: relative; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--ln); border-radius: var(--omsag-lp-radius, 20px);
  background: #fff;
  box-shadow: 0 22px 46px -42px rgba(15,17,21,.5);
  transition: transform .3s var(--ez), border-color .3s var(--ez), box-shadow .3s var(--ez);
}
.omsag-lp-mteam__card.is-bookable:hover {
  transform: translateY(-4px); border-color: rgba(80,170,60,.36);
  box-shadow: 0 30px 58px -34px rgba(15,17,21,.4);
}

/* Portraet */
.omsag-lp-mteam__photo {
  position: relative; overflow: hidden;
  aspect-ratio: var(--pratio); background: #ececed;
}
.omsag-lp-mteam__photo img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 18%;
  /* Langsam und mit weicher Kurve — ein kurzer Zoom wirkt hektisch. */
  transform: scale(1.004);
  transition: transform 1.1s cubic-bezier(.16,.84,.24,1);
}
.omsag-lp-mteam__card.is-bookable:hover .omsag-lp-mteam__photo img { transform: scale(1.055); }
.omsag-lp-mteam__photo-empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -.02em; color: #6d7480;
}

.omsag-lp-mteam__body {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px;
  padding: clamp(15px, 1.5vw, 19px) clamp(15px, 1.5vw, 19px) clamp(14px, 1.4vw, 17px);
}
.omsag-lp-mteam__name { font-size: clamp(16px, 1.25vw, 17.5px); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.omsag-lp-mteam__role { font-size: 14px; line-height: 1.45; color: var(--ts); }
/* ── Kennzeichen im Bild ────────────────────────────────────────────────── */
/* Milchglas statt einer festen Farbe: die Portraets sind mal hell, mal
   dunkel — eine durchscheinende Kapsel traegt auf beidem. */
.omsag-lp-mteam__tag {
  position: absolute; z-index: 2; right: 10px; bottom: 10px;
  display: inline-flex; align-items: center;
  max-width: calc(100% - 20px);
  padding: 7px 13px;
  border-radius: var(--omsag-lp-pill, 999px);
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
          backdrop-filter: blur(12px) saturate(1.4);
  color: var(--ink);
  font-size: 12px; font-weight: 600; line-height: 1.25; letter-spacing: -.004em;
  box-shadow: 0 10px 26px -16px rgba(15,17,21,.8);
  pointer-events: none;
}
/* Kann der Browser kein Milchglas, wird die Kapsel deckend — sonst stuende
   der Text auf einem hellen Portraet fast im Nichts. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .omsag-lp-mteam__tag { background: rgba(255,255,255,.92); }
}

/* ── Terminknopf ────────────────────────────────────────────────────────── */
.omsag-lp-mteam__book {
  /* Der Knopf ist mal ein <button> (Terminfenster), mal ein <a> (eigener
     Verweis, etwa eine E-Mail-Adresse). Damit beide gleich aussehen, wird die
     Unterstreichung des Verweises hier abgeraeumt. */
  text-decoration: none;
  position: static; /* der Schatten unten uebernimmt die Flaeche */
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin: 0; padding: 13px clamp(15px, 1.5vw, 19px);
  border: 0; border-top: 1px solid var(--ln); border-radius: 0;
  background: transparent; color: var(--ink);
  font-family: var(--font); font-size: 14.5px; font-weight: 600; line-height: 1.2; text-align: left;
  cursor: pointer;
  transition: background .25s var(--ez), color .25s var(--ez);
}
/* Der ganze Kasten ist die Schaltflaeche. */
.omsag-lp-mteam__book::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.omsag-lp-mteam__book-ico { flex: none; display: inline-flex; color: var(--b); }
.omsag-lp-mteam__book-ico svg { width: 17px; height: 17px; display: block; }
.omsag-lp-mteam__book-txt { flex: 1 1 auto; min-width: 0; }
.omsag-lp-mteam__book-arrow { flex: none; display: inline-flex; transition: transform .3s var(--ez); }
.omsag-lp-mteam__book-arrow svg { width: 17px; height: 17px; display: block; }
/* Nur fuer Vorlesegeraete — sonst steht viermal derselbe Knopftext im Raum. */
.omsag-lp-mteam__book-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.omsag-lp-mteam__card:hover .omsag-lp-mteam__book { background: rgba(80,170,60,.07); }
.omsag-lp-mteam__card:hover .omsag-lp-mteam__book-arrow { transform: translateX(4px); }
.omsag-lp-mteam__book:focus-visible { outline: 2px solid var(--b); outline-offset: -2px; }

/* ── Knopf unter dem Raster ─────────────────────────────────────────────── */
.omsag-lp-mteam__cta-row { display: flex; justify-content: center; margin-top: clamp(30px, 3.4vw, 46px); }
.omsag-lp-mteam__cta {
  position: relative; z-index: 0; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border: 0; border-radius: var(--omsag-lp-pill, 999px);
  background: var(--ink); color: #fff;
  font-family: var(--font); font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--ez), box-shadow .25s var(--ez);
}
.omsag-lp-mteam__cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad); opacity: 0; transition: opacity .3s var(--ez);
}
.omsag-lp-mteam__cta svg { width: 19px; height: 19px; display: block; transition: transform .3s var(--ez); }
.omsag-lp-mteam__cta:hover, .omsag-lp-mteam__cta:focus-visible {
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 18px 44px -18px rgba(80,170,60,.5);
}
.omsag-lp-mteam__cta:hover::before { opacity: 1; }
.omsag-lp-mteam__cta:hover svg { transform: translateX(4px); }

/* ── Fenster mit dem Kalender ───────────────────────────────────────────── */
.omsag-lp-mteam__dialog {
  width: min(940px, calc(100vw - 32px)); max-width: none;
  max-height: calc(100vh - 40px); padding: 0; border: 0;
  border-radius: var(--omsag-lp-radius-lg, 24px); background: #fff; color: var(--ink);
  box-shadow: 0 50px 120px -40px rgba(15,17,21,.6);
  font-family: var(--font);
}
.omsag-lp-mteam__dialog::backdrop { background: rgba(16,20,26,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.omsag-lp-mteam__dialog[open] { animation: mteam-dlg .4s var(--ez) both; }
@keyframes mteam-dlg { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.omsag-lp-mteam__dialog-shell { position: relative; display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
.omsag-lp-mteam__dialog-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(26px, 3vw, 36px); }
.omsag-lp-mteam__dialog-close {
  position: absolute; z-index: 3; top: 14px; right: 14px;
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--ln); border-radius: 50%; background: #fff; color: var(--ink);
  cursor: pointer; transition: border-color .25s var(--ez), transform .25s var(--ez);
}
.omsag-lp-mteam__dialog-close svg { width: 19px; height: 19px; display: block; }
.omsag-lp-mteam__dialog-close:hover { border-color: var(--ink); transform: rotate(90deg); }

.omsag-lp-mteam__view[hidden] { display: none; }
.omsag-lp-mteam__view-kicker {
  margin: 0 0 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bt);
}
.omsag-lp-mteam__view-title { margin: 0; padding-right: 44px; font-size: clamp(21px, 2.2vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.18; }
.omsag-lp-mteam__view-text { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ts); }
.omsag-lp-mteam__view-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--mut); }

/* Der Kalender kommt als eigenes Fenster von HubSpot — er bringt seine eigene
   Hoehe mit, braucht aber einen Platzhalter, damit das Fenster beim Oeffnen
   nicht erst zusammenfaellt und dann aufspringt. */
.omsag-lp-mteam__slot { margin-top: 18px; min-height: 560px; }
.omsag-lp-mteam__slot.is-plain { min-height: 0; }
.omsag-lp-mteam__slot iframe { width: 100% !important; border: 0; display: block; }
.omsag-lp-mteam__slot .meetings-iframe-container { width: 100%; }
.omsag-lp-mteam__wait { margin: 0; padding: 22px 0; font-size: 14.5px; color: var(--mut); }

body.omsag-mteam-open { overflow: hidden; }

/* ── Auftritt ───────────────────────────────────────────────────────────── */
.omsag-lp-mteam.mteam-anim :is(.omsag-lp-mteam__overline, .omsag-lp-mteam__headline, .omsag-lp-mteam__lead, .omsag-lp-mteam__card, .omsag-lp-mteam__cta-row) {
  opacity: 0; transform: translateY(18px);
}
.omsag-lp-mteam.is-in .omsag-lp-mteam__overline { animation: mteam-rise .6s var(--ez) .02s forwards; }
.omsag-lp-mteam.is-in .omsag-lp-mteam__headline { animation: mteam-rise .7s var(--ez) .1s forwards; }
.omsag-lp-mteam.is-in .omsag-lp-mteam__lead     { animation: mteam-rise .7s var(--ez) .16s forwards; }
.omsag-lp-mteam.is-in .omsag-lp-mteam__card     { animation: mteam-rise .7s var(--ez) calc(.2s + var(--k, 0) * .07s) forwards; }
.omsag-lp-mteam.is-in .omsag-lp-mteam__cta-row  { animation: mteam-rise .7s var(--ez) .5s forwards; }
@keyframes mteam-rise { to { opacity: 1; transform: none; } }

/* ── Breakpoints ────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .omsag-lp-mteam__grid { grid-template-columns: repeat(min(var(--cols), 3), minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .omsag-lp-mteam__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .omsag-lp-mteam__container { padding: 0 20px; }
}
@media (max-width: 600px) {
  /* Enger als auf dem Desktop: 60 px Luft ueber und unter jeder Sektion
     summieren sich auf dem Handy ueber sieben Sektionen zu 840 px. */
  .omsag-lp-mteam { padding: 46px 0; }
  .omsag-lp-mteam__head { margin-bottom: 22px; }
}
@media (max-width: 700px) {
  .omsag-lp-mteam__headline br { display: none; }
}
/* Zwei Spalten bleiben bis zur kleinsten Breite stehen. Untereinander kosten
   vier Karten 1.735 px — nebeneinander sind es rund 640 px, und ein Portraet
   ist bei 320 px Fensterbreite immer noch 133 px breit. */
@media (max-width: 620px) {
  .omsag-lp-mteam__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .omsag-lp-mteam__body { gap: 3px; padding: 12px 13px 10px; }
  .omsag-lp-mteam__name { font-size: 15px; }
  .omsag-lp-mteam__role { font-size: 13px; line-height: 1.35; }
  /* Das Kalendersymbol faellt weg — der Platz gehoert dem Text, damit
     "Termin vereinbaren" in einer Zeile bleibt. Der Pfeil rechts sagt
     ohnehin schon, dass sich hier etwas oeffnet. */
  /* Eng gerechnet, damit Text und Pfeil in eine Zeile passen: bei 390 px
     bleiben nach Rand und Pfeil 128 px, "Termin vereinbaren" braucht bei
     11,5 px rund 126. Outfit laeuft schmaler als die Ersatzschrift, live ist
     also noch etwas Luft. */
  .omsag-lp-mteam__book {
    padding: 12px 10px; gap: 4px;
    font-size: clamp(11.5px, 2.95vw, 12.5px);
  }
  .omsag-lp-mteam__book-ico { display: none; }
  .omsag-lp-mteam__book-txt { overflow: hidden; text-overflow: ellipsis; }
  .omsag-lp-mteam__book-arrow svg { width: 15px; height: 15px; }
}
/* Der Pfeil bleibt stehen. Damit er nicht irgendwann den Text abschneidet,
   bricht die Beschriftung im Zweifel lieber um — abgeschnittene Woerter mit
   Puenktchen sehen nach Fehler aus, zwei Zeilen nicht. */
@media (max-width: 620px) {
  .omsag-lp-mteam__book { justify-content: flex-start; white-space: normal; }
  .omsag-lp-mteam__book-txt { overflow: visible; text-overflow: clip; }
  /* Kapsel rechts unten wie auf dem Desktop, nur eine Stufe kleiner: in einer
     166 px breiten Karte bleiben nach Abzug der Raender 150 px, und damit
     kommt "Referent der Masterclass" bei 11 px samt Symbol auf rund 144 px.
     Wird es doch enger, laeuft die Kapsel in eine zweite Zeile statt den Text
     abzuschneiden. */
  .omsag-lp-mteam__tag {
    right: 8px; bottom: 8px;
    max-width: calc(100% - 16px);
    /* Zwei Punkt kleiner als vorher — damit passt "Referent der Masterclass"
       in der schmalen Karte in eine Zeile: gemessen braucht der Text bei 9 px
       rund 128 px, die Kapsel gibt bei 390 px Fensterbreite 135 her. */
    padding: 5px 9px;
    font-size: 9px; line-height: 1.25; letter-spacing: .005em;
  }
  .omsag-lp-mteam__cta { width: 100%; justify-content: center; }
}
@media (max-width: 380px) {
  .omsag-lp-mteam__grid { gap: 10px; }
  .omsag-lp-mteam__name { font-size: 14px; }
  .omsag-lp-mteam__role { font-size: 12.5px; }
  .omsag-lp-mteam__book { padding: 11px 10px; }
}
/* Ab hier reicht die Kartenbreite fuer eine Zeile nicht mehr: gemessen
   braucht der Text 126 px und hat 113. Lieber zwei Zeilen als Schrift, die
   man nicht mehr lesen kann — oder ein Wort, das mitten abgeschnitten ist. */
/* Unter 380 px reicht die Kartenbreite fuer Text und Pfeil nicht mehr —
   dort faellt der Pfeil weg, die ganze Karte bleibt ja klickbar. */
@media (max-width: 379px) {
  .omsag-lp-mteam__book-arrow { display: none; }
  .omsag-lp-mteam__book { line-height: 1.25; }
}
@media (max-width: 640px) {
  .omsag-lp-mteam__dialog { width: calc(100vw - 16px); border-radius: 18px; }

  /* ── Nur eine Flaeche darf scrollen ─────────────────────────────────────
     Der Kalender von HubSpot steckt in einem eigenen Fenster (iframe) mit
     eigenem Scrollbalken. Lag darum noch unser scrollender Kasten, gab es
     zwei ineinander — man wusste nie, was sich gerade bewegt.

     Deshalb wird das Fenster auf dem Handy zu einer Flaeche fester Hoehe:
     Ansage oben bleibt stehen, der Kalender bekommt den Rest und ist das
     einzige, was scrollt. Bewusst der Kalender und nicht unser Kasten — wie
     hoch seine Seite ist, weiss nur HubSpot. Meldet er zu wenig, waere bei
     scrollendem Aussenkasten das Ende des Formulars nicht erreichbar; so
     kommt man immer ueberall hin. */
  /* Volle Hoehe nur, wenn auch ein Kalender darin steckt — ohne ihn (etwa
     wenn ein Cookie-Banner ihn blockt) waere ein bildschirmhohes Fenster mit
     drei Zeilen Text absurd. Die Klasse setzt das Skript beim Einbauen. */
  .omsag-lp-mteam__dialog.is-embed,
  .omsag-lp-mteam__dialog.is-embed .omsag-lp-mteam__dialog-shell {
    height: calc(100dvh - 16px); max-height: calc(100dvh - 16px);
  }
  .omsag-lp-mteam__dialog:not(.is-embed) { max-height: calc(100dvh - 16px); }
  .omsag-lp-mteam__dialog.is-embed .omsag-lp-mteam__dialog-scroll {
    /* Der Kasten ist ein Kind des Rahmens und muss dessen freie Hoehe
       einnehmen — ohne flex:1 waere er nur so hoch wie sein Inhalt, und der
       Kalender bekaeme davon nur einen Rest ab. */
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    overflow: hidden;               /* der Aussenkasten scrollt nicht mehr */
    padding: 22px 16px 16px;
  }
  .omsag-lp-mteam__dialog.is-embed .omsag-lp-mteam__view:not([hidden]) {
    display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto;
  }
  .omsag-lp-mteam__dialog.is-embed .omsag-lp-mteam__slot {
    flex: 1 1 auto; min-height: 0; margin-top: 14px;
    overflow: hidden; overscroll-behavior: contain;
  }
  .omsag-lp-mteam__slot .meetings-iframe-container { height: 100%; }
  /* Schlaegt die Hoehenmeldung von HubSpot durch, wird sie hier ueberstimmt:
     eine Angabe im Stylesheet mit !important sticht den inline gesetzten
     Wert. */
  .omsag-lp-mteam__slot iframe { height: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .omsag-lp-mteam *, .omsag-lp-mteam__dialog { animation: none !important; transition: none !important; }
  .omsag-lp-mteam.mteam-anim :is(.omsag-lp-mteam__overline, .omsag-lp-mteam__headline, .omsag-lp-mteam__lead, .omsag-lp-mteam__card, .omsag-lp-mteam__cta-row) {
    opacity: 1 !important; transform: none !important;
  }
}