/*
 * lc_instagram – Instagram-Feed im Stil von Instagram (Mockup Version 3, 18.10.2026)
 * CSS-Variablen fuer eigenes CSS (bleiben ueber Updates stabil, siehe README); die ersten fuenf setzt der Reiter „Aussehen“:
 *   --lci-fuge          Abstand zwischen den Kacheln (Standard 1px)
 *   --lci-format        Seitenverhaeltnis der Kacheln (Standard 3 / 4)
 *   --lci-kachel-max    groesste Kachelbreite bei „Automatisch“ und von 760 bis 991 px (Standard 280px)
 *   --lci-oben, --lci-unten  Abstand ueber und unter dem Baustein (Standard 8px; unter 1200 px Fensterbreite drei Viertel, auf dem Handy die Haelfte)
 *   --lci-abdeckung     Farbe des Overlays bei Hover (Standard rgba(0,0,0,.7))
 *   --lci-blau, --lci-blau-hover, --lci-text, --lci-text-2, --lci-linie, --lci-linie-2, --lci-flaeche, --lci-schrift
 * Klassen: .lci (Wurzel), .lci__oben (Ueberschrift und Profilbereich, Shopbreite), .lci__kopf (Ueberschrift, im Instagram-Stil mit
 * .lci__kopf--zeile), .lci__innen (Inhaltsbereich mit Kachelreihe, Scrollleiste und Positionsanzeige, Breite nach „Breite der Kachelreihe“),
 * .lci__leiste (Kachelreihe), .lci__item (Collab-Beitrag zusaetzlich .lci__item--kollab und data-lci-autor="Konto des Erstellers"; per CSS
 * ausgeblendete Kacheln ueberspringen auch die Detailansicht und die Positionsanzeige), .lci__kachel, .lci__abdeckung (Overlay), .lci__pille (Produkt-Schaltflaeche), .lci__regler
 * (Scrollleiste) mit .lci__spur (Bahn) und .lci__griff, .lci__zaehler (Positionsanzeige), .lci-post (Detailansicht),
 * .lci-p__zum („Zum Produkt“), .lci-p__abspielen mit .lci-p__play und .lci-p__vtext (Schaltflaeche „Auf Instagram ansehen“ bei Videos)
 * Die Werte aus dem Reiter „Aussehen“ kommen als --lci-e-… an der Wurzel an; die Variablen ohne „e-“ im eigenen CSS ueberschreiben sie.
 */
.lci, .lci-post {
  --lci-text: #0C1014; --lci-text-2: #6A717A; --lci-linie: #DBDFE4; --lci-linie-2: #EFEFEF; --lci-grund: #FFFFFF; --lci-flaeche: #F3F5F7;
  --lci-blau: #4A5DF9; --lci-blau-hover: #4150F7; --lci-link: #4150F7; --lci-link-stark: #3143E3; --lci-knopf-2: #F0F2F5; --lci-knopf-2-hover: #E7EAEE;
  --lci-schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lci-fuge: var(--lci-e-fuge, 1px); --lci-format: var(--lci-e-format, 3 / 4); --lci-kachel-max: var(--lci-e-kachel-max, 280px);
  --lci-oben: var(--lci-e-oben, 8px); --lci-unten: var(--lci-e-unten, 8px); --lci-abdeckung: rgba(0,0,0,.7); --lci-radius-knopf: 8px;
  --lci-kurve: cubic-bezier(.17, .17, 0, 1);
}
/* Design „Shop-Design“: Bedienung wie Instagram, Farben und Schrift des Shops */
.lci.lci--lc, .lci-post.lci--lc { --lci-blau: #222222; --lci-blau-hover: #3A3A3A; --lci-link: #222222; --lci-link-stark: #222222; --lci-schrift: inherit; }
.lci-post.lci--lc .lci-p__folgen, .lci-post.lci--lc .lci-p__pname { text-decoration: underline; text-decoration-color: #B28D53; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* benannter Container: Abfragen beziehen sich immer auf die Breite des ganzen Bausteins, nie auf eine Kachel (die selbst Container ist) */
.lci { container: lci / inline-size; position: relative; color: var(--lci-text); font-family: var(--lci-schrift); font-size: 14px; line-height: 18px; padding-block: var(--lci-oben) var(--lci-unten); }
/* Abstand ueber und unter dem Baustein (Reiter „Aussehen“, Abschnitt „Abstände“): unter 1200 px Fensterbreite drei Viertel, auf dem Handy
   die Haelfte (bei 96/64 also 72/48 und 48/32) */
@media (max-width: 1199.98px) { .lci { padding-block: calc(var(--lci-oben) * .75) calc(var(--lci-unten) * .75); } }
@media (max-width: 759px) { .lci { padding-block: calc(var(--lci-oben) / 2) calc(var(--lci-unten) / 2); } }
.lci *, .lci-post * { box-sizing: border-box; }
/* Zwei Bereiche: .lci__oben (Ueberschrift, Profilbereich) in Shopbreite, am Desktop als kompakter Block in der Mitte; .lci__innen (Kachelreihe,
   Scrollleiste, Positionsanzeige) nach „Breite der Kachelreihe“. Shopbreite: Container-Klasse des Templates (so breit wie die Boxed Container
   der Seite); auch bei Fensterbreite (dort reicht nur die Kachelreihe weiter). Steht der Baustein schon in einem Container, ohne diese
   Klasse; steht er trotzdem in einem, uebernehmen die Bereiche dessen Breite ohne eigenen Rand. Eigene Breite: der angegebene Anteil der
   Breite, die der Baustein hat (in einem randlosen Bereich die Fensterbreite), mittig. Die Abfragen @container lci beziehen sich wie bis
   1.0.1 auf den ganzen Baustein (.lci), Breitenangaben in cqi in der Kachelreihe auf den Inhaltsbereich. */
.lci__innen { container: lci-innen / inline-size; }
.container .lci__oben.container, .container .lci__innen.container { width: auto; max-width: none; margin-inline: 0; padding-inline: 0; }
/* Vorschau im OnPage Composer (sie kennt $inContainer nicht): in Bereichen von Zeilen- und Container-Bausteinen wie auf der Seite ohne Rand */
.opc-area:not(.opc-rootarea) .lci__oben.container, .opc-area:not(.opc-rootarea) .lci__innen.container { width: auto; max-width: none; margin-inline: 0; padding-inline: 0; }
.lci--b-prozent .lci__innen { width: calc(var(--lci-prozent, 90) * 1%); margin-inline: auto; }
.lci a:focus-visible, .lci button:focus-visible, .lci [tabindex]:focus-visible, .lci-post a:focus-visible, .lci-post button:focus-visible { outline: 2px solid var(--lci-blau); outline-offset: 2px; }
.lci .lci-vh, .lci-post .lci-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Überschrift (Einstellung „Überschrift“): im Shop-Design groß mit Zeile darunter, im Instagram-Stil eine kleine Zeile über dem Profilbereich
   (gesperrte Großbuchstaben in der zweiten Textfarbe, 1.0.4) */
.lci__kopf { text-align: center; margin-bottom: 24px; }
.lci__kopf h2 { margin: 0; font-size: 21px; line-height: 1.3; font-weight: 400; color: inherit; }
.lci__kopf p { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--lci-text-2); overflow-wrap: anywhere; }
.lci__kopf--zeile { margin-bottom: 20px; }
.lci__kopf--zeile h2 { font-family: inherit; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lci-text-2); }

/* Profilkopf: am Handy wie in der App (Bild links, Zahlen gestapelt, breiter Knopf), ab 760 px nebeneinander */
.lci__profil { display: grid; grid-template-columns: 77px minmax(0, 1fr); column-gap: 20px; row-gap: 12px; align-items: center; margin-bottom: 20px; }
.lci__avatar { width: 77px; height: 77px; border-radius: 50%; overflow: hidden; background: var(--lci-flaeche); display: block; }
.lci__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lci__wer { min-width: 0; display: grid; gap: 8px; }
.lci__konto { margin: 0; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--lci-text); overflow-wrap: anywhere; }
.lci__konto a { color: inherit; text-decoration: none; }
.lci__zahlen { margin: 0; padding: 0; list-style: none; display: flex; gap: 24px; font-size: 14px; line-height: 18px; font-variant-numeric: tabular-nums; }
.lci__zahlen li { display: grid; justify-items: start; margin: 0; }
.lci__zahlen b { font-weight: 600; }
.lci__name { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 18px; font-weight: 600; }
.lci__folgen { grid-column: 1 / -1; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 7px 16px; border-radius: 8px; background: var(--lci-blau); color: #fff !important; font-size: 14px; line-height: 18px; font-weight: 600; text-decoration: none !important; }
.lci__folgen:hover { background: var(--lci-blau-hover); }
.lci__folgen:active { background: var(--lci-blau-hover); transform: scale(.98); }
.lci__folgen::after { content: ""; position: absolute; inset: -6px 0; }
/* Am Desktop (ab 760 px, 1.0.4) ein kompakter Block in der Mitte wie das Instagram-Profil: Bild, daneben Kontoname, Zahlen und Name eng
   untereinander, „Folgen“ als eigene Zeile darunter. Die Zeilen stehen mittig zur Höhe des Bilds: Das Bild reicht über alle Zeilen, und nur
   die beiden flexiblen Zeilen oben und unten nehmen seine übrige Höhe auf (so werden die Textzeilen nicht auseinandergezogen). */
@container lci (min-width: 760px) {
  .lci__profil { width: fit-content; max-width: 100%; margin-inline: auto; grid-template-columns: 120px auto; grid-template-rows: 1fr auto auto auto auto 1fr; column-gap: 32px; row-gap: 0; align-items: start; margin-bottom: 32px; }
  .lci__avatar { width: 120px; height: 120px; grid-column: 1; grid-row: 1 / -1; align-self: center; }
  .lci__wer { display: contents; }
  .lci__konto { grid-column: 2; grid-row: 2; font-size: 22px; line-height: 28px; font-weight: 700; }
  .lci__zahlen { grid-column: 2; grid-row: 3; gap: 16px; margin-top: 6px; }
  .lci__zahlen li { display: block; }
  .lci__name { grid-column: 2; grid-row: 4; margin-top: 4px; font-weight: 400; }
  .lci__folgen { grid-column: 2; grid-row: 5; justify-self: start; margin-top: 14px; height: 36px; padding: 0 24px; }
  .lci__folgen::after { inset: -4px 0; }
}
@container lci (min-width: 1100px) { .lci__profil { grid-template-columns: 150px auto; column-gap: 40px; } .lci__avatar { width: 150px; height: 150px; } }

/* Kachelreihe: einzeilig, Kacheln mit Fuge wie im Profilraster; bei „Fensterbreite“ von Fensterrand zu Fensterrand (Abstaende setzt das Skript) */
.lci__leiste { --lci-l: var(--lci-rand-l, 0px); --lci-r: var(--lci-rand-r, 0px); display: flex; gap: var(--lci-fuge); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; list-style: none; margin: 0 calc(-1 * var(--lci-r)) 0 calc(-1 * var(--lci-l)); padding: 0 var(--lci-r) 0 var(--lci-l); scroll-padding-inline: var(--lci-l) var(--lci-r); position: relative; touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch; }
.lci--b-fenster .lci__leiste { padding: 0; scroll-padding-inline: 0; }
/* Volle Fensterbreite vor dem Skript: Abstand zum Fensterrand geschaetzt ((Fensterbreite - Inhaltsbreite) / 2, auf Geraeten mit Maus abzueglich
   einer Scrollleiste, also eher zu knapp als zu weit), damit die Kachelreihe beim Start kaum springt; das Skript setzt danach die gemessenen
   Werte. Nur mit Daten, also nicht in der Vorschau des Editors. */
.lci--b-fenster[data-lci-daten] .lci__leiste { --lci-l: var(--lci-rand-l, max(0px, calc((100vw - 100%) / 2))); --lci-r: var(--lci-rand-r, max(0px, calc((100vw - 100%) / 2))); }
@media (hover: hover) and (pointer: fine) {
  .lci--b-fenster[data-lci-daten] .lci__leiste { --lci-l: var(--lci-rand-l, max(0px, calc((100vw - 100% - 17px) / 2))); --lci-r: var(--lci-rand-r, max(0px, calc((100vw - 100% - 17px) / 2))); }
}
.lci__leiste::-webkit-scrollbar { display: none; }
.lci__leiste.ist-maus { cursor: grab; }
.lci__leiste.ist-ziehen { cursor: grabbing; user-select: none; }
.lci__leiste.ist-ziehen .lci__kachel, .lci__leiste.ist-ziehen .lci__pille { pointer-events: none; }
.lci__item { position: relative; flex: none; margin: 0; padding: 0; width: 30vw; width: min(calc((100cqi - 2 * var(--lci-fuge)) / 3), var(--lci-kachel-max)); container: lci-kachel / inline-size; }
.lci__kachel { position: relative; display: block; aspect-ratio: var(--lci-format); overflow: hidden; background: var(--lci-farbe, var(--lci-flaeche)); color: #fff; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.lci__kachel img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; max-width: none; }
/* Fokusrahmen innen (die Leiste schneidet oben und unten ab, rechts liegt die naechste Kachel darueber), bei Kacheln ueber der Abdeckung
   und zweifarbig, damit er auf hellen und dunklen Fotos zu sehen ist */
.lci .lci__kachel:focus-visible { outline: none; }
.lci .lci__kachel:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #0C1014; }
.lci .lci__mehr:focus-visible { outline-width: 3px; outline-offset: -3px; }
/* Zoom beim Ueberfahren (Schalter, aus Design A) */
.lci--zoom .lci__kachel img { transition: transform 600ms cubic-bezier(.2, 0, 0, 1); }
@media (hover: hover) and (pointer: fine) { .lci--zoom .lci__item:hover .lci__kachel img { transform: scale(1.03); } }
/* Hinweis "hat Artikel": Tasche unten links, ab 2 Artikeln mit Zahl */
.lci__tasche { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; min-width: 28px; padding: 0 7px; border-radius: 14px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; line-height: 16px; font-weight: 600; pointer-events: none; }
.lci__symbol { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; color: #fff; pointer-events: none; display: block; }
/* Abdeckung wie bei Instagram: ohne Uebergang, oben der Text, in der Mitte die Zahlen, unten der weisse Pillenknopf */
.lci__abdeckung { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--lci-abdeckung); color: #fff; opacity: 0; pointer-events: none; }
.lci__atext { position: absolute; top: 16px; left: 16px; right: 16px; margin: 0; font-size: 14px; line-height: 18px; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lci__atext b { font-weight: 600; }
.lci__azahlen { display: flex; gap: 30px; font-size: 16px; line-height: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lci__azahlen span { display: inline-flex; align-items: center; }
.lci__azahlen svg { margin: 2px 7px 0 0; }
.lci__pille { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: block; padding: 14px 16px; border-radius: 22px; background: #fff; color: #0C1014 !important; font-size: 14px; line-height: 18px; font-weight: 600; white-space: nowrap; text-decoration: none !important; border: 0; font-family: inherit; cursor: pointer; opacity: 0; pointer-events: none; }
.lci__pille[hidden] { display: none; }
.lci__pille:hover { background: #F0F2F5; }
.lci__pille:active { transform: translateX(-50%) scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .lci__item:hover .lci__abdeckung, .lci__item:hover .lci__pille { opacity: 1; }
  .lci__item:hover .lci__pille { pointer-events: auto; }
}
.lci__item:has(:focus-visible) .lci__abdeckung { opacity: 1; }
.lci__item:has(:focus-visible) .lci__pille { opacity: 1; pointer-events: auto; }
/* Touch: langes Druecken zeigt die Abdeckung (ist-vorschau), kurzes Tippen oeffnet den Beitrag */
.lci__item.ist-vorschau .lci__abdeckung, .lci__item.ist-vorschau .lci__pille { opacity: 1; }
.lci__item.ist-vorschau .lci__pille { pointer-events: auto; }
.lci--ohne-abdeckung .lci__abdeckung, .lci--ohne-abdeckung .lci__pille { display: none; }
.lci--ohne-atext .lci__atext, .lci--ohne-zahlen .lci__azahlen { display: none; }
/* kleinere Kacheln: Text kuerzer, Knopf kleiner; ganz kleine ohne Text */
@container lci-kachel (max-width: 229px) {
  .lci__atext { top: 10px; left: 10px; right: 10px; font-size: 12px; line-height: 16px; -webkit-line-clamp: 3; }
  .lci__azahlen { gap: 14px; font-size: 14px; line-height: 18px; }
  .lci__azahlen svg { width: 16px; height: 16px; margin-right: 5px; }
  .lci__pille { bottom: 12px; padding: 8px 12px; font-size: 13px; line-height: 16px; border-radius: 18px; width: max-content; max-width: calc(100% - 12px); white-space: normal; text-align: center; }
}
@container lci-kachel (max-width: 159px) { .lci__atext { display: none; } }
/* Kacheln nebeneinander (Reiter „Aussehen“): --lci-e-handy bzw. --lci-e-rechner Kacheln, mit Nachkommastelle schaut rechts die naechste
   hervor (Wisch-Signal); --lci-e-…-fugen ist die Zahl der sichtbaren Fugen dazwischen. Bezugsbreite --lci-voll: bei Fensterbreite die
   Fensterbreite, sonst die sichtbare Breite der Kachelreihe (setzt das Skript; davor 100cqi = Inhaltsbereich). Am Desktop bei „Automatisch“
   und von 760 bis 991 px gilt die Regel an .lci__item (drei nebeneinander, hoechstens --lci-kachel-max breit). */
@container lci (max-width: 759px) {
  .lci__item { width: calc((var(--lci-voll, 100cqi) - var(--lci-e-handy-fugen, 1) * var(--lci-fuge)) / var(--lci-e-handy, 1.1)); }
  /* Höhe „fast bildschirmhoch“: unabhaengig vom Seitenverhaeltnis */
  .lci--h-hoch .lci__kachel, .lci--h-hoch .lci__mehr, .lci--k-hoch .lci__kachel, .lci--k-hoch .lci__mehr { aspect-ratio: auto; height: min(78svh, 640px); }
}
@container lci (min-width: 992px) {
  .lci--d-zahl .lci__item, .lci--d-4 .lci__item, .lci--d-5 .lci__item, .lci--d-6 .lci__item, .lci--d-7 .lci__item, .lci--d-8 .lci__item {
    width: calc((var(--lci-voll, 100cqi) - var(--lci-e-rechner-fugen, 4) * var(--lci-fuge)) / var(--lci-e-rechner, 5));
  }
}
/* Seiten aus einem Zwischenspeicher mit der Ausgabe von 1.0.4 (Klassen statt der Werte --lci-e-…; „Eine große Kachel“ und
   „fast bildschirmhoch“ nutzen den Standard 1,1) */
.lci--k-raster { --lci-e-handy: 3; --lci-e-handy-fugen: 2; }
.lci--k-mittel { --lci-e-handy: 2.15; --lci-e-handy-fugen: 2; }
.lci--k-gross { --lci-e-handy: 1.4; --lci-e-handy-fugen: 1; }
.lci--d-4 { --lci-e-rechner: 4; --lci-e-rechner-fugen: 3; }
.lci--d-5 { --lci-e-rechner: 5; --lci-e-rechner-fugen: 4; }
.lci--d-6 { --lci-e-rechner: 6; --lci-e-rechner-fugen: 5; }
.lci--d-7 { --lci-e-rechner: 7; --lci-e-rechner-fugen: 6; }
.lci--d-8 { --lci-e-rechner: 8; --lci-e-rechner-fugen: 7; }
.lci__mehr { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: var(--lci-format); background: var(--lci-flaeche); color: var(--lci-text) !important; text-decoration: none !important; text-align: center; padding: 12px; }
.lci__mehr b { font-size: 14px; font-weight: 600; }
.lci__mehr span { font-size: 12px; line-height: 16px; color: var(--lci-text-2); overflow-wrap: anywhere; }
.lci__mehr i { font-style: normal; display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: var(--lci-radius-knopf); background: var(--lci-blau); color: #fff; font-size: 14px; font-weight: 600; text-align: center; }

/* Schieberegler unter der Leiste (erscheint erst mit dem Skript) */
.lci__regler { position: relative; margin-top: 18px; height: 44px; display: flex; align-items: center; cursor: pointer; touch-action: pan-y pinch-zoom; outline: none; }
/* Platz vorab freihalten, damit nichts springt; !important gegen [hidden] { display: none !important } aus Bootstrap (NOVA, AVIA) */
.lci__regler[hidden] { display: flex !important; visibility: hidden; }
.lci__spur { position: relative; width: 100%; height: 2px; border-radius: 2px; background: var(--lci-linie); transition: height 160ms var(--lci-kurve); }
.lci__griff { position: absolute; top: 50%; left: 0; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--lci-text); transition: height 160ms var(--lci-kurve), margin-top 160ms var(--lci-kurve); will-change: transform; }
.lci__regler:hover .lci__griff, .lci__regler.ist-aktiv .lci__griff, .lci__regler:focus-visible .lci__griff { height: 6px; margin-top: -3px; }
.lci__regler:hover .lci__spur, .lci__regler.ist-aktiv .lci__spur { height: 4px; }
.lci__regler:focus-visible { outline: 2px solid var(--lci-blau); outline-offset: 2px; border-radius: 4px; }
/* nach Mausklick auf den Regler kein Fokusrahmen (ist-zeiger setzt das Skript, eine Taste nimmt es wieder weg) */
.lci__regler.ist-zeiger:focus-visible { outline: none; }
.lci__regler.ist-zeiger:focus-visible:not(:hover):not(.ist-aktiv) .lci__griff { height: 2px; margin-top: -1px; }
.lci__regler.ist-aus { visibility: hidden; }
.lci__zaehler { min-height: 16px; margin: 4px 0 0; font-size: 12px; line-height: 16px; color: var(--lci-text-2); text-align: center; font-variant-numeric: tabular-nums; }

/* ================= Beitragsansicht (liegt ueber der Seite) ================= */
html.lci-offen { overflow: hidden; } /* Breite der Scrollleiste gleicht das Skript aus */
.lci-post { position: fixed; inset: 0; z-index: 100000; font-family: var(--lci-schrift); font-size: 14px; line-height: 18px; color: var(--lci-text); text-align: left; }
.lci-post[hidden] { display: none !important; }
.lci-post--dunkel { --lci-text: #F8F9F9; --lci-text-2: #A2AAB4; --lci-linie: #2B3036; --lci-linie-2: #2B3036; --lci-grund: #0C1014; --lci-flaeche: #25292E; --lci-link: #708DFF; --lci-link-stark: #708DFF; --lci-knopf-2: #25292E; --lci-knopf-2-hover: #2F343A; }
.lci-post--dunkel.lci--lc { --lci-link: #F8F9F9; --lci-link-stark: #F8F9F9; }
.lci-post--dunkel a:focus-visible, .lci-post--dunkel button:focus-visible { outline-color: var(--lci-text); }
.lci-post__blatt { position: absolute; inset: 0; background: var(--lci-grund); display: grid; grid-template-rows: 44px minmax(0, 1fr); transform: translateX(100%); transition: transform 320ms var(--lci-kurve); }
.lci-post.ist-offen .lci-post__blatt { transform: none; }
.lci-post.ist-zu .lci-post__blatt { transform: translateX(100%); transition-duration: 240ms; }
.lci-post__leiste { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; border-bottom: 1px solid var(--lci-linie-2); }
.lci-post__zurueck { width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center start; padding: 0 0 0 16px; color: var(--lci-text); cursor: pointer; }
.lci-post__titel { text-align: center; line-height: 16px; }
.lci-post__titel b { display: block; font-size: 16px; line-height: 18px; font-weight: 600; }
.lci-post__titel span { display: block; font-size: 12px; color: var(--lci-text-2); overflow-wrap: anywhere; }
.lci-post__liste { position: relative; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: auto; }
.lci-post__x, .lci-post__nav, .lci-post__schatten { display: none; }
.lci-p { border-bottom: 1px solid var(--lci-linie-2); padding-bottom: 16px; }
.lci-p__kopf { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 12px; }
.lci-p__av { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--lci-flaeche); flex: none; }
.lci-p__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lci-p__konto { font-weight: 600; color: var(--lci-text) !important; text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
/* Collab-Beitrag: „Ersteller und eigenes Konto“ in der Kopfzeile, lange Namen brechen um (die Kopfzeile wächst dann mit) */
.lci-p__wer { min-width: 0; overflow-wrap: anywhere; line-height: 18px; padding-block: 8px; }
.lci-p__punkt { color: var(--lci-text-2); }
.lci-p__folgen { color: var(--lci-link) !important; font-weight: 600; text-decoration: none; white-space: nowrap; }
.lci-p__folgen:hover { color: var(--lci-text) !important; }
.lci-p__medien { position: relative; aspect-ratio: 4 / 5; background: var(--lci-farbe, var(--lci-flaeche)); overflow: hidden; }
.lci-p__medien img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.lci-p__punkte { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 4px; pointer-events: none; }
.lci-p__punkte i { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .4; }
.lci-p__punkte i.an { opacity: 1; }
.lci-p__albnav { position: absolute; top: 50%; margin-top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.9); color: #0C1014; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.lci-p__albnav--l { left: 12px; } .lci-p__albnav--r { right: 12px; }
.lci-p__albnav[hidden] { display: none; }
/* Video: Abspielzeichen und sichtbarer Text „Auf Instagram ansehen“ (der Klick oeffnet Instagram, im Shop laeuft kein Video) */
.lci-p__abspielen { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; text-decoration: none !important; }
.lci-p__abspielen[hidden] { display: none; }
.lci-p__play { width: 64px; height: 64px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center; }
.lci-p__vtext { padding: 6px 12px; border-radius: 16px; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.lci-p__abspielen:hover .lci-p__vtext { background: rgba(0,0,0,.75); }
.lci-post .lci-p__abspielen:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #0C1014; }
/* minmax(0, 1fr): lange Artikelnamen duerfen die Spalte nicht ueber den Bildschirm hinaus verbreitern */
.lci-p__inhalt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* Knopfleiste direkt unter dem Bild wie "Insights ansehen | Beitrag bewerben" */
.lci-p__leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 12px 16px; border-top: 1px solid var(--lci-linie-2); border-bottom: 1px solid var(--lci-linie-2); }
.lci-p__pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lci-link-stark) !important; font-weight: 500; text-decoration: none; }
.lci-p__zum { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 16px; border-radius: var(--lci-radius-knopf); background: var(--lci-blau); color: #fff !important; font-size: 14px; line-height: 18px; font-weight: 600; text-decoration: none !important; }
.lci-p__zum:hover { background: var(--lci-blau-hover); }
.lci-p__zum:active { background: var(--lci-blau-hover); transform: scale(.98); transition: transform .1s ease-in-out; }
.lci-p__auch { display: grid; gap: 2px; padding: 0 4px; }
.lci-p__artikel { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 4px 8px; border-radius: 8px; color: var(--lci-text) !important; text-decoration: none !important; font-size: 13px; font-weight: 500; }
.lci-p__artikel img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; }
.lci-p__artikel span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lci-p__artikel:hover { background: var(--lci-knopf-2); }
.lci-p__pfeil { display: flex; color: var(--lci-text-2); }
.lci-p__likes { margin: 0; font-weight: 600; }
.lci-p__text { position: relative; margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.lci-p__text b { font-weight: 600; }
.lci-p__text .lci-tag { color: var(--lci-link); }
.lci-p__text.ist-gekuerzt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lci-p__tav, .lci-p__pbild { display: none; }
.lci-p__auchkopf { margin: 0; font-size: 12px; line-height: 16px; color: var(--lci-text-2); }
.lci-p__mehr { position: absolute; right: 0; bottom: 0; border: 0; background: var(--lci-grund); padding: 0 0 0 6px; font: inherit; color: var(--lci-text-2); cursor: pointer; }
.lci-p__datum { font-size: 12px; line-height: 16px; color: var(--lci-text-2); }
/* Rechner: Fenster wie bei Instagram */
@media (min-width: 992px) {
  .lci-post { display: grid; place-items: center; }
  .lci-post__zurueck, .lci-post__leiste { display: none; }
  .lci-post__schatten { display: block; position: absolute; inset: 0; background: rgba(12,16,20,.7); opacity: 0; transition: opacity 200ms var(--lci-kurve); }
  .lci-post.ist-offen .lci-post__schatten { opacity: 1; }
  .lci-post.ist-zu .lci-post__schatten { opacity: 0; }
  .lci-post__blatt { position: relative; inset: auto; display: block; background: none; transform: scale(1.04); opacity: 0; transition: transform 200ms var(--lci-kurve), opacity 200ms var(--lci-kurve); }
  .lci-post.ist-offen .lci-post__blatt { transform: none; opacity: 1; }
  .lci-post.ist-zu .lci-post__blatt { transform: scale(1.02); opacity: 0; }
  .lci-post__liste { overflow: visible; }
  .lci-p { display: none; border: 0; padding: 0; }
  .lci-p.ist-aktuell { --lci-h: min(calc(100vh - 48px), 900px); display: grid; grid-template-columns: minmax(0, calc(var(--lci-h) * .8)) minmax(405px, 500px); grid-template-rows: auto minmax(0, 1fr); height: var(--lci-h); max-width: calc(100vw - 112px); margin-inline: auto; background: var(--lci-grund); border-radius: 16px; overflow: hidden; }
  .lci-p.ist-aktuell .lci-p__medien { grid-column: 1; grid-row: 1 / -1; aspect-ratio: auto; height: 100%; background: #000; }
  .lci-p.ist-aktuell .lci-p__medien img { object-fit: contain; }
  .lci-p.ist-aktuell .lci-p__kopf { grid-column: 2; grid-row: 1; border-bottom: 1px solid var(--lci-linie-2); border-left: 1px solid var(--lci-linie-2); min-height: 61px; padding: 0 16px; }
  .lci-p.ist-aktuell .lci-p__inhalt { grid-column: 2; grid-row: 2; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; min-height: 0; border-left: 1px solid var(--lci-linie-2); }
  .lci-p.ist-aktuell .lci-p__inhalt > * { margin: 0; }
  .lci-p__scroll { overflow-y: auto; padding: 16px; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; align-content: start; min-height: 0; }
  .lci-p__scroll .lci-p__tav { display: block; grid-column: 1; grid-row: 1; }
  .lci-p__scroll .lci-p__text { grid-column: 2; grid-row: 1; }
  .lci-p__fuss { border-top: 1px solid var(--lci-linie-2); padding: 12px 16px 16px; display: grid; gap: 10px; }
  /* Artikel oben in der rechten Spalte, damit "Zum Produkt" sofort sichtbar ist; weitere Artikel als Liste */
  /* viele Produkte: der Block scrollt selbst, damit Beitragstext, Gefaellt-mir und Datum sichtbar bleiben (hoechstens die halbe Hoehe) */
  .lci-p__produkte { grid-row: 1; padding: 16px; border-bottom: 1px solid var(--lci-linie-2); display: grid; gap: 12px; align-content: start; max-height: calc(var(--lci-h) * .5); overflow-y: auto; overscroll-behavior: contain; }
  .lci-p__produkte:empty { display: none; }
  .lci-p.ist-aktuell .lci-p__scroll { grid-row: 2; }
  .lci-p.ist-aktuell .lci-p__fuss { grid-row: 3; }
  .lci-p__produkte .lci-p__leiste { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 0; padding: 0; border: 0; }
  .lci-p__pbild { display: block; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--lci-flaeche); }
  .lci-p__pbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .lci-p__produkte .lci-p__pname { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--lci-text) !important; font-weight: 600; }
  .lci-p__produkte .lci-p__zum { grid-column: 1 / -1; height: 44px; border-radius: 12px; }
  .lci-p__auchkopf { margin: 4px 0 0; }
  .lci-p__produkte .lci-p__auch { margin: 0; padding: 0; }
  .lci-p__produkte .lci-p__artikel { padding: 4px 8px 4px 4px; }
  .lci-p.ist-aktuell .lci-p__text.ist-gekuerzt { -webkit-line-clamp: unset; display: block; }
  .lci-p.ist-aktuell .lci-p__mehr { display: none; }
  .lci-post__x { display: grid; position: absolute; top: 5px; right: 5px; width: 44px; height: 44px; border: 0; padding: 0; background: none; color: #fff; place-items: center; cursor: pointer; z-index: 2; }
  .lci-post__nav { display: grid; position: absolute; top: 50%; margin-top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; background: #fff; color: #0C1014; box-shadow: 0 4px 12px rgba(0,0,0,.15); place-items: center; cursor: pointer; z-index: 2; }
  .lci-post__nav[hidden] { display: none; }
  .lci-post .lci-post__x:focus-visible, .lci-post .lci-post__nav:focus-visible { outline-color: #fff; }
  .lci-post__nav--l { left: 12px; } .lci-post__nav--r { right: 12px; }
}
/* Handy: Reihenfolge wie im Instagram-Feed – Knopfleiste direkt unter dem Bild, dann weitere Artikel, Gefaellt-mir, Text, Datum */
@media (max-width: 991px) {
  .lci-p__scroll, .lci-p__fuss, .lci-p__produkte { display: contents; }
  .lci-p__leiste { order: 1; }
  .lci-p__auchkopf { order: 2; margin: 0 12px -6px; }
  .lci-p__auch { order: 3; }
  .lci-p__likes { order: 4; margin-inline: 12px; }
  .lci-p__text { order: 5; margin-inline: 12px; }
  .lci-p__datum { order: 6; margin-inline: 12px; }
  .lci-p__inhalt:has(> .lci-p__produkte:empty) { padding-top: 12px; }
  /* ohne :has (aeltere Browser) wenigstens Abstand vor „Gefaellt mir“ */
  @supports not selector(:has(*)) { .lci-p__produkte:empty + .lci-p__scroll + .lci-p__fuss .lci-p__likes { margin-top: 12px; } }
}
@media (prefers-reduced-motion: reduce) { .lci-post__blatt, .lci-post__schatten, .lci__griff, .lci-p__zum, .lci--zoom .lci__kachel img { transition: none !important; } }