/* Statische Blog-Artikelseiten (Nachbau der Elfsight-Detailansicht) */
.blog-article { max-width: 760px; margin: 0 auto; padding: 48px 24px 64px; }
.blog-article__back { display: inline-block; margin-bottom: 28px; color: #0e3693; font-family: 'Fira Sans', ui-sans-serif, system-ui, sans-serif; font-size: 15px; font-weight: 600; text-decoration: none; }
.blog-article__back:hover { text-decoration: underline; }
.blog-article__title { font-family: 'Fira Sans', ui-sans-serif, system-ui, sans-serif; font-size: 28px; line-height: 1.3; font-weight: 700; color: #161616; margin: 0 0 16px; }
.blog-article__desc { font-family: 'Fira Sans', ui-sans-serif, system-ui, sans-serif; font-size: 16px; line-height: 1.5; font-weight: 400; color: #161616; margin: 0 0 12px; }
.blog-article__date { font-family: 'Fira Sans', ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 400; color: rgba(17,17,17,0.55); margin: 0 0 24px; }
.blog-article__hero { width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 0 28px; }
.blog-article__content { font-family: 'Fira Sans', ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.65; color: #222; }
.blog-article__content p { margin: 0 0 16px; }
.blog-article__content img { max-width: 100%; height: auto; border-radius: 8px; margin: 12px 0; display: block; }
.blog-article__content a { color: #0e3693; }
@media (max-width: 600px) { .blog-article__title { font-size: 24px; } .blog-article { padding: 32px 16px 48px; } }

/* Fliesstext-Elemente des Redaktionssystems.
   Fira Sans liegt lokal nur in 400 und 700 vor - Ueberschriften werden
   deshalb ueber die Groesse gestaffelt, nicht ueber Zwischengewichte. */
.blog-article__content h2 { font-size: 21px; line-height: 1.35; font-weight: 700; color: #161616; margin: 32px 0 12px; }
.blog-article__content h3 { font-size: 17px; line-height: 1.4; font-weight: 700; color: #161616; margin: 24px 0 8px; }
.blog-article__content h2:first-child, .blog-article__content h3:first-child { margin-top: 0; }
.blog-article__content ul, .blog-article__content ol { margin: 0 0 16px; padding-left: 22px; }
.blog-article__content li { margin: 0 0 6px; }
.blog-article__content li:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .blog-article__content h2 { font-size: 19px; } .blog-article__content h3 { font-size: 16px; } }

.blog-article__gallery { margin: 0 0 28px; }
.blog-article__gallery-main { position: relative; border-radius: 8px; overflow: hidden; cursor: zoom-in; aspect-ratio: 16 / 9; background: #f2f2f2; }
.blog-article__gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-article__gallery-main--natural { aspect-ratio: auto; cursor: zoom-in; }
.blog-article__gallery-main--natural img { height: auto; object-fit: contain; }
.blog-article__gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: rgba(17,17,17,0.55); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.blog-article__gallery-nav:hover { background: rgba(14,54,147,0.85); }
.blog-article__gallery-nav--prev { left: 12px; }
.blog-article__gallery-nav--next { right: 12px; }
.blog-article__gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.blog-article__gallery-thumbs[hidden] { display: none; }
.blog-article__gallery-thumb { flex: 0 0 auto; width: 84px; height: 60px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: #f2f2f2; opacity: 0.65; transition: opacity .15s, border-color .15s; }
.blog-article__gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-article__gallery-thumb:hover { opacity: 1; }
.blog-article__gallery-thumb.is-active { border-color: #0e3693; opacity: 1; }
@media (max-width: 600px) { .blog-article__gallery-main { aspect-ratio: 4 / 3; } .blog-article__gallery-thumb { width: 64px; height: 46px; } }

.blog-gallery-lightbox { position: fixed; inset: 0; background: rgba(10,10,10,0.92); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.blog-gallery-lightbox.is-open { opacity: 1; visibility: visible; }
.blog-gallery-lightbox__img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 4px; }
.blog-gallery-lightbox__close { position: absolute; top: 18px; right: 24px; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,0.35); border-radius: 50%; background: rgba(17,17,17,0.65); color: #fff; font-size: 18px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.blog-gallery-lightbox__close:hover { background: rgba(14,54,147,0.85); }
.blog-gallery-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,255,255,0.35); border-radius: 50%; background: rgba(17,17,17,0.65); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.blog-gallery-lightbox__nav:hover { background: rgba(14,54,147,0.85); }
.blog-gallery-lightbox__nav--prev { left: 16px; }
.blog-gallery-lightbox__nav--next { right: 16px; }
body.blog-gallery-lock-scroll { overflow: hidden; }
@media (max-width: 600px) { .blog-gallery-lightbox__nav { width: 38px; height: 38px; font-size: 20px; } }

/* Hochformat-Bilder: ganzes Motiv zeigen statt auf 16:9 zu beschneiden */
.blog-article__hero--portrait { width: auto; max-width: 100%; max-height: 640px; margin-left: auto; margin-right: auto; }
.blog-article__gallery-main--portrait { aspect-ratio: 4 / 3; }
.blog-article__gallery-main--portrait img { object-fit: contain; }

/* Videos (Reels) in der Galerie: Hochformat komplett zeigen, abspielen statt Lightbox */
.blog-article__gallery-main video { width: 100%; height: 100%; object-fit: contain; display: block; background: #111; }
.blog-article__gallery-main video[hidden], .blog-article__gallery-main img[hidden] { display: none; }
.blog-article__gallery-main.is-video { background: #111; cursor: default; }
/* Story-Format (9:16): Rahmen so breit wie das Video, ohne seitliche Balken, zentriert */
.blog-article__gallery-main--video { aspect-ratio: 9 / 16; width: min(100%, calc(min(78vh, 680px) * 9 / 16)); height: auto; margin: 0 auto; }
.blog-article__gallery-main--video video { object-fit: cover; }
.blog-article__gallery-thumb--video { position: relative; }
.blog-article__gallery-thumb--video::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; margin: -8px 0 0 -5px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); pointer-events: none; }

/* Story-Player (Reels im Instagram-Story-Look, Video vom eigenen Server) */
.story-player { --story-radius: 14px; position: relative; width: min(100%, calc(min(78vh, 680px) * 9 / 16)); aspect-ratio: 9 / 16; margin: 0 auto 28px; border-radius: var(--story-radius); overflow: hidden; isolation: isolate; background: #111; box-shadow: 0 12px 32px rgba(17,17,17,0.18); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; font-family: 'Fira Sans', ui-sans-serif, system-ui, sans-serif; }
/* Zweiter Abschnitt (Video + Text) im selben Beitrag: Abstand zum vorherigen Text */
.blog-article__content + .story-player { margin-top: 44px; }
.story-player__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--story-radius); clip-path: inset(0 round var(--story-radius)); }
.story-player__shade { position: absolute; inset: 0; pointer-events: none; border-radius: var(--story-radius); clip-path: inset(0 round var(--story-radius)); background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 74%, rgba(0,0,0,0.5) 100%); }
.story-player__top { position: absolute; top: 0; left: 0; right: 0; padding: 10px 10px 0; }
.story-player__progress { position: relative; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.38); cursor: pointer; touch-action: none; }
.story-player__progress::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; }
.story-player__progress span { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: inherit; background: #fff; }
.story-player__progress:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.story-player__progress-group { display: flex; gap: 4px; }
.story-player__progress-group .story-player__progress { flex: 1 1 0; }
.story-player__header { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.story-player__account { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin-right: auto; color: #fff; text-decoration: none; }
.story-player__avatar { flex: 0 0 auto; width: 36px; height: 36px; padding: 2px; border-radius: 50%; background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); }
.story-player__avatar img { width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; background: #fff; object-fit: cover; display: block; box-sizing: border-box; }
.story-player__name { font-size: 14px; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,0.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-player__account:hover .story-player__name { text-decoration: underline; }
.story-player__icon { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.story-player__icon:hover { background: rgba(255,255,255,0.16); }
.story-player__icon svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }
.story-player__icon .icon-muted, .story-player.is-muted .story-player__icon .icon-sound { display: none; }
.story-player.is-muted .story-player__icon .icon-muted { display: block; }
.story-player__play { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,0.42); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .2s ease, transform .2s ease; }
.story-player__play svg { width: 30px; height: 30px; }
.story-player__play .icon-replay, .story-player.is-ended .story-player__play .icon-play { display: none; }
.story-player.is-ended .story-player__play .icon-replay { display: block; }
.story-player.is-playing .story-player__play { opacity: 0; transform: scale(0.85); }
.story-player.is-playing .story-player__play:focus-visible { opacity: 1; transform: none; }
.story-player__play:focus-visible, .story-player__icon:focus-visible, .story-player__cta:focus-visible, .story-player__account:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.story-player__bottom { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.story-player__cta { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,0.94); color: #161616; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
.story-player__cta:hover { background: #fff; }
.story-player__cta svg { width: 18px; height: 18px; flex: 0 0 auto; }
.story-player.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: story-spin .8s linear infinite; pointer-events: none; }
@keyframes story-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .story-player.is-loading::after { animation-duration: 2.4s; } .story-player__play { transition: none; } }
.story-player:fullscreen { --story-radius: 0px; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; margin: 0; background: #000; }
.story-player:fullscreen > .story-player__video, .story-player:fullscreen > .story-player__shade, .story-player:fullscreen > .story-player__top, .story-player:fullscreen > .story-player__bottom { left: 50%; right: auto; width: min(100vw, 100vh * 9 / 16); transform: translateX(-50%); }
.story-player:-webkit-full-screen { --story-radius: 0px; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; margin: 0; background: #000; }
.story-player:-webkit-full-screen > .story-player__video, .story-player:-webkit-full-screen > .story-player__shade, .story-player:-webkit-full-screen > .story-player__top, .story-player:-webkit-full-screen > .story-player__bottom { left: 50%; right: auto; width: min(100vw, 100vh * 9 / 16); transform: translateX(-50%); }