/* OMSAG LP · Messe · 03 Masterclass
   Links das Thema in Ruhe, rechts die harten Fakten und die Gesichter dazu.
   Die Faktenkarte hebt sich bewusst ab — das ist, was man sich merken soll. */

.omsag-lp-mmc {
  --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);

  --blue: #93c0dc;
  --pratio: 4 / 5;

  position: relative; isolation: isolate; overflow: clip;
  font-family: var(--font); color: var(--ink);
  padding: clamp(72px, 8vw, 122px) 0; -webkit-font-smoothing: antialiased;
}
/* Aufbau wie im Heroshot Variante 1: links bleibt die Flaeche weiss, rechts
   steht ein Farbfeld, das nach links weich ins Weiss auslaeuft. Darueber die
   schwebende Glasflaeche und ein Schimmer unten rechts.
   Farben angepasst: das Blau laeuft heller Richtung unserem Hellblau, der
   Schimmer von Gruen nach Lime. */
.omsag-lp-mmc--bg-soft  { background: #fff; }
.omsag-lp-mmc--bg-alt   { background: var(--bga); }
.omsag-lp-mmc--bg-white { background: #fff; }

.omsag-lp-mmc__bg {
  /* Breiter als im Heroshot: das Blau soll bis hinter die Textspalte reichen. */
  position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 76%;
  pointer-events: none;
}
.omsag-lp-mmc--bg-alt .omsag-lp-mmc__bg,
.omsag-lp-mmc--bg-white .omsag-lp-mmc__bg { display: none; }

/* Ebene 1 — das Farbfeld. */
.omsag-lp-mmc__bg-field {
  position: absolute; inset: 0; display: block;
  background: linear-gradient(140deg, #f3f8fc 0%, #dcebf4 46%, #bcd8e8 100%);
  /* Langer, weicher Auslauf nach links — hinter dem Text liegt nur ein Hauch,
     zur rechten Seite hin wird daraus die volle Flaeche. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.2) 14%, rgba(0,0,0,.58) 40%, #000 68%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.2) 14%, rgba(0,0,0,.58) 40%, #000 68%);
}
/* Ebene 2 — die schwebende Glasflaeche oben rechts. */
.omsag-lp-mmc__bg-pane {
  position: absolute; display: block;
  top: -14%; right: -8%; width: 32%; aspect-ratio: 1 / 1.5;
  border-radius: 30px; transform: rotate(-24deg);
  background: linear-gradient(150deg, rgba(255,255,255,.3), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: .85;
}
/* Der Schimmer unten rechts — jetzt in Lime statt in Gruen. */
.omsag-lp-mmc__bg-glow {
  position: absolute; display: block;
  right: -8%; bottom: -12%; width: 54%; aspect-ratio: 1;
  border-radius: 50%; filter: blur(76px); opacity: .46;
  background: radial-gradient(circle, rgba(170,211,55,.9), rgba(170,211,55,.3) 55%, transparent 70%);
}
.omsag-lp-mmc, .omsag-lp-mmc *, .omsag-lp-mmc *::before, .omsag-lp-mmc *::after { box-sizing: border-box; }
.omsag-lp-mmc :is(h2,h3,p,li,span,strong,em,b) { overflow-wrap: break-word; }

.omsag-lp-mmc__container {
  width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(32px, 4.4vw, 68px); align-items: start;
}

/* ── Links: Thema ───────────────────────────────────────────────────────── */
.omsag-lp-mmc__copy { min-width: 0; }
.omsag-lp-mmc__overline {
  display: block; margin: 0 0 18px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bt);
}
.omsag-lp-mmc__headline {
  margin: 0 0 22px; font-size: clamp(26px, 3.2vw, 40px); font-weight: 700;
  line-height: 1.12; letter-spacing: -.028em; color: var(--ink); text-wrap: pretty;
}
.omsag-lp-mmc__headline em {
  font-style: normal; background: linear-gradient(100deg, var(--b), var(--bl));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.omsag-lp-mmc__body { margin: 0 0 30px; max-width: 60ch; }
.omsag-lp-mmc__body p { margin: 0; font-size: clamp(15.5px, 1.25vw, 17.5px); line-height: 1.68; color: var(--ts); }
.omsag-lp-mmc__body strong { color: var(--ink); font-weight: 700; }

.omsag-lp-mmc__cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px;
  border: 0; border-radius: var(--omsag-lp-pill, 999px);
  background: var(--ink); color: #fff;
  font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; box-shadow: none;
  transition: transform .25s var(--ez), box-shadow .25s var(--ez), color .2s var(--ez);
}
.omsag-lp-mmc__cta svg { width: 18px; height: 18px; transition: transform .25s var(--ez); }
.omsag-lp-mmc__cta:hover, .omsag-lp-mmc__cta:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(35,39,48,.45); }
.omsag-lp-mmc__cta:hover svg { transform: translateX(4px); }
/* Beim Fremdverweis passt das Wandern nach rechts nicht — das Zeichen zeigt
   nach schraeg oben, also geht es auch dorthin. */
.omsag-lp-mmc__cta.is-extern:hover svg { transform: translate(2px, -2px); }

/* ── Rechts: Eckdaten ───────────────────────────────────────────────────── */
.omsag-lp-mmc__side { min-width: 0; display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 22px); }

.omsag-lp-mmc__facts {
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--ln); border-radius: var(--omsag-lp-radius-lg, 24px);
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 26px 56px -44px rgba(15,17,21,.6);
}
.omsag-lp-mmc__facts-title {
  margin: 0 0 18px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ts);
}
.omsag-lp-mmc__fact-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.omsag-lp-mmc__fact { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 15px; align-items: center; }
.omsag-lp-mmc__fact-ico {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  border-radius: 50%; background: rgba(80,170,60,.10); color: var(--b);
}
.omsag-lp-mmc__fact-ico svg { width: 22px; height: 22px; display: block; }
.omsag-lp-mmc__fact-txt { font-size: 16px; font-weight: 600; line-height: 1.45; letter-spacing: -.012em; color: var(--ink); }

/* ── Rechts: Referentinnen und Referenten ───────────────────────────────── */
.omsag-lp-mmc__speakers-title {
  margin: 6px 0 -4px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mut);
}
.omsag-lp-mmc__speakers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.omsag-lp-mmc__speakers[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.omsag-lp-mmc__speakers[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.omsag-lp-mmc__speaker {
  margin: 0; min-width: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  padding: 14px 14px 18px; border: 1px solid var(--ln); border-radius: var(--omsag-lp-radius, 20px);
  background: #fff;
  box-shadow: 0 1px 0 rgba(15,17,21,.02), 0 18px 40px -34px rgba(15,17,21,.45);
  transition: transform .3s var(--ez), border-color .3s var(--ez), box-shadow .3s var(--ez);
}
.omsag-lp-mmc__speaker:hover {
  transform: translateY(-3px); border-color: rgba(80,170,60,.32);
  box-shadow: 0 24px 48px -34px rgba(15,17,21,.45);
}
/* Die Bildflaeche traegt die Kapsel — deshalb relativ und mit eigenen Ecken,
   damit das Kennzeichen unten rechts sitzen kann, ohne herauszuragen. */
.omsag-lp-mmc__shot { position: relative; display: block; border-radius: 12px; overflow: hidden; }
/* Ein Portraet traegt mehr, wenn man das Gesicht auch sieht: volle Kartenbreite,
   leicht hochkant, nur die Ecken gerundet. */
.omsag-lp-mmc__portrait {
  width: 100%; height: auto; aspect-ratio: var(--pratio); flex: none;
  border-radius: 12px; object-fit: cover; object-position: center 22%;
  display: block; background: var(--bga);
}
.omsag-lp-mmc__portrait--empty {
  display: grid; place-items: center;
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.02em; color: var(--b);
  background: rgba(80,170,60,.10);
}
/* ── Kennzeichen im Bild ────────────────────────────────────────────────── */
/* Milchglas statt einer festen Farbe — dieselbe Machart wie in der
   Kontaktsektion, damit beide Stellen gleich aussehen. */
.omsag-lp-mmc__tag {
  position: absolute; z-index: 2; right: 10px; bottom: 10px;
  display: inline-flex; align-items: center;
  max-width: calc(100% - 20px);
  padding: 6px 11px;
  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: 10.5px; 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-mmc__tag { background: rgba(255,255,255,.92); }
}

.omsag-lp-mmc__speaker-body { display: block; min-width: 0; padding: 0 4px; }
/* Name links, LinkedIn rechts — der Name darf umbrechen, das Zeichen nicht
   schrumpfen. Es sitzt oben buendig zur ersten Zeile des Namens. */
.omsag-lp-mmc__speaker-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.omsag-lp-mmc__speaker-name { display: block; min-width: 0; font-size: clamp(16px, 1.35vw, 18px); font-weight: 700; letter-spacing: -.018em; line-height: 1.25; color: var(--ink); }
.omsag-lp-mmc__speaker-li {
  position: relative;
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: -2px -2px 0 0;
  border-radius: 8px; text-decoration: none;
  /* Schon im Ruhezustand im Hausblau von LinkedIn — grau sah aus, als waere
     es abgeschaltet. Beim Ueberfahren fuellt sich die Flaeche satt aus. */
  color: #0a66c2; background: rgba(10,102,194,.11);
  transition: color .25s var(--ez), background .25s var(--ez), transform .25s var(--ez);
}
.omsag-lp-mmc__speaker-li svg { width: 17px; height: 17px; display: block; }
/* Sichtbar bleibt das Zeichen klein — antippen laesst es sich trotzdem
   bequem: die unsichtbare Flaeche darum misst 44 px in jede Richtung. */
.omsag-lp-mmc__speaker-li::after { content: ""; position: absolute; inset: -9px; }
.omsag-lp-mmc__speaker-li:hover,
.omsag-lp-mmc__speaker-li:focus-visible { color: #fff; background: #0a66c2; transform: translateY(-1px); }
.omsag-lp-mmc__speaker-li:focus-visible { outline: 2px solid var(--b); outline-offset: 2px; }
/* Position: die eigentliche Funktion im Haus, deshalb etwas kraeftiger als
   die Rolle darunter, die nur den Anlass benennt. */
.omsag-lp-mmc__speaker-title { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--ts); }

/* ── Auftritt ───────────────────────────────────────────────────────────── */
.omsag-lp-mmc.mmc-anim :is(.omsag-lp-mmc__overline, .omsag-lp-mmc__headline, .omsag-lp-mmc__body,
  .omsag-lp-mmc__cta, .omsag-lp-mmc__facts, .omsag-lp-mmc__speakers-title, .omsag-lp-mmc__speaker) { opacity: 0; transform: translateY(18px); }
.omsag-lp-mmc.is-in .omsag-lp-mmc__overline { animation: mmc-rise .6s var(--ez) .02s forwards; }
.omsag-lp-mmc.is-in .omsag-lp-mmc__headline { animation: mmc-rise .7s var(--ez) .1s forwards; }
.omsag-lp-mmc.is-in .omsag-lp-mmc__body     { animation: mmc-rise .7s var(--ez) .18s forwards; }
.omsag-lp-mmc.is-in .omsag-lp-mmc__cta      { animation: mmc-rise .7s var(--ez) .26s forwards; }
.omsag-lp-mmc.is-in .omsag-lp-mmc__facts    { animation: mmc-rise .75s var(--ez) .22s forwards; }
.omsag-lp-mmc.is-in .omsag-lp-mmc__speakers-title { animation: mmc-rise .7s var(--ez) .36s forwards; }
.omsag-lp-mmc.is-in .omsag-lp-mmc__speaker  { animation: mmc-rise .7s var(--ez) forwards; animation-delay: calc(.4s + var(--k) * .09s); }
@keyframes mmc-rise { to { opacity: 1; transform: none; } }

/* ── Breakpoints ────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .omsag-lp-mmc__container { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .omsag-lp-mmc__body { max-width: none; }
  /* Gestapelt gibt es kein Rechts mehr — das Feld legt sich unter die untere
     Haelfte, damit die Karten trotzdem auf Farbe stehen. */
  .omsag-lp-mmc__bg { top: auto; left: 0; width: 100%; height: 62%; }
  .omsag-lp-mmc__bg-field {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.55) 14%, #000 32%);
            mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.55) 14%, #000 32%);
  }
  .omsag-lp-mmc__bg-pane { display: none; }
  .omsag-lp-mmc__bg-glow { right: -22%; bottom: -34%; width: 82%; }
}
@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-mmc { padding: 46px 0; }
  .omsag-lp-mmc__container { padding: 0 20px; }
  .omsag-lp-mmc__facts { padding: 22px; border-radius: 20px; }
  .omsag-lp-mmc__fact { grid-template-columns: 42px minmax(0, 1fr); gap: 13px; }
  .omsag-lp-mmc__fact-ico { width: 42px; height: 42px; }
  .omsag-lp-mmc__fact-ico svg { width: 20px; height: 20px; }
  .omsag-lp-mmc__fact-txt { font-size: 15px; }
  /* Zwei Referenten stehen auf dem Handy noch nebeneinander — mehr nicht. */
  .omsag-lp-mmc__speakers[data-count="3"] { grid-template-columns: minmax(0, 1fr); }
  .omsag-lp-mmc__speaker { padding: 10px 10px 14px; gap: 11px; border-radius: 16px; }
  .omsag-lp-mmc__portrait { border-radius: 10px; }
  .omsag-lp-mmc__speaker-name { font-size: 15px; }
  .omsag-lp-mmc__speaker-title { font-size: 13px; }
  /* Kapsel in denselben Massen wie in der Kontaktsektion. Die Karte ist hier
     rund 20 px schmaler, deshalb rutscht "Referent der Masterclass" auf sehr
     schmalen Schirmen in eine zweite Zeile — abgeschnitten wird nichts. */
  .omsag-lp-mmc__tag {
    right: 8px; bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 5px 9px;
    font-size: 9px; line-height: 1.25; letter-spacing: .005em;
  }
  .omsag-lp-mmc__cta { width: 100%; justify-content: center; }
}
/* Frueher fielen die Referenten unter 380 px in eine Spalte. Das kostete
   gemessen 660 px Hoehe — bei 375 px war die Sektion 1983 statt 1299 px hoch,
   weil ein hochkantes Portraet ueber die volle Breite lief. Zwei Spalten
   bleiben deshalb bis ganz unten stehen; bei 320 px ist ein Portraet noch
   137 px breit und damit gross genug, um jemanden zu erkennen. */
@media (max-width: 380px) {
  .omsag-lp-mmc__speakers { gap: 10px; }
  .omsag-lp-mmc__speaker-name { font-size: 14.5px; }
  .omsag-lp-mmc__speaker-title { font-size: 12.5px; }
  .omsag-lp-mmc__speaker-li svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .omsag-lp-mmc * { animation: none !important; transition: none !important; }
  .omsag-lp-mmc.mmc-anim :is(.omsag-lp-mmc__overline, .omsag-lp-mmc__headline, .omsag-lp-mmc__body,
    .omsag-lp-mmc__cta, .omsag-lp-mmc__facts, .omsag-lp-mmc__speakers-title, .omsag-lp-mmc__speaker) { opacity: 1 !important; transform: none !important; }
}