/* exsos Design-System – Vor-Ort-Event-Landingpage (additiv)
   ════════════════════════════════════════════════════════════════
   Ergänzt exsos-event.css um die Bausteine, die nur Vor-Ort-Events
   brauchen: Veranstaltungsort mit Karte, Zusatztermin-Block
   (z. B. Rohbau-Besichtigung/Richtfest) und die Erwartungs-Kacheln.
   Styling für _includes/events/event-inperson-exsos.njk.

   Alles Übrige (Topbar, Hero, Formular-Karte, Agenda, Hosts, FAQ)
   kommt unverändert aus exsos-event.css – bitte dort nichts forken.
   ════════════════════════════════════════════════════════════════ */

/* ───────── „Das erwartet Sie" – Kachel-Grid mit Icon ───────── */
.lp-feat__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:clamp(1rem,2vw,1.5rem)}
.lp-feat{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);
  padding:clamp(1.3rem,2.2vw,1.7rem);box-shadow:var(--shadow)}
.lp-feat__icon{width:44px;height:44px;border-radius:12px;background:var(--green-soft);
  display:flex;align-items:center;justify-content:center;margin:0 0 1rem}
.lp-feat__icon svg{width:22px;height:22px;stroke:var(--green);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.lp-feat h3{font-size:1.12rem;color:var(--forest);margin:0 0 .5rem;line-height:1.25}
.lp-feat p{color:var(--muted);font-size:.96rem;line-height:1.6;margin:0}

/* ───────── Zusatztermin (Rohbau-Besichtigung / Richtfest) ─────────
   Bewusst als abgesetzte dunkle Karte: Das ist ein Angebot AN
   angemeldete Gäste, kein zweiter Einstieg in die Veranstaltung. */
.lp-side{position:relative;background:var(--forest);color:#eef5f0;border-radius:var(--radius);
  overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;gap:0;box-shadow:var(--shadow-lg)}
.lp-side__body{padding:clamp(1.6rem,3.4vw,2.8rem)}
.lp-side__flag{display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--forest);background:var(--mint);
  padding:.34rem .8rem;border-radius:999px;margin:0 0 1.1rem}
.lp-side__body h2{color:#f6efe2;font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.12;margin:0 0 .3rem}
.lp-side__time{color:var(--mint);font-weight:700;font-size:1.05rem;margin:0 0 1rem;
  font-variant-numeric:tabular-nums}
.lp-side__body p{color:#dfeae4;font-size:1rem;line-height:1.65;margin:0 0 1rem;max-width:56ch}
.lp-side__list{list-style:none;padding:0;margin:0 0 1.3rem;display:grid;gap:.55rem}
.lp-side__list li{position:relative;padding-left:1.6rem;color:#dfeae4;font-size:.97rem;line-height:1.5}
.lp-side__list li::before{content:"";position:absolute;left:0;top:.52em;width:8px;height:8px;
  border-radius:50%;background:var(--mint)}
.lp-side__note{display:flex;gap:.65rem;align-items:flex-start;border-top:1px solid rgba(255,255,255,.2);
  padding-top:1.1rem;margin:0;color:#cfe3d9;font-size:.88rem;line-height:1.55}
.lp-side__note svg{width:18px;height:18px;stroke:var(--mint);fill:none;stroke-width:1.8;flex:none;
  margin-top:.15rem}
.lp-side__media{position:relative;min-height:260px}
.lp-side__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){
  .lp-side{grid-template-columns:1fr}
  .lp-side__media{min-height:200px;order:-1}
}

/* ───────── Veranstaltungsort: Karte + Details ───────── */
.lp-loc{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.4rem,3vw,2.4rem);
  align-items:stretch}
.lp-loc__map{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--hair);
  box-shadow:var(--shadow);min-height:340px;background:var(--tan)}
.lp-loc__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.lp-loc__mapnote{font-size:.78rem;color:var(--muted);margin:.6rem 0 0;line-height:1.5}
.lp-loc__details{display:grid;gap:1rem;align-content:start}
.lp-loc__item{display:flex;gap:.9rem;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--radius);padding:1.1rem 1.2rem}
.lp-loc__item svg{width:20px;height:20px;stroke:var(--green);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:.15rem}
.lp-loc__label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .3rem}
.lp-loc__value{color:var(--ink);font-size:.98rem;line-height:1.55;margin:0}
.lp-loc__value small{color:var(--muted);font-size:.86rem}
.lp-loc__value a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
@media (max-width:860px){
  .lp-loc{grid-template-columns:1fr}
  .lp-loc__map{min-height:260px}
}

/* ───────── Kompakter Termin-Streifen unter dem Hero ───────── */
.lp-atglance{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--radius);
  overflow:hidden}
.lp-atglance__cell{background:var(--surface);padding:1.1rem 1.2rem}
.lp-atglance__k{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .35rem}
.lp-atglance__v{color:var(--forest);font-weight:700;font-size:1.02rem;line-height:1.35;margin:0}
.lp-atglance__v small{display:block;font-weight:500;color:var(--muted);font-size:.85rem;margin-top:.15rem}

/* ───────── Referenten: Vor-Ort-Events haben oft 3 statt 2 Gastgeber ─────────
   exsos-event.css setzt für Online-Webinare fest zwei Spalten (Moderator +
   Experte). Bei drei Referenten ergäbe das eine 2+1-Treppe – deshalb hier
   auf ein flexibles Raster umgestellt.
   ACHTUNG Kaskade: Diese Datei wird NACH exsos-event.css geladen, gleiche
   Spezifität → sie überschreibt auch deren Mobile-Regel (1 Spalte ≤ 900px).
   Das ist gewollt: auto-fit mit minmax(260px,…) klappt von selbst auf eine
   Spalte um, sobald der Container schmaler als ~540px wird. */
.lp-hosts__grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-width:1040px;
  margin-inline:auto}

/* ───────── Referenten ohne Foto: Initialen-Kreis ─────────
   Haelt die Karten auf gleicher Hoehe, solange ein Portraet fehlt. */
.lp-host__photo--empty{display:flex;align-items:center;justify-content:center;
  background:var(--green-soft)}
.lp-host__initials{font-weight:700;font-size:2.1rem;line-height:1;color:var(--green-deep);
  letter-spacing:.02em}

/* ───────── Bildunterschrift im Zusatztermin-Panel ─────────
   Fuer Bildnachweise, die sichtbar sein muessen (z. B. Foto eines
   baugleichen Objekts an einem anderen Standort). */
.lp-side__caption{position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:2.6rem .9rem .8rem;font-size:.76rem;line-height:1.45;color:#f2f8f4;
  text-shadow:0 1px 3px rgba(0,20,19,.6);
  background:linear-gradient(to top,rgba(0,32,31,.94) 0%,rgba(0,32,31,.82) 40%,
    rgba(0,32,31,.45) 72%,rgba(0,32,31,0) 100%)}