section#pmodel-subpage {
  max-width: 1350px;
  margin: 0 auto;
  padding: 40px 0px;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#pmodel-subpage article {
  max-width: 900px;
  padding-right: 50px;
}
#pmodel-subpage aside {
  max-width: 350px;
  min-width: 250px;
  padding: 0;
}
#pmodel-subpage aside .nav-wrapper {
  position: sticky;
  top: 100px;
}
@media (max-width: 767px) {
    section#pmodel-subpage {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #pmodel-subpage article {
        max-width: 100%;
        padding-right: 0px;
        padding-bottom: 50px;
    }
}

/* headline h1 */
#pmodel-subpage h1 {
    display:flex;
    align-items: flex-start;
    gap: 1rem;
}
@media (max-width: 1023px) {
    #pmodel-subpage h1 {
        font-size: 2.5rem;
    }
}
@media (max-width: 767px) {
    #pmodel-subpage h1 {
        font-size: 2rem;
        hyphens: auto;
    }
}
#pmodel-subpage .headline-step1 {
  color: #EC7223;
}
/* Step 2 */
#pmodel-subpage .headline-step2 {
  color: #517F91;
}
/* Step 3 */
#pmodel-subpage .headline-step3 {
  color: #DA3527;
}
/* Step 4 */
#pmodel-subpage .headline-step4 {
  color: #0B5542;
}
/* Step 5 */
#pmodel-subpage .headline-step5 {
  color: #8B1812;
}
/* Step 6 */
#pmodel-subpage .headline-step6 {
  color: #3CB49B;
}

/* Flexifield blocks */
/* what why how */
.what-why-how-block {
  margin: 50px 0;
}

/* youtube */
.youtube-embed {
	overflow: hidden;
	position: relative;
	max-width: 100%;
	height: auto;
	padding-bottom: 56.25%;
  margin: 50px 0 100px 0;
}
@media (max-width: 767px) {
    .youtube-embed {
        margin: 50px 0;
    }
}

.youtube-embed iframe,
.youtube-embed object,
.youtube-embed embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Card-grid */
#pmodel-subpage .card-grid-block {
  margin: 100px 0;
}
#pmodel-subpage .card-grid-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
#pmodel-subpage .card-grid-list.acast-grid {
  gap: 1.5rem;
}
#pmodel-subpage .card-grid-list .card-grid-item {
  display: flex;
  flex-direction: column;
}
#pmodel-subpage .card-grid-list .card-grid-item-link .card-grid-img {
  position: relative;
  overflow: hidden;
}

#pmodel-subpage .card-grid-list .card-grid-item-link .card-grid-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #EC7223;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

#pmodel-subpage .card-grid-list .card-grid-item-link:hover .card-grid-img::after {
  opacity: 0.5;
}
#pmodel-subpage .card-grid-list h3 {
  margin-top:20px;
  color: black;
}

@media (max-width: 640px) {
    #pmodel-subpage .card-grid-block {
       margin: 50px 0;
    }
  #pmodel-subpage .card-grid-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 800px) {
  #pmodel-subpage .card-grid-list.acast-grid {
    grid-template-columns: 1fr;
  }
}
#pmodel-subpage .card-grid-list .card-grid-item-descr {
  flex-grow: 1;
  color:black;
}
#pmodel-subpage .card-grid-list .card-grid-item-link {
  text-decoration: none;
}
#pmodel-subpage .card-grid-list .card-grid-button {
  border-radius: 9999px;
  border: 1px solid black;
  padding: 10px 30px;
  background-color: white;
  color: black;
  display: inline;
  margin-top:20px;
  align-self: flex-start;
}
#pmodel-subpage .card-grid-list .card-grid-item-link:hover .card-grid-button {
  background-color: #FCDD9D;
  color: black;
  border-color: #FCDD9D;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
#pmodel-subpage .extra-material-block {
  background-color: #FFF8F3;
  border-radius: 30px;
  padding: 30px;
}

/* SIDEBAR */
.nav-wrapper .headline, .nav-wrapper .headline a {
  color: white;
  background-color: black;
  text-transform: uppercase;
  font-family: 'Avenir Next Pro Heavy', sans-serif;
  font-size: 1.75rem;
  padding: 5px 10px 0;
  text-decoration: none;
  display:block;
}
.nav-wrapper .headline a:hover {
    color: white;
    text-decoration: none;
}
#pmodel-column.side-links {
  position: relative;
  background: url('../img/sidebar-line.svg') repeat-y left top;
  background-size: auto;
  padding-left: 17px; /* adjust as needed */
  padding-top:50px;
  padding-bottom:31px;
  width: fit-content;
  margin: 30px auto 0px auto;
}

#pmodel-column.side-links::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 67px; /* SVG width */
  height: 50px; /* SVG height */
  background: url('../img/sidebar-line-top.svg') no-repeat left top #ffffff;
  background-size: auto; /* keeps original size */
  z-index: 1;
}

#pmodel-column.side-links::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 43px; /* SVG width */
  height: 31px; /* SVG height */
  background: url('../img/sidebar-line-bottom.svg') no-repeat left bottom #ffffff;
  background-size: auto; /* keeps original size */
  z-index: 1;
}

#pmodel-column.side-links .side-link {
  display: flex;
  /* align-items: center; */
}
#pmodel-column.side-links .side-link .icon-circle {
  padding-right: 15px;
  padding-bottom: 10px;
}
#pmodel-column.side-links .side-link .nav-label {
  padding-bottom: 20px;
	font-family: 'Avenir Next Pro Light', sans-serif;
}
#pmodel-column.side-links .side-link:last-child .nav-label {
  padding-bottom: 0px;
}
#pmodel-column.side-links .side-link.active .nav-label {
  font-weight: bold;
}
#pmodel-column.side-links .side-link:hover .nav-label {
  font-weight: bold;
  color:initial;
}
#pmodel-column.side-links .side-link:hover {
  text-decoration: none;
}

/* hover on icons */
/* Shared transitions for all groups */
#pmodel-column svg[class^="side-step"] path {
  transition: all 0.3s ease;
}

/* Step 1 */
#pmodel-column .side-link.hovered svg .side-step1 {
  fill: #EEB88F;
}
/* Step 2 */
#pmodel-column .side-link.hovered svg .side-step2 {
  fill: #B9D5E7;
}
/* Step 3 */
#pmodel-column .side-link.hovered svg .side-step3 {
  fill: #E59992;
}
/* Step 4 */
#pmodel-column .side-link.hovered svg .side-step4 {
  fill: #88A9A0;
}
/* Step 5 */
#pmodel-column .side-link.hovered svg .side-step5 {
  fill: #BF8B88;
}
/* Step 6 */
#pmodel-column .side-link.hovered svg .side-step6 {
  fill: #A5D9CC;
}

/* #pmodel .pmodel-center h3 {
  text-align: center;
}

@media (max-width: 1279px) {
  #pmodel .pmodel-center h3{
    text-align: center;

  }
  #pmodel .pmodel-center {
    bottom: 37%;
  }
}
@media (max-width: 1023px) {
  #pmodel .pmodel-center h3{
    text-align: center;

  }
  #pmodel .pmodel-center {
    bottom: 37%;
  }
} */