/* Instagram-Story (Feierling): Story-Kreis bzw. Kachel und Story-Fenster. Farben aus dem Template, mit Rückfallwerten. */
.igs { --igs-ring: conic-gradient(from 210deg, #f9ce34, #ee2a7b, #6228d7, #ee2a7b, #f9ce34); --igs-seen: #cdbfa8; }
.igs-open {
  display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  border-radius: 14px;
}
.igs-open:focus-visible { outline: 3px solid var(--teal-deep, #1d6e72); outline-offset: 4px; }

/* Kopf: Kreis + Text */
.igs-head { display: flex; align-items: center; gap: .75rem; }
.igs-ring { position: relative; flex: none; width: 4.25rem; height: 4.25rem; padding: 3px; border-radius: 50%; background: var(--igs-ring); transition: transform .2s ease; }
.igs-ring.is-seen { background: var(--igs-seen); }
.igs-avatar { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; border: 3px solid var(--cream-raised, #fffaf1); background: #fff; }
.igs-avatar img { width: 78%; height: 78%; object-fit: contain; }
.igs-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.igs-label { font-family: var(--font-serif, Georgia, serif); font-weight: 600; font-size: 1.125rem; line-height: 1.25; }
.igs-meta { font-size: .875rem; color: var(--ink-muted, #6b5a47); }
.igs-open:hover .igs-ring { transform: scale(1.04); }
.igs-empty { color: var(--ink-muted, #6b5a47); }

/* Kachel: Vorschaubild hochkant, Kreis unten darüber */
.igs--card .igs-open { position: relative; max-width: 20rem; overflow: hidden; background: var(--malt-deep, #4a2610); box-shadow: var(--photo-shadow, 0 10px 30px rgba(42, 29, 18, .18)); }
.igs-card__media { display: block; aspect-ratio: 9 / 16; }
.igs-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.igs--card .igs-head { position: absolute; inset: auto 0 0 0; padding: 3.5rem 1rem 1rem; background: linear-gradient(to top, rgba(20, 14, 8, .82), rgba(20, 14, 8, 0)); color: #fff; }
.igs--card .igs-meta { color: rgba(255, 255, 255, .85); }
.igs--card .igs-avatar { border-color: var(--malt-deep, #4a2610); }
@media (hover: hover) { .igs--card .igs-open:hover .igs-card__media img { transform: scale(1.03); } }

/* ---------- Story-Fenster ---------- */
.igs-viewer {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: auto; padding: 0; border: 0; background: #000; color: #fff; overflow: hidden;
}
@media (min-width: 600px) { .igs-viewer { height: min(92dvh, 900px); width: calc(min(92dvh, 900px) * 9 / 16); border-radius: 14px; } }
.igs-viewer::backdrop { background: rgba(10, 7, 4, .88); }
.igs-frame { position: relative; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.igs-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.igs-media { width: 100%; height: 100%; object-fit: contain; background: #000; -webkit-user-drag: none; }

.igs-bars { position: absolute; z-index: 3; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; }
.igs-bar { flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .35); }
.igs-bar__fill { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }

.igs-top { position: absolute; z-index: 3; top: 20px; left: 10px; right: 6px; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: 4px; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.igs-top::before { content: ""; position: absolute; z-index: -1; inset: -30px -10px -30px -16px; background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); pointer-events: none; }
.igs-who { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: .875rem; }
.igs-who__avatar { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; overflow: hidden; border-radius: 50%; background: #fff; }
.igs-who__avatar img { width: 78%; height: 78%; object-fit: contain; }
.igs-who__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.igs-who__time { opacity: .8; white-space: nowrap; }
.igs-tools { display: flex; flex: none; }
.igs-tool { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.igs-tool svg { width: 1.4rem; height: 1.4rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.igs-tool:focus-visible, .igs-insta:focus-visible, .igs-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Tipp-Flächen: links 30 % zurück, rechts weiter */
.igs-nav { position: absolute; z-index: 2; top: 70px; bottom: 70px; padding: 0; border: 0; background: none; cursor: pointer; }
.igs-nav--prev { left: 0; width: 30%; }
.igs-nav--next { right: 0; width: 70%; }

.igs-bottom { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 2.5rem 1rem 1rem; background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }
.igs-insta { padding: .45rem 1rem; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; color: #fff; font-size: .875rem; font-weight: 600; text-decoration: none; background: rgba(0, 0, 0, .25); }
.igs-insta:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.igs-insta[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .igs-ring, .igs-card__media img { transition: none; }
  .igs-open:hover .igs-ring, .igs--card .igs-open:hover .igs-card__media img { transform: none; }
}

/* ---------- Instagram-Bereich: Story-Kachel neben den Beiträgen (Variante B) ---------- */
.igs-m { --gap: clamp(8px, 1.2vw, 14px); --igs-ring: conic-gradient(from 210deg, #f9ce34, #ee2a7b, #6228d7, #ee2a7b, #f9ce34); --igs-seen: #cdbfa8; margin-top: var(--home-gap, 40px); }
:where(.com-content-article__body, .item-content, .module-card__body) > .igs-m:first-child { margin-top: 0; }
.igs-m__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2, 8px) var(--space-6, 24px); margin-bottom: var(--space-4, 16px); }
.igs-m .igs-m__title { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.igs-m .igs-m__title::before { content: ""; display: block; width: 2.5rem; height: 3px; margin-bottom: .6rem; border-radius: 3px; background: var(--amber, #c8811f); }
.igs-m__profile { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; color: var(--teal-deep, #1d6e72); text-decoration: none; }
.igs-m__profile:hover, .igs-m__profile:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.igs-m__profile svg { width: 1.35em; height: 1.35em; flex: none; }

/* Raster: ohne Story 3 Spalten; mit Story steht sie links über zwei Reihen */
.igs-m__grid { display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.igs-m--story .igs-m__grid { grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); }
.igs-m__item, .igs-m__story { margin: 0; min-width: 0; }
.igs-m__story { grid-row: span 2; }
.igs-m--story .igs-m__item:nth-child(n + 8) { display: none; } /* Story + 6 Beiträge */

/* Beiträge (wie Modul „Instagram (Feierling)“) */
.igs-m__link { position: relative; display: block; overflow: hidden; border-radius: 6px; background: var(--foam, #f1dfb4); color: #fff; }
.igs-m__link img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .5s ease; }
.igs-m__link:focus-visible, .igs-m__card:focus-visible { outline: 3px solid var(--teal-deep, #1d6e72); outline-offset: 3px; }
.igs-m__reel { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(20, 14, 8, .45); }
.igs-m__reel svg { width: 1rem; height: 1rem; margin-left: 2px; }
.igs-m__caption { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: .3rem; padding: 3rem 1rem 1rem; background: linear-gradient(to top, rgba(20, 14, 8, .78), rgba(20, 14, 8, 0)); font-size: .9375rem; line-height: 1.35; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.igs-m__text { font-family: var(--font-serif, Georgia, serif); font-weight: 600; }
.igs-m__date { font-size: .8125rem; opacity: .85; }
@media (hover: hover) {
  .igs-m__link:hover .igs-m__caption, .igs-m__link:focus-visible .igs-m__caption { opacity: 1; transform: none; }
  .igs-m__link:hover img { transform: scale(1.04); }
}

/* Story-Kachel */
.igs-m__card { position: relative; display: block; width: 100%; height: 100%; min-height: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background: var(--malt-deep, #4a2610); color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: var(--photo-shadow, 0 18px 40px -18px rgba(42, 29, 18, .45)); }
.igs-m__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.igs-m__card::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto 0; height: 90px; background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); }
.igs-m__bars { position: absolute; z-index: 2; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; }
.igs-m__bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .4); }
.igs-m__bars span.is-on { background: linear-gradient(90deg, #fff 40%, rgba(255, 255, 255, .4) 40%); }
.igs-m__who { position: absolute; z-index: 2; top: 22px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.igs-m__av { display: grid; place-items: center; flex: none; width: 28px; height: 28px; overflow: hidden; border-radius: 50%; background: #fff; }
.igs-m__av img { width: 78%; height: 78%; object-fit: contain; }
.igs-m__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.igs-m__play { position: absolute; z-index: 2; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; background: rgba(255, 255, 255, .2); backdrop-filter: blur(4px); }
.igs-m__play::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -7px; border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.igs-m__foot { position: absolute; z-index: 2; inset: auto 0 0 0; display: flex; align-items: center; gap: .75rem; padding: 3.5rem 1rem 1rem; background: linear-gradient(to top, rgba(20, 14, 8, .85), rgba(20, 14, 8, 0)); }
.igs-m__foot .igs-ring { width: 3.5rem; height: 3.5rem; }
.igs-m__foot .igs-avatar { border-color: var(--malt-deep, #4a2610); }
.igs-m__foot .igs-label { font-size: 1.0625rem; }
.igs-m__foot .igs-meta { color: rgba(255, 255, 255, .85); }
@media (hover: hover) { .igs-m__card:hover .igs-m__preview { transform: scale(1.03); } .igs-m__card:hover .igs-ring { transform: scale(1.05); } }

/* Tablet: Story + 2 Spalten (4 Beiträge) */
@media (max-width: 991.98px) {
  .igs-m--story .igs-m__grid { grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr)); }
  .igs-m--story .igs-m__item:nth-child(n + 6) { display: none; }
}
/* Handy: Story links über zwei Reihen, rechts zwei Beiträge, darunter je zwei */
@media (max-width: 599.98px) {
  .igs-m__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .igs-m--story .igs-m__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .igs-m--story .igs-m__item:nth-child(n + 6) { display: block; }
  .igs-m--story .igs-m__item:nth-child(n + 8) { display: none; }
  .igs-m__foot { flex-direction: column; align-items: flex-start; padding: 3rem .75rem .75rem; gap: .4rem; }
  .igs-m__foot .igs-ring { width: 2.75rem; height: 2.75rem; padding: 2px; }
  .igs-m__foot .igs-avatar { border-width: 2px; }
  .igs-m__foot .igs-label { font-size: .9375rem; line-height: 1.2; }
  .igs-m__foot .igs-meta { font-size: .75rem; }
  .igs-m__who .igs-m__name { display: none; }
}
@media (prefers-reduced-motion: reduce) { .igs-m__link img, .igs-m__caption, .igs-m__preview { transition: none; } .igs-m__link:hover img, .igs-m__card:hover .igs-m__preview { transform: none; } }