/* CMS-Bloecke ([hero], [youtube_playlist]) und Huelle fuer importierte Produktseiten (.cms-sat).
   Eigenstaendig, nutzt nur Karley-CI-Farben. Nach karley-ci.css laden. */

/* --- [hero] ------------------------------------------------------------------ */
.cms-hero { position: relative; width: 100vw; margin: 0 0 2rem calc(50% - 50vw); overflow: hidden; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; }
body:has(.cms-hero) { overflow-x: clip; }
.cms-hero__bg { position: absolute; inset: 0; background: #1f2d3d center / cover no-repeat; }
.cms-hero__overlay { position: absolute; inset: 0; background: rgba(23, 29, 38, .78); }
.cms-hero__particles { position: absolute; inset: 0; z-index: 2; }
.cms-hero__inner { position: relative; z-index: 3; max-width: 980px; padding: 4rem 1.25rem 5rem; }
.cms-hero__title { color: #fff; font-weight: 800; font-size: clamp(2.2rem, 6vw, 4.5rem); line-height: 1.05; margin: 0 0 .6rem; animation: cmsBlurIn 1s ease .3s both; }
.cms-hero__kicker { color: #fff; font-size: 1.15rem; margin: 0 0 .6rem; animation: cmsBlurIn 1s ease .6s both; }
.cms-hero__text { color: rgba(255, 255, 255, .92); font-size: 1.05rem; max-width: 760px; margin: 0 auto; animation: cmsBlurIn 1s ease .8s both; }
.cms-hero__btn { display: inline-block; margin-top: 2rem; padding: .75rem 1.9rem; border: 2px solid #fff; border-radius: 999px; color: #fff; font-weight: 600; text-decoration: none; transition: background .2s, border-color .2s; }
.cms-hero__btn:hover, .cms-hero__btn:focus-visible { background: #264796; border-color: #264796; color: #fff; }
.cms-hero__btn i { margin-left: .35rem; font-size: .8em; }
.cms-hero__scroll { position: absolute; z-index: 3; left: 50%; bottom: 1.25rem; transform: translateX(-50%); width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.cms-hero__scroll:hover { background: rgba(255, 255, 255, .3); color: #fff; }
@keyframes cmsBlurIn { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .cms-hero__title, .cms-hero__kicker, .cms-hero__text { animation: none; } }

/* --- [youtube_playlist] ------------------------------------------------------ */
.yt-playlist .yt-card { height: 100%; }
.yt-playlist .yt-card-title { font-size: .95rem; line-height: 1.35; margin: .6rem 0 0; }

/* --- Importierte Satelliten-Seiten (.cms-sat): Porto-13-Klassen minimal nachgebildet ---- */
.cms-sat .section { padding: 2.5rem 0; }
.cms-sat .section-default { background: #f6f7f9; }
.cms-sat .section-parallax { background-size: cover; background-position: center; background-attachment: fixed; position: relative; isolation: isolate; }
.cms-sat .section-parallax::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(23, 29, 38, .72); }
.cms-sat .section-parallax, .cms-sat .section-parallax p, .cms-sat .section-parallax li { color: #fff; }
.cms-sat .section-parallax h1, .cms-sat .section-parallax h2, .cms-sat .section-parallax h3, .cms-sat .section-parallax h4 { color: #fff; }
.cms-sat .section-parallax a { color: #a9c6ff; }
.cms-sat .section-center { text-align: center; }
.cms-sat .heading { margin: 2rem 0 1.25rem; }
.cms-sat .heading-border.heading-middle-border { display: flex; align-items: center; gap: 1.25rem; }
.cms-sat .heading-border.heading-middle-border::before,
.cms-sat .heading-border.heading-middle-border::after { content: ""; flex: 1; border-top: 1px solid #dde1e6; }
.cms-sat .heading-border.heading-middle-border > * { margin: 0; text-align: center; }
.cms-sat .list { list-style: none; padding-left: 0; }
.cms-sat .list li { margin-bottom: .45rem; }
.cms-sat .list-icons li > i:first-child { margin-right: .55rem; color: #264796; }
.cms-sat .btn-outline { background: transparent; border: 2px solid #264796; color: #264796; }
.cms-sat .btn-outline:hover { background: #264796; color: #fff; }
.cms-sat .btn-rounded { border-radius: 999px; }
.cms-sat .btn-with-arrow span { margin-left: .5rem; }
.cms-sat .mb-none { margin-bottom: 0 !important; }
.cms-sat .mt-xlg { margin-top: 2.5rem; }
.cms-sat .text-color-light { color: #fff; }
.cms-sat .font-weight-bold { font-weight: 700; }
.cms-sat .h-align-center { text-align: center; }
.cms-sat img { max-width: 100%; height: auto; }
.cms-sat table { max-width: 100%; }