/* GENERIERT aus Massnahmen/Galerie-Seite/theme-build/lc-ig-galerie.src.css
   mit build_css.py. Nicht von Hand ändern: rem-Werte stehen hier als
   calc(Xrem * var(--lc-r, 1.6)), weil html live 62.5 % hat (1rem = 10px). */
/* ==========================================================================
   Instagram-Galerie (LER-53, Richtung D «Reels laufen»)
   QUELLE. Das Theme-File css/lc-ig-galerie.css wird daraus generiert:
     python build_css.py
   Der Generator macht aus jeder rem-Angabe calc(Xrem * var(--lc-r, 1.6)), weil
   lerncenter.ch html auf 62.5 % setzt (calc(1rem * var(--lc-r, 1.6)) = 10px, style.css). Werte hier also
   in «echten» rem (16px) schreiben und das generierte File nie von Hand ändern.
   Vorlage (abgenommen): galerie-richtung-d-v2.html. Markup: inc/instagram-galerie.php.
   Alle Regeln unter .lc-gal (plus zwei Umfeld-Regeln, begründet), ungelayert,
   damit das ebenfalls ungelayerte Theme-CSS nicht gewinnt.
   ========================================================================== */

/* ===== Umfeld ===== */
/* .entry-content hat overflow:hidden (style.css). Das macht es zum Scroll-Container,
   und die Themen-Leiste klebt nicht mehr. clip schneidet gleich, ohne Scroll-Container.
   Die Klasse lc-gal-page setzt PHP nur auf Seiten mit dem Shortcode. */
.lc-gal-page .entry-content { overflow: clip; }
/* Einrasten erst, wenn der Feed erreicht ist (Klasse setzt das JS), sonst springt
   die Seite beim Laden auf den ersten Slot. */
html.lc-gal-snap { scroll-snap-type: y proximity; }
/* Beim Filtern nur die benannten Slots animieren, nicht die ganze Seite
   (der Browser gibt html sonst den Übergangsnamen «root»).
   Bootscore (main.css) setzt html{scroll-padding-top:55px} für eine 55px-Navbar; das
   addiert sich zum Header-Abstand der Slots (scroll-margin-top, schrumpft mit dem
   Header). Gemessen: Deep-Link landete 55px zu tief. */
:root:has(.lc-gal) { view-transition-name: none; scroll-padding-top: 0; }

/* ===== Tokens: Brandkit-Werte als Fallback, bis tokens.css live geladen wird (LER-103) ===== */
.lc-gal {
  --lc-gal-primary-50: var(--lc-primary-50, #f0fcfb);
  --lc-gal-primary-100: var(--lc-primary-100, #dff6f3);
  --lc-gal-primary-200: var(--lc-primary-200, #c0efe9);
  --lc-gal-primary-500: var(--lc-primary-500, #2fcac1);
  --lc-gal-primary-600: var(--lc-primary-600, #22bcad);
  --lc-gal-primary-800: var(--lc-primary-800, #167f76);
  --lc-gal-primary-900: var(--lc-primary-900, #12655e);
  --lc-gal-cta-500: var(--lc-cta-500, #ffba40);
  --lc-gal-cta-700: var(--lc-cta-700, #f5a623);
  --lc-gal-cta-100: var(--lc-cta-100, #fff3d6);
  --lc-gal-sand: #fdf3e7; /* Team-Sand, live gemessen; in tokens.css v0.2 fällig (Produktionsregel 6) */
  --lc-gal-ink: var(--lc-ink, #111827);
  --lc-gal-gray-600: var(--lc-gray-600, #4b5563);
  --lc-gal-gray-500: var(--lc-gray-500, #6b7280);
  --lc-gal-gray-300: var(--lc-gray-300, #d1d5db);
  --lc-gal-gray-200: var(--lc-gray-200, #e5e7eb);
  --lc-gal-white: var(--lc-white, #fff);
  --lc-gal-font: var(--lc-font, 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
  --lc-gal-radius-pill: var(--lc-radius-pill, 9999px);
  --lc-gal-shadow-md: var(--lc-shadow-md, 0 4px 16px rgba(17, 24, 39, .10));
  --lc-gal-shadow-lg: var(--lc-shadow-lg, 0 8px 30px rgba(17, 24, 39, .12));
  --lc-gal-ease-out: var(--lc-ease-out, cubic-bezier(.16, 1, .3, 1));
  /* Fokus wie .lc-scope (lc-components §1); Hover-Ton und Überlagerungen aus der Vorlage */
  --lc-gal-focus: var(--lc-cta-500, #ffba40);
  --lc-gal-primary-600-hover: #12857b;
  --lc-gal-scrim: rgba(17, 24, 39, .78);
  --lc-gal-glass: rgba(255, 255, 255, .92);
  /* Geometrie: Leiste und Unterkante des fixen Theme-Headers */
  --lc-gal-bar: calc(4rem * var(--lc-r, 1.6));
  --lc-gal-top: 0px; /* mobil scrollt der Header mit (style.css: .fixed-top position:initial) */

  font-family: var(--lc-gal-font);
  color: var(--lc-gal-gray-600);
  background: var(--lc-gal-white);
  line-height: 1.6;
  letter-spacing: normal; /* Theme: body letter-spacing .5px */
  -webkit-font-smoothing: antialiased;
}
/* Ab 768px ist der Header fix, seine Höhe steht im Theme in --pocket--toolbar-height
   (155px oben, 100px nach dem Scrollen: .site.shrink-header). */
@media (min-width: 768px) {
  .lc-gal { --lc-gal-top: var(--pocket--toolbar-height, 0px); }
}

/* ===== Theme neutralisieren (nur innerhalb der Galerie) ===== */
/* Resets mit Spezifität 0 (Produktionsregel 2). Gegen Theme-Elementregeln wie p{margin-bottom:calc(3rem * var(--lc-r, 1.6))},
   h2{padding-bottom:20px} und hyphens:auto setzt jede Textregel ihre Abstände selbst. */
:where(.lc-gal) :where(h1, h2, p) { margin: 0; padding: 0; hyphens: manual; }
:where(.lc-gal) img { display: block; max-width: 100%; }
.lc-gal [hidden] { display: none !important; }
/* Theme-Links (style.css: a:not(.btn):not(.card)…, Spezifität bis 0,6,2) färben beim Hover
   um und zeichnen per ::after eine Linie über den nächsten positionierten Vorfahren.
   :not(#lc-gal-x) hebt die Regel über das Theme; die Galerie-Links setzen Farbe, Unterstrich
   und Übergang über --lc-gal-c, --lc-gal-u und --lc-gal-t. */
.lc-gal a:not(#lc-gal-x) {
  color: var(--lc-gal-c, currentColor);
  text-decoration-line: var(--lc-gal-u, none);
  transition: var(--lc-gal-t, none);
}
.lc-gal a:not(#lc-gal-x)::after { content: none; }
.lc-gal .lc-gal__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lc-gal .lc-gal__ico { display: block; flex: none; }

/* ===== Buttons: gescopte Kopie von lc-btn (tokens.css + lc-components §2, Doktrin LER-89) =====
   voll Türkis = Standard (Anmelde-Slots), weisser Pill mit CTA-Rand = Beratungstermin (lc-btn--cal).
   Kein CTA-Gelb in der Galerie: der Header trägt «SchülerIn werden» (Kurator 29.09.2026). */
.lc-gal .lc-gal__pill, .lc-gal .lc-gal-btn {
  --lc-gal-t: background-color .15s, border-color .15s, transform .1s, box-shadow .3s;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 600 calc(1rem * var(--lc-r, 1.6))/1 var(--lc-gal-font);
  min-height: 44px; padding: 12px 24px; border: 2px solid transparent; border-radius: var(--lc-gal-radius-pill);
  cursor: pointer; white-space: nowrap;
}
.lc-gal .lc-gal__pill--primary { --lc-gal-c: var(--lc-gal-ink); background: var(--lc-gal-primary-500); border-color: var(--lc-gal-primary-500); }
.lc-gal .lc-gal__pill--primary:hover { background: var(--lc-gal-primary-600); border-color: var(--lc-gal-primary-600); transform: translateY(-2px); }
.lc-gal .lc-gal-btn { font-size: calc(1.125rem * var(--lc-r, 1.6)); padding: 16px 32px; } /* lc-btn--lg */
.lc-gal .lc-gal-btn--cal { --lc-gal-c: var(--lc-gal-ink); background: var(--lc-gal-white); border-color: var(--lc-gal-cta-500); }
.lc-gal .lc-gal-btn--cal:hover {
  background: var(--lc-gal-cta-100); transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(245, 166, 35, .4); /* cta-700 @ 40 %, wie tokens.css */
}
.lc-gal .lc-gal-btn .lc-gal__ico { width: 1.2em; height: 1.2em; }
.lc-gal .lc-gal__pill:active, .lc-gal .lc-gal-btn:active { transform: scale(.97); }
.lc-gal .lc-gal__pill:focus-visible, .lc-gal .lc-gal-btn:focus-visible { outline: 3px solid var(--lc-gal-focus); outline-offset: 3px; }

.lc-gal .lc-gal__wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; } /* wie lc-wrap der Library */

/* ===== Hero im Team-Stil (Variante B, Kurator-Abnahme 29.09.2026) =====
   Gescopte Kopien der Library bis LER-103: Display-Grösse (lc-display), Swoosh-Akzent
   (lc-hl--swoosh), Lead (lc-lead), Notizzettel wie auf /unser-team/. Neu ist der Foto-Fächer;
   er wird mit lc-gal in der Library registriert. */
.lc-gal .lc-gal-hero { background: var(--lc-gal-sand); padding: 44px 0 40px; }
.lc-gal .lc-gal-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.lc-gal .lc-gal-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font-size: calc(.85rem * var(--lc-r, 1.6)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lc-gal-primary-900); /* auf Sand 6,2:1 statt 4,4:1 */
}
.lc-gal .lc-gal-hero__eyebrow .lc-gal__ico { width: 16px; height: 16px; }
.lc-gal .lc-gal-hero__h1 {
  margin: 0; padding: 0; hyphens: manual; opacity: 1; /* style.css: h1 opacity .9, hyphens:auto */
  color: var(--lc-gal-ink); font-weight: 700; font-size: clamp(calc(2.35rem * var(--lc-r, 1.6)), calc(1.45rem * var(--lc-r, 1.6)) + 4.4vw, calc(4.5rem * var(--lc-r, 1.6))); line-height: 1.04; letter-spacing: -.028em;
}
.lc-gal .lc-gal-hero__accent { position: relative; display: inline-block; }
.lc-gal .lc-gal-hero__swoosh { position: absolute; left: -2%; bottom: -.14em; width: 104%; height: .32em; overflow: visible; }
.lc-gal .lc-gal-hero__swoosh path { stroke: var(--lc-gal-primary-600); }
.lc-gal .lc-gal-hero__lead {
  margin: 18px 0 0; max-width: 60ch; color: var(--lc-gal-gray-600); line-height: 1.65;
  font-size: clamp(calc(1.04rem * var(--lc-r, 1.6)), calc(.98rem * var(--lc-r, 1.6)) + .5vw, calc(1.22rem * var(--lc-r, 1.6)));
}
.lc-gal .lc-gal-hero__cta { margin-top: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.lc-gal .lc-gal-hero__note { font-size: calc(.875rem * var(--lc-r, 1.6)); color: var(--lc-gal-gray-600); } /* auf Sand 6,9:1 statt 4,4:1 */
.lc-gal .lc-gal-hero__media { position: relative; height: 330px; max-width: 460px; width: 100%; margin: 0 auto; }
.lc-gal .lc-gal-hero__card {
  position: absolute; width: 58%; aspect-ratio: 4 / 5; margin: 0; padding: 8px 8px 30px; background: #fff; border-radius: 12px;
  box-shadow: 0 20px 40px -18px rgba(17, 24, 39, .35), var(--lc-gal-shadow-md); overflow: hidden;
}
.lc-gal .lc-gal-hero__card img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.lc-gal .lc-gal-hero__card--1 { left: 0; top: 18px; transform: rotate(-7deg); }
.lc-gal .lc-gal-hero__card--2 { left: 22%; top: 0; transform: rotate(2deg); z-index: 1; }
.lc-gal .lc-gal-hero__card--3 { right: 0; top: 30px; transform: rotate(8deg); z-index: 2; }
.lc-gal .lc-gal-hero__sticker {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  background: var(--lc-gal-primary-50); border: 2px solid var(--lc-gal-primary-600); color: var(--lc-gal-primary-900);
  font-size: calc(.85rem * var(--lc-r, 1.6)); font-weight: 700; line-height: 1.25; padding: 9px 14px; border-radius: 14px; box-shadow: var(--lc-gal-shadow-md);
}
.lc-gal .lc-gal-hero__sticker .lc-gal__ico { width: 15px; height: 15px; }
.lc-gal .lc-gal-hero__sticker--ort { left: -6px; top: -8px; transform: rotate(-4deg); }
.lc-gal .lc-gal-hero__sticker--neu { right: 4px; bottom: 6px; transform: rotate(-3deg); }
@media (min-width: 992px) {
  .lc-gal .lc-gal-hero { padding: 88px 0 56px; }
  .lc-gal .lc-gal-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; }
  .lc-gal .lc-gal-hero__media { height: 420px; }
}

/* ===== Themen-Leiste: Library-Filterbar (lc-filterbar, Teamseite), klebt unter dem Header ===== */
.lc-gal .lc-gal__bar {
  position: sticky; top: var(--lc-gal-top); z-index: 20;
  background: rgba(253, 243, 231, .95); /* Team-Sand, damit die Leiste zum Hero gehört */
  border-bottom: 1px solid var(--lc-gal-gray-200);
  height: var(--lc-gal-bar); margin-bottom: calc(-1 * var(--lc-gal-bar));
}
.lc-gal .lc-gal__bar-in { max-width: 1140px; margin: 0 auto; padding: 0 20px; height: 100%; display: flex; align-items: center; }
.lc-gal .lc-gal__chips {
  display: flex; align-items: center; gap: calc(.6rem * var(--lc-r, 1.6)); height: 100%; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-right: 28px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); /* Wisch-Signal am rechten Rand */
}
.lc-gal .lc-gal__chips::-webkit-scrollbar { display: none; }
.lc-gal .lc-gal__chip {
  --lc-gal-c: var(--lc-gal-gray-600);
  --lc-gal-t: background-color .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s;
  flex: none; display: inline-flex; align-items: center; gap: calc(.5rem * var(--lc-r, 1.6)); min-height: 46px; padding: calc(.55rem * var(--lc-r, 1.6)) calc(1.25rem * var(--lc-r, 1.6));
  border-radius: var(--lc-gal-radius-pill); border: 1.5px solid var(--lc-gal-gray-200); background: rgba(255, 255, 255, .65);
  font: 500 calc(1rem * var(--lc-r, 1.6))/1 var(--lc-gal-font); cursor: pointer; white-space: nowrap;
}
.lc-gal .lc-gal__chip .count { font-size: calc(.85rem * var(--lc-r, 1.6)); opacity: .7; font-weight: 400; }
.lc-gal .lc-gal__chip:hover { --lc-gal-c: var(--lc-gal-ink); border-color: var(--lc-gal-primary-500); transform: translateY(-2px); }
/* Aktiv auf Primary-900: die einzige Stufe, die weissen Text AA-konform trägt (tokens.css; Kurator 15.10.2026, Variante 1) */
.lc-gal .lc-gal__chip[aria-current="true"] {
  --lc-gal-c: #fff; background: var(--lc-gal-primary-900); border-color: var(--lc-gal-primary-900);
  font-weight: 700; box-shadow: 0 8px 20px rgba(18, 101, 94, .3);
}
.lc-gal .lc-gal__chip[aria-current="true"] .count { opacity: .85; }
.lc-gal .lc-gal__chip:focus-visible { outline: 3px solid var(--lc-gal-focus); outline-offset: 2px; }

/* ===== Slots: ein Beitrag pro Screen (unter dem Header) ===== */
.lc-gal .lc-gal__slot {
  position: relative; overflow: hidden; background: var(--lc-gal-ink);
  height: calc(100vh - var(--lc-gal-top));
  height: calc(100svh - var(--lc-gal-top));
  scroll-snap-align: start; scroll-margin-top: var(--lc-gal-top);
}
.lc-gal .lc-gal__slot-in { position: relative; height: 100%; }
.lc-gal .lc-gal__media { position: absolute; inset: 0; background: var(--lc-gal-ink); }
.lc-gal .lc-gal__video, .lc-gal .lc-gal__img { display: block; width: 100%; height: 100%; }
/* Unscharfer Hintergrund als Bild mit loading="lazy": ein CSS-Hintergrund lüde mobil jedes Beitragsbild sofort */
.lc-gal .lc-gal__bg {
  position: absolute; top: -40px; left: -40px; width: calc(100% + 80px); height: calc(100% + 80px); max-width: none;
  object-fit: cover; filter: blur(28px) brightness(.5); pointer-events: none;
}
.lc-gal .lc-gal__img, .lc-gal .lc-gal__track { position: relative; z-index: 1; }
/* Logo als Wasserzeichen oben links auf jedem Medium, etwa so gross wie der Play-Button */
.lc-gal .lc-gal__mark {
  position: absolute; top: calc(var(--lc-gal-bar) + calc(.75rem * var(--lc-r, 1.6))); left: calc(1rem * var(--lc-r, 1.6)); z-index: 3; width: 74px; pointer-events: none; /* 72px Logo + Rand der viewBox (2 von 122 Einheiten je Seite) */
  filter: drop-shadow(0 1px 2px rgba(17, 24, 39, .6)) drop-shadow(0 2px 10px rgba(17, 24, 39, .35));
}
.lc-gal .lc-gal__mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.lc-gal .lc-gal__video { object-fit: cover; cursor: pointer; }
.lc-gal .lc-gal__img { object-fit: contain; }

/* Karussell: horizontal, rastet ein */
.lc-gal .lc-gal__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lc-gal .lc-gal__track::-webkit-scrollbar { display: none; }
.lc-gal .lc-gal__track img { flex: none; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: start; }
.lc-gal .lc-gal__dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(8.5rem * var(--lc-r, 1.6)); display: flex; gap: 6px; z-index: 3; }
.lc-gal .lc-gal__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.lc-gal .lc-gal__dots span[aria-current="true"] { background: #fff; }
.lc-gal .lc-gal__count {
  position: absolute; top: calc(var(--lc-gal-bar) + calc(.75rem * var(--lc-r, 1.6))); right: calc(1rem * var(--lc-r, 1.6)); z-index: 3; color: #fff;
  font-size: calc(.9375rem * var(--lc-r, 1.6)); font-weight: 600; line-height: 1.6;
  background: rgba(17, 24, 39, .55); padding: calc(.25rem * var(--lc-r, 1.6)) calc(.6rem * var(--lc-r, 1.6)); border-radius: var(--lc-gal-radius-pill);
}
.lc-gal .lc-gal__arrow { display: none; }

/* Unterschrift: mobil über dem Medium */
.lc-gal .lc-gal__text {
  position: absolute; left: 0; right: 0; bottom: 0; padding: calc(5rem * var(--lc-r, 1.6)) calc(4.75rem * var(--lc-r, 1.6)) calc(1.25rem * var(--lc-r, 1.6)) calc(1rem * var(--lc-r, 1.6));
  color: #fff; pointer-events: none; background: linear-gradient(180deg, transparent 0%, var(--lc-gal-scrim) 100%);
}
.lc-gal .lc-gal__text a, .lc-gal .lc-gal__text button { pointer-events: auto; }
.lc-gal .lc-gal__cap {
  margin: 0; font-size: calc(1.0625rem * var(--lc-r, 1.6)); line-height: 1.4; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lc-gal .lc-gal__when { display: block; margin-top: calc(.35rem * var(--lc-r, 1.6)); font-size: calc(1rem * var(--lc-r, 1.6)); }
.lc-gal .lc-gal__meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(.5rem * var(--lc-r, 1.6)) calc(.9rem * var(--lc-r, 1.6)); margin-top: calc(.5rem * var(--lc-r, 1.6)); }
.lc-gal .lc-gal__go {
  --lc-gal-u: underline;
  display: inline-flex; align-items: center; gap: calc(.35rem * var(--lc-r, 1.6)); min-height: 44px;
  font-size: calc(1rem * var(--lc-r, 1.6)); font-weight: 600; text-underline-offset: .2em;
}
.lc-gal .lc-gal__go .lc-gal__ico, .lc-gal .lc-gal__cta-ig .lc-gal__ico { width: 1em; height: 1em; }
.lc-gal .lc-gal__tag {
  --lc-gal-c: #fff;
  display: inline-flex; align-items: center; min-height: 44px; padding: calc(.5rem * var(--lc-r, 1.6)) calc(.85rem * var(--lc-r, 1.6));
  border-radius: var(--lc-gal-radius-pill); border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .14); font: 600 calc(1rem * var(--lc-r, 1.6))/1 var(--lc-gal-font); cursor: pointer;
}
.lc-gal .lc-gal__tag:hover { background: rgba(255, 255, 255, .26); }
.lc-gal .lc-gal__go:focus-visible, .lc-gal .lc-gal__tag:focus-visible { outline: 3px solid var(--lc-gal-focus); outline-offset: 3px; }

/* Knöpfe rechts: Teilen über Ton */
.lc-gal .lc-gal__btn {
  position: absolute; right: calc(1rem * var(--lc-r, 1.6)); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: none; padding: 0;
  background: var(--lc-gal-glass); color: var(--lc-gal-ink); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--lc-gal-shadow-md); transition: background-color .15s, transform .1s;
}
.lc-gal .lc-gal__btn .lc-gal__ico { width: calc(1.3rem * var(--lc-r, 1.6)); height: calc(1.3rem * var(--lc-r, 1.6)); }
.lc-gal .lc-gal__btn:hover { background: #fff; }
.lc-gal .lc-gal__btn:active { transform: scale(.94); }
.lc-gal .lc-gal__btn:focus-visible { outline: 3px solid var(--lc-gal-focus); outline-offset: 3px; }
.lc-gal .lc-gal__sound { bottom: calc(1.25rem * var(--lc-r, 1.6)); }
.lc-gal .lc-gal__sound[aria-pressed="true"] { background: var(--lc-gal-primary-900); color: #fff; }
.lc-gal .lc-gal__sound .lc-gal__ico--sound,
.lc-gal .lc-gal__sound[aria-pressed="true"] .lc-gal__ico--mute { display: none; }
.lc-gal .lc-gal__sound[aria-pressed="true"] .lc-gal__ico--sound { display: block; }
.lc-gal .lc-gal__share { bottom: calc(calc(1.25rem * var(--lc-r, 1.6)) + 44px + calc(.75rem * var(--lc-r, 1.6))); }
.lc-gal .lc-gal__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: var(--lc-gal-primary-600); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(34, 188, 173, .4); transition: background-color .22s, transform .22s;
}
.lc-gal .lc-gal__play .lc-gal__ico { width: 22px; height: 22px; margin-left: 3px; }
.lc-gal .lc-gal__play:hover { background: var(--lc-gal-primary-600-hover); transform: translate(-50%, -50%) scale(1.07); }
.lc-gal .lc-gal__play:focus-visible { outline: 3px solid var(--lc-gal-focus); outline-offset: 3px; }

/* ===== System-Slots: Statement und Anmeldung ===== */
.lc-gal .lc-gal__slot--say, .lc-gal .lc-gal__slot--cta { background: var(--lc-gal-primary-900); color: #fff; }
.lc-gal .lc-gal__slot--say .lc-gal__slot-in, .lc-gal .lc-gal__slot--cta .lc-gal__slot-in { display: flex; align-items: center; padding: 0 calc(1.25rem * var(--lc-r, 1.6)); }
.lc-gal .lc-gal__say-h { font-size: calc(1rem * var(--lc-r, 1.6)); font-weight: 600; line-height: 1.6; letter-spacing: .01em; color: rgba(255, 255, 255, .78); margin: 0 0 calc(.9rem * var(--lc-r, 1.6)); padding: 0; hyphens: manual; }
.lc-gal .lc-gal__say-p { margin: 0; color: #fff; font-weight: 700; font-size: clamp(calc(2rem * var(--lc-r, 1.6)), calc(1.3rem * var(--lc-r, 1.6)) + 3.4vw, calc(4rem * var(--lc-r, 1.6))); line-height: 1.08; letter-spacing: -.02em; max-width: 16ch; }
.lc-gal .lc-gal__cta-line { margin: 0; padding: 0; hyphens: manual; color: #fff; font-weight: 700; font-size: clamp(calc(2.2rem * var(--lc-r, 1.6)), calc(1.4rem * var(--lc-r, 1.6)) + 4vw, calc(4.5rem * var(--lc-r, 1.6))); line-height: 1.02; letter-spacing: -.025em; }
.lc-gal .lc-gal__cta-sub { margin: calc(1rem * var(--lc-r, 1.6)) 0 0; font-size: calc(1.125rem * var(--lc-r, 1.6)); line-height: 1.5; max-width: 34ch; color: rgba(255, 255, 255, .88); }
.lc-gal .lc-gal__cta-row { margin-top: calc(1.75rem * var(--lc-r, 1.6)); display: flex; flex-wrap: wrap; align-items: center; gap: calc(1rem * var(--lc-r, 1.6)) calc(1.5rem * var(--lc-r, 1.6)); }
.lc-gal .lc-gal__cta-ig {
  --lc-gal-c: #fff;
  --lc-gal-u: underline;
  display: inline-flex; align-items: center; gap: calc(.4rem * var(--lc-r, 1.6)); min-height: 44px; font-weight: 600; text-underline-offset: .2em;
}
.lc-gal .lc-gal__cta-ig--dark { --lc-gal-c: var(--lc-gal-primary-900); }
.lc-gal .lc-gal__cta-ig:focus-visible { outline: 3px solid var(--lc-gal-focus); outline-offset: 3px; }

/* ===== Leer, nicht verfügbar, Toast ===== */
.lc-gal .lc-gal__empty { margin: 0; padding: calc(4rem * var(--lc-r, 1.6)) calc(1rem * var(--lc-r, 1.6)); text-align: center; color: var(--lc-gal-gray-600); font-size: calc(1.0625rem * var(--lc-r, 1.6)); }
.lc-gal .lc-gal__unavailable { padding-bottom: calc(4rem * var(--lc-r, 1.6)); text-align: center; font-size: calc(1.0625rem * var(--lc-r, 1.6)); }
.lc-gal .lc-gal__note { margin: 0; }
.lc-gal .lc-gal__note + .lc-gal__note { margin-top: calc(1rem * var(--lc-r, 1.6)); }
.lc-gal .lc-gal__unavailable .lc-gal__cta-ig { justify-content: center; }
.lc-gal .lc-gal__toast {
  position: fixed; left: 50%; bottom: calc(1.5rem * var(--lc-r, 1.6)); transform: translateX(-50%); z-index: 100000;
  max-width: calc(100vw - calc(2rem * var(--lc-r, 1.6))); overflow-wrap: anywhere;
  background: var(--lc-gal-ink); color: #fff; padding: calc(.75rem * var(--lc-r, 1.6)) calc(1.25rem * var(--lc-r, 1.6)); border-radius: var(--lc-gal-radius-pill);
  font-weight: 600; box-shadow: var(--lc-gal-shadow-lg);
}

/* ===== Desktop: Poster neben der Unterschrift ===== */
@media (min-width: 992px) {
  .lc-gal .lc-gal__slot { background: var(--lc-gal-white); }
  .lc-gal .lc-gal__slot--say, .lc-gal .lc-gal__slot--cta { background: var(--lc-gal-primary-900); }
  /* Oben liegt die Leiste über dem Slot: Inhalt darunter zentrieren */
  .lc-gal .lc-gal__slot-in {
    max-width: 1140px; margin: 0 auto; padding: var(--lc-gal-bar) calc(1.5rem * var(--lc-r, 1.6)) 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(3rem * var(--lc-r, 1.6)); align-items: center;
  }
  .lc-gal .lc-gal__media {
    position: relative; inset: auto; justify-self: end; box-shadow: var(--lc-gal-shadow-lg); background: var(--lc-gal-ink);
    height: min(calc(100vh - var(--lc-gal-top) - var(--lc-gal-bar) - calc(2rem * var(--lc-r, 1.6))), 780px);
    height: min(calc(100svh - var(--lc-gal-top) - var(--lc-gal-bar) - calc(2rem * var(--lc-r, 1.6))), 780px);
  }
  .lc-gal .lc-gal__slot--video .lc-gal__media { aspect-ratio: 9 / 16; }
  .lc-gal .lc-gal__slot--image .lc-gal__media {
    height: auto; width: 100%; min-height: calc(20rem * var(--lc-r, 1.6));
    max-height: min(calc(100vh - var(--lc-gal-top) - var(--lc-gal-bar) - calc(2rem * var(--lc-r, 1.6))), 780px);
    max-height: min(calc(100svh - var(--lc-gal-top) - var(--lc-gal-bar) - calc(2rem * var(--lc-r, 1.6))), 780px);
  }
  .lc-gal .lc-gal__slot--image .lc-gal__img {
    width: 100%; height: auto; object-fit: contain;
    max-height: min(calc(100vh - var(--lc-gal-top) - var(--lc-gal-bar) - calc(2rem * var(--lc-r, 1.6))), 780px);
    max-height: min(calc(100svh - var(--lc-gal-top) - var(--lc-gal-bar) - calc(2rem * var(--lc-r, 1.6))), 780px);
  }
  .lc-gal .lc-gal__bg { display: none; } /* ohne Box lädt das Lazy-Bild nie */
  .lc-gal .lc-gal__slot--carousel .lc-gal__media { aspect-ratio: 4 / 5; }
  .lc-gal .lc-gal__track img { object-fit: cover; }
  .lc-gal .lc-gal__arrow {
    display: flex; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 44px; height: 44px; border-radius: 50%; border: none; padding: 0;
    background: var(--lc-gal-glass); color: var(--lc-gal-ink); align-items: center; justify-content: center;
    cursor: pointer; box-shadow: var(--lc-gal-shadow-md);
  }
  .lc-gal .lc-gal__arrow .lc-gal__ico { width: calc(1.3rem * var(--lc-r, 1.6)); height: calc(1.3rem * var(--lc-r, 1.6)); }
  .lc-gal .lc-gal__arrow:focus-visible { outline: 3px solid var(--lc-gal-focus); outline-offset: 2px; }
  .lc-gal .lc-gal__arrow--prev { left: calc(.75rem * var(--lc-r, 1.6)); }
  .lc-gal .lc-gal__arrow--next { right: calc(.75rem * var(--lc-r, 1.6)); }
  .lc-gal .lc-gal__dots { bottom: calc(1rem * var(--lc-r, 1.6)); }
  .lc-gal .lc-gal__count { top: calc(.75rem * var(--lc-r, 1.6)); }
  .lc-gal .lc-gal__mark { top: calc(1rem * var(--lc-r, 1.6)); left: calc(1rem * var(--lc-r, 1.6)); width: 66px; }
  .lc-gal .lc-gal__text { position: static; color: var(--lc-gal-ink); background: none; padding: 0; max-width: 34ch; pointer-events: auto; }
  .lc-gal .lc-gal__tag { --lc-gal-c: var(--lc-gal-primary-900); background: var(--lc-gal-primary-50); border-color: var(--lc-gal-primary-200); }
  .lc-gal .lc-gal__tag:hover { background: var(--lc-gal-primary-100); }
  .lc-gal .lc-gal__cap { font-size: calc(1.375rem * var(--lc-r, 1.6)); line-height: 1.45; -webkit-line-clamp: 6; }
  .lc-gal .lc-gal__when { color: var(--lc-gal-gray-500); font-size: calc(1rem * var(--lc-r, 1.6)); margin-top: calc(.75rem * var(--lc-r, 1.6)); }
  .lc-gal .lc-gal__meta { margin-top: calc(1rem * var(--lc-r, 1.6)); }
  .lc-gal .lc-gal__go { --lc-gal-c: var(--lc-gal-primary-900); }
  .lc-gal .lc-gal__slot--even .lc-gal__media { justify-self: start; order: 2; }
  .lc-gal .lc-gal__slot--even .lc-gal__text { justify-self: end; }
  .lc-gal .lc-gal__slot--say .lc-gal__slot-in, .lc-gal .lc-gal__slot--cta .lc-gal__slot-in { display: flex; padding: var(--lc-gal-bar) calc(1.5rem * var(--lc-r, 1.6)) 0; }
  .lc-gal .lc-gal__cta-sub { font-size: calc(1.25rem * var(--lc-r, 1.6)); }
}

@media (prefers-reduced-motion: reduce) {
  html.lc-gal-snap { scroll-snap-type: none; }
  .lc-gal .lc-gal__btn, .lc-gal .lc-gal__play { transition: none; }
  .lc-gal .lc-gal__chip, .lc-gal .lc-gal__pill { --lc-gal-t: none; }
  .lc-gal .lc-gal__pill--primary:hover, .lc-gal .lc-gal-btn--cal:hover, .lc-gal .lc-gal__chip:hover { transform: none; }
  .lc-gal .lc-gal-btn { --lc-gal-t: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}