/* ============================================================
   compacer Hero-Video – Geerbte Layout-Regeln aus hero.css
   (alle .hero Selektoren umbenannt zu .hero-video,
   hero--blog/hero--listing entfernt, nicht relevant)
   ============================================================ */

.hero-video{
padding:10rem 0;
position:relative
}

@media(max-width: 1023px){
.hero-video{
padding:9rem 0
}

}

.hero-video--breadcrumbs-only{
padding-bottom:1.6rem
}

.hero-video--breadcrumbs-only .hero__breadcrumbs{
margin-bottom:0
}

@media(min-width: 1350px){
.hero-video .layout--row{
grid-template-columns:minmax(0, 1fr) 50%;
align-items:center
}

}

@media(min-width: 1024px){
.hero-video .layout--row--reversed>.hero__image{
order:10
}

}

.hero-video .layout--row figure.hero__image.rounded-edges .image__content{
border-radius:7.2rem 0rem 7.2rem 7.2rem
}

@media(min-width: 1024px){
.hero-video .layout--row figure.hero__image.image-stretched .image__content{
height:47.9rem;
object-fit:cover
}

}

.hero-video .layout--column{
text-align:center
}

.hero-video .layout--column .hero__image{
max-width:100%
}

.hero-video .layout--column figure.hero__image{
max-width:70rem;
text-align:center;
border-radius:7.2rem 7.2rem 0rem 7.2rem;
overflow:hidden
}

.hero-video .layout--column .hero__links{
justify-content:center
}

.hero-video .layout--column .heading{
width:100%
}

.hero-video .layout--column .copy{
text-align:center;
max-width:80%
}

@media(min-width: 1024px){
.hero-video .layout--column .copy{
margin:0 auto
}

}

.hero__background-image{
position:absolute;
bottom:0;
z-index:0;
width:fit-content;
display:none
}

@media(min-width: 1024px){
.hero__background-image{
display:block
}

}

.hero__side-image{
display:none;
position:absolute;
z-index:0
}

@media(min-width: 1024px){
.hero__side-image{
display:block
}

}

.hero__side-image--left{
left:0;
top:15rem
}

.hero__side-image--top{
top:0;
right:1rem
}

.hero__side-image--right{
right:0;
bottom:2rem
}

.hero__breadcrumbs{
display:flex;
gap:.8rem;
grid-column:span 2;
align-self:start
}

.hero__breadcrumbs-item{
font-size:1.4rem;
font-weight:500;
line-height:150%
}

.hero__breadcrumbs-item--active{
font-weight:700
}

.hero__label{
font-size:1.4rem;
font-weight:400;
line-height:120%;
text-transform:uppercase;
align-self:start
}

.hero__links{
display:flex;
flex-wrap:wrap;
gap:2.4rem
}

.hero__links .link{
width:100%
}

@media(min-width: 1024px){
.hero__links .link{
width:fit-content
}

}

.hero-video .copy{
display:flex;
flex-direction:column;
gap:2.4rem;
margin:0 auto;
width:100%;
align-self:center;
height:100%;
z-index:1
}

@media(min-width: 1024px){
.hero-video .copy{
max-width:80%;
margin-left:0
}

.hero-video .copy:not(.hero-video .copy:has(.hero__breadcrumbs)){
margin-top:20rem
}

}

@media(max-width: 1349px){
.hero-video .copy{
text-align:center;
align-items:center;
margin:0 auto
}

}

.hero-video .copy .rich-text{
color:var(--color-blue-dark, #002e59);
font-size:1.8rem;
font-weight:400;
line-height:160%
}

.hero__author{
display:flex;
gap:1.6rem;
align-items:center;
margin-bottom:1.6rem
}

.hero__author-avatar{
width:6.2rem;
height:6.2rem;
border-radius:3.1rem;
overflow:hidden
}

.hero__author-avatar .image__content{
width:100%;
height:100%;
object-fit:cover
}

.hero__author-details{
display:flex;
flex-direction:column;
gap:.8rem
}

.hero__author-details .timestamp{
color:var(--color-blue-dark, #002e59);
font-size:1.4rem;
font-weight:400;
line-height:120%
}

.hero__author-name{
color:var(--color-blue, #00417d);
font-size:1.4rem;
font-weight:700;
line-height:120%
}

.hero__image{
z-index:1;
position:relative;
width:100%;
max-width:70rem;
margin:0 auto;
text-align:center
}

@media(min-width: 1024px){
.hero__image{
text-align:left
}

}

.hero__image .image__content{
width:100%
}

.hero__image .hero__grid-layout{
display:grid;
gap:2.4rem;
grid-template-columns:1fr 1fr;
width:100%
}

@media(min-width: 1024px){
.hero__image .hero__grid-layout{
grid-template-columns:1fr 1fr 1fr;
margin-top:9rem
}

}

.hero__image .hero__grid-layout .rounded-container{
background-color:rgba(0,0,0,0);
padding:0
}

.hero__image .hero__grid-layout-image{
display:block;
width:100%;
overflow:hidden;
--rounded-corner: 1.821rem
}

.hero__image .hero__grid-layout-image .image{
height:100%
}

.hero__image .hero__grid-layout-image .image .image__content{
height:100%;
object-fit:cover
}

.hero__image .hero__grid-layout-image:nth-child(1){
width:17.3rem;
height:12.6rem;
align-self:end;
justify-self:end;
padding:0
}

@media(max-width: 1023px){
.hero__image .hero__grid-layout-image:nth-child(1){
max-width:13rem;
max-height:9.4rem;
padding:0;
width:100%;
height:100%
}

}

.hero__image .hero__grid-layout-image:nth-child(2){
width:24.4rem;
height:17.6rem;
padding:0
}

@media(max-width: 1023px){
.hero__image .hero__grid-layout-image:nth-child(2){
max-width:18.2rem;
max-height:13.2rem;
padding:0;
width:100%;
height:100%
}

}

.hero__image .hero__grid-layout-image:nth-child(3){
width:20.5rem;
height:15rem;
align-self:end;
padding:0
}

@media(max-width: 1023px){
.hero__image .hero__grid-layout-image:nth-child(3){
max-width:15.4rem;
max-height:11.2rem;
padding:0;
justify-self:end;
width:100%;
height:100%
}

}

.hero__image .hero__grid-layout-image:nth-child(4){
width:19.6rem;
height:13.1rem;
padding:0;
justify-self:end
}

@media(max-width: 1023px){
.hero__image .hero__grid-layout-image:nth-child(4){
max-width:15.6rem;
max-height:10.4rem;
padding:0;
justify-self:start;
width:100%;
height:100%
}

}

.hero__image .hero__grid-layout-image:nth-child(5){
width:23.1rem;
height:17.6rem;
padding:0;
justify-self:start
}

@media(max-width: 1023px){
.hero__image .hero__grid-layout-image:nth-child(5){
max-width:18.4rem;
max-height:14rem;
padding:0;
justify-self:end;
width:100%;
height:100%
}

}

.hero__image .hero__grid-layout-image:nth-child(6){
width:17.3rem;
height:13.1rem;
padding:0
}

@media(max-width: 1023px){
.hero__image .hero__grid-layout-image:nth-child(6){
max-width:13.8rem;
max-height:10.4rem;
padding:0;
width:100%;
height:100%
}

}

.hero__breadcrumbs{
display:flex;
align-items:center;
gap:.8rem;
color:var(--color-blue-dark);
margin-bottom:9.6rem
}

@media(max-width: 1023px){
.hero__breadcrumbs{
margin-bottom:6rem
}

}

@media(max-width: 767px){
.hero__breadcrumbs{
margin-bottom:3rem;
flex-wrap:wrap
}

}

.hero__breadcrumbs>:last-child{
font-weight:bold
}

}

}

}

}

}

}

/* Padding/Margin werden vollständig über das HubSpot Stile-Tab
   bzw. die Content-Felder section_padding/section_margin gesteuert */
.hero-video {
  padding: 0;
}

/* ============================================================
   Hero – Video Preview & Overlay
   ============================================================ */

/* ── Video-Container: compacer Box (3 runde Ecken, 1 eckig) ── */
.hv__video-container {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  border-radius: 28px 28px 28px 0;   /* Standard: unten-links eckig */
  overflow: hidden;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  aspect-ratio: 16 / 10;             /* Angenähert an typische Hero-Bilder */
  background: #c8d5e8;
}

/* Swap-Columns: Spiegelung → unten-rechts eckig */
.hero-video .layout--row--reversed .hv__video-container {
  border-radius: 28px 28px 0 28px;
}

/* ── Vorschaubild (unterstützt auch GIF) ── */
.hv__video-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.hv__video-container:hover .hv__video-thumb,
.hv__video-container:focus-visible .hv__video-thumb {
  transform: scale(1.03);
}

/* ── Zentraler Play-Button ── */
.hv__video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Halbtransparente Abdunklung über dem Bild */
  background: rgba(0, 65, 125, 0.18);
  transition: background 0.25s ease;
}

.hv__video-container:hover .hv__video-play,
.hv__video-container:focus-visible .hv__video-play {
  background: rgba(0, 65, 125, 0.28);
}

/* Play-Icon-Kreis */
.hv__video-play svg {
  width: 72px;
  height: 72px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  padding: 16px 14px 16px 18px;   /* optisch zentriert: rechts mehr Platz */
  color: #00417d;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  flex-shrink: 0;
}

.hv__video-container:hover .hv__video-play svg,
.hv__video-container:focus-visible .hv__video-play svg {
  transform: scale(1.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.32);
}

/* ── Video Overlay (Desktop: Modal | Mobile: Fullscreen) ── */
.hv-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hv-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Dunkler Hintergrund */
.hv-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 20, 50, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

/* Modal-Box Desktop */
.hv-overlay__box {
  position: relative;
  z-index: 1;
  width: 90vw;
  max-width: 1000px;
  background: #000;
  border-radius: 16px;
  overflow: visible;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7);
  transform: scale(0.92) translateY(12px);
  transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.hv-overlay.is-open .hv-overlay__box {
  transform: scale(1) translateY(0);
}

/* 16:9 Iframe-Wrapper */
.hv-overlay__iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 16px;
  overflow: hidden;
}

.hv-overlay__iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Schließen-Button */
.hv-overlay__close {
  position: absolute;
  top: -50px;
  right: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 0.22s ease;
}

.hv-overlay__close:hover,
.hv-overlay__close:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}

/* ── Mobile: echter Fullscreen-Style ── */
@media (max-width: 767px) {
  .hv-overlay {
    align-items: stretch;
    justify-content: stretch;
  }

  .hv-overlay__box {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hv-overlay__iframe-wrap {
    border-radius: 0;
  }

  .hv-overlay__close {
    top: 12px;
    right: 12px;
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.4);
  }
}