:root {

  --primary: #00845c;
  --primary-rgb: 0, 132, 92;
  
  --light-green: #E6F6F1;  
  --dark-green: #007E58;
  --dark-green-rgb: 0, 126, 88;
  --light-gray: #F5F5F5;
  --light-medium-gray: #F5F5F5;
  --medium-gray: #B2B2B2;
  --dark-gray: #707070;
  
  --error: red;

  --body-font-family: "tt-commons-pro", sans-serif;
  --font-demibold: 500;
  --font-medium: 400;
  --font-regular: 300;
  --font-light: 200;

  --text-xs: 0.813rem; 
  --text-sm: 1rem;
  --text-base: 1.063rem;
  --text-md: 1.125rem;
  --text-lg: 1.188rem; 
  --text-xl: 1.375rem;
  --text-2xl: 1.5rem; 
  --text-3xl: 1.875rem;
  --text-4xl: 2.5rem; 

  --body-font-size: var(--text-base);
  --body-font-size-lg: var(--text-base);
  --body-font-weight: var(--font-medium);
  --body-line-height: 1.5;
  --body-color: #000;
  --body-text-align: left;
  --body-bg: #fff;

  --frame-background: #fff;
  --frame-background-lght-gray: #fff;
  --frame-spacing-sm: 4rem;
  --frame-spacing-lg: 6rem;

  
    --frame-spacing-top: var(--frame-spacing-lg);
    --frame-spacing-bottom: var(--frame-spacing-lg);



  --hr-margin-y: 1rem;
  --hr-color: var(--primary); 
  --hr-border-width: 2px;
  --hr-border-color: var(--primary);
  --hr-opacity: 1;

  --dt-font-weight: 700;

  --paragraph-margin-bottom: 1.5rem;
  --font-weight-bolder: 700;
  --small-font-size: 0.875rem;

  --link-color-rgb: var(--primary-rgb);
  --link-opacity: 1;
  --link-hover-color-rgb: var(--primary-rgb);

  --header-height-xs: 57px;
  --shrinked-header-height-xs: 65px;
  --header-height-lg: 128px;
  --shrinked-header-height-lg: 80px;

  --grid-gap: 1rem;

  --altcha-color-text: #000;

  --h1-font-size-lg: 4.625rem;
  --h1-line-height-lg: 5rem;

  --h2-font-size-lg: 3.813rem;
  --h2-line-height-lg: 4.75rem;

  --h3-font-size-lg: 2.5rem;
  --h3-line-height-lg: 3.125rem;

  --h4-font-size-lg: 2.188rem;
  --h4-line-height-lg: 2.75rem;

  --h5-font-size-lg: 1.5rem;
  --h5-line-height-lg: 1.875rem;
}


.stage-video {
  position: relative;
  .stage-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;    

    video {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(126deg, #3C3C3B 0%, rgba(60,60,59,0.00) 77%);
    }
  }
  
  .container {
    position: relative;
    z-index: 2;
    min-height: 300px;
  }
  .stage-content {
    padding: 2rem 0;

    h1 {
      font-weight: 300;
      font-size: 37px;
      line-height: 47px;
      margin: 0;
      padding: 0;      
      color: #fff;
    }    
    
    h4.topline {
      color: #00845c;
      margin-bottom: 0.25rem;
    }
  } 
    
  &.stage-text-light {     
    .stage-content {
      h1 {
        color: #fff;
      }
    }       
  }               
}

.image-teaser {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(12, 1fr);
  img {
    width: 100%;
    height: auto;
  }
  
  .teaser-image {
    grid-column: 1 / span 6;
  }

  .teaser-text {
    grid-column: 7 / span 6;
  }        

  &.teaser-text-image {
    .teaser-image {
      grid-column: 7 / span 6;
      grid-row: 1;
    }
  
    .teaser-text {
      grid-column: 1 / span 6;
      grid-row: 1;
      text-align: right;
    } 
  }
  
  align-items: center;
  .teaser-text {
    grid-column: 7 / span 6;
  }        

  &.teaser-text-image {
    .teaser-text {
      grid-column: 1 / span 6;        
    } 
  }
  

  .teaser-topline {
    color: var(--primary);
    padding: 0;
    margin: 0;
    margin-bottom: .25rem;
  }

  h2 {
    margin-bottom: .75rem;
  }

  p {
    margin-bottom: 2rem;    
  }
  .teaser-text > *:last-child {
    margin-bottom: 0;
  }  
}



.key-figures {
  padding: 0;
  margin: 0;
  list-style: none;
  li {
    display: grid;        
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr;  
    
    > div {
      padding: 0.5rem 1.5rem;
      text-align: center;
      border-bottom: 1px solid var(--medium-gray);
    }
  }
  .keyfigure-title {    
    grid-row: 1;
    color: var(--primary);    
    text-align: right;
    grid-column: 1 / span 1;
    
  }
  .value-current {
    background-color: var(--light-green);
    grid-column: 2;
    grid-row: 1;
    
  }
  .value-last {
    grid-column: 3;
    grid-row: 1;    
  }

  li:first-child {
    font-weight: bold;
  }
}


.bg-image-teaser {  
  position: relative;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-weight: var(--font-medium);
  border-radius: 1.5rem;
  overflow: hidden;
  
  height: 350px;
  display: flex;
  align-items: flex-end;
  border-radius: 0;
  
  .teaser_background {    
    position: absolute;
    inset: 0;
    z-index: 0;    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .container {
    position: relative;    
  }
  .teaser-wrap {
  
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(12, 1fr);
    .teaser {
      grid-column: 1 / span 6;
    }    
  }
  &.textbox-right {
    .teaser-wrap {      
      .teaser {
        grid-column: 7 / span 6;
      }      
    }
  }
  .teaser-card.card {
    background-color: var(--gray-100);    
    background-color: #fff;
    border-radius: 1rem;
    padding: 1rem;
    
    div > *:last-child {
      margin-bottom: 0;
    }
    .teaser-topline {
      color: var(--primary);
      padding: 0;
      margin: 0;
      margin-bottom: .25rem;
    }
  
    h3 {
      margin-bottom: 1rem;
    }

    .card-body {
      padding-top: 1rem;
    }
    .card-footer {
      padding-top: 2rem;
    }
  }
}


.portal-stage-content-wrap {
  position: relative;  
  display: grid;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);

     
  .stage-image-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 0;    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .container {
    position: relative;
    z-index: 2;
    min-height: 300px;
  }
  .stage-content {
    padding: 2rem 0;

    h1 {
      font-weight: 300;
      font-size: 37px;
      line-height: 47px;
      margin: 0;
      padding: 0;      
      color: #fff;
    }    
    
    h4.topline {
      color: #00845c;
      margin-bottom: 0.25rem;
    }
  } 
    
  .portal-stage-content {
    grid-column: 1 / span 2;
    grid-row: 1;
  }

  .portal-stage-linklist {
    grid-column: 3 / span 1;
    grid-row: 1;
  }
  .stage-image-wrap {
    width: calc((100% / 3) * 2 - .5rem);
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(126deg, #3C3C3B 0%, rgba(60,60,59,0.00) 77%);
    }
  }  
}

.portal-stage-linklist ul {
  padding: 0;  
  margin: 0;
  list-style: none;
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .5rem;
  h5 {
    hyphens: auto;
  }
  .link-list-item {
    position: relative;    
    height: 100%;
    position: relative;
    background-color: #F5F5F5;      
    border-radius: 1rem;
    color: #000;    
    padding: 1rem;             
    p {
      margin-bottom: 0;      
    }
  } 
}

.frame-type-dn_textheader {
  h1 {  
    font-size: var(--h1-font-size-lg);
    line-height: var(--h1-line-height-lg);
  }

  h1 {
    .topline {
      display: block;
      color: var(--primary);
      font-weight: var(--font-medium);          
      font-size: var(--h4-font-size-lg);
      line-height: var(--h4-line-height-lg);      
    }
    .headline {
      display: block;
    }
  }
}

.frame-type-dn_hashtags {
  background-color: var(--light-green);
  padding: 2rem;
  text-align: center;
  font-size: var(--text-3xl);
}


.frame-type-dn_textcolumn  {
  

    .text-column {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
      -webkit-column-gap: 2rem;
      -moz-column-gap: 2rem;
      column-gap: 2rem;
    }  
}



.timeline-item h2 {
  color: #00845c;
}

.timeline-item,
.timeline-item h3 {
  margin-top: 1rem !important;
}

.text-image-block {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(12, 1fr);    
  .text {
    grid-column: 1 / span 6;    
  }
  .image  {
    grid-column: 7 / span 6;    
  }
}

.management-card {
  display: flex;  
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;  
  width: calc(2 * 100% / 3);
  
  .management-image {
    flex: 0 0 auto;
    max-width: 100%;
    
    img {
      width: 100%;
      height: auto;
    }
  }
  p {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin: 0;
    padding: 0;
  }
  .management-card-topline {
    color: var(--primary);
  }
  h3 {
    font-size: var(--text-md);
    font-weight: var(--font-demibold);
    line-height: 1.5rem;
    margin-bottom: 0.5rem;
  }  
}

.icon-list-item {
  min-height: 2.5rem;
  padding: .75rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  .icon {
    flex: 0 0 auto;
    min-width: 40px;
    display: flex;
    place-content: center;
    font-size: 2rem;
  }
}

.supervisory-board {
  ul {
    --grid-gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;

    
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--grid-gap);      
    --grid-columns: 3;    
      
    li {
      width: calc(100%/var(--grid-columns) - (var(--grid-gap)*(var(--grid-columns) - 1))/var(--grid-columns));
      border-bottom: 1px solid var(--primary);
      padding: 1rem 0;
    }

  }
  .person-header {
    margin-bottom: 1rem;
    h6 {
      margin: 0;
    }
  }
  p {
    margin: 0;
  }
}

.link-list-gallery {
  --grid-columns: 2;
  --grid-gap: 1rem;  
  
  ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 2rem;
    margin: 0;
    padding: 0;
    align-items: stretch;
  }
  .link-list-item {
    width: calc(100%/var(--grid-columns) - (var(--grid-gap)*(var(--grid-columns) - 1))/var(--grid-columns));
  }
  a {
    text-decoration: none;
    &:hover {
      h3 .ce-uploads-fileName {
        text-decoration: underline;
      }
    }
  }
  .link-preview-image {
    aspect-ratio: 3 / 2;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .link-text {
    padding: 1rem 0;
    border-bottom: 1px solid var(--primary);
    p.topline {
      color: var(--primary);
      margin: 0 0 .25rem;      
    }
    h3 {
      font-size: var(--text-md);
      display: flex;
      align-items: top;
      gap: 1rem;
      .link-title {
        color: var(--body-color);
        margin-right: auto;
      }
      .link-type {
        text-transform: uppercase;
        font-weight: var(--font-medium);
      }
    }
  }
}

.video-wrap {  
  .video-file {
    aspect-ratio: 16 / 9;
    video {
      aspect-ratio: 16 / 9;
      width: 100%;      
    }    
  }
}


.rent-chart {
  text-align: right;
  overflow: auto;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  img {
    width: auto;
    height: 320px;
  }
}

.rent-chart-wrap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1rem;
  align-items: center;
  .chart-legend {
    grid-column: 1 / span 3; 
    grid-row: 1;
  }
  .rent-chart {
    grid-column: 5 / span 8; 
    grid-row: 1;
    padding-bottom: 0;
    margin-bottom: 0;
    img {
      width: 100%;
      height: auto;
    }
  } 
}

.chart-legend {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

.chart-legend-entry {
  max-width: 500px;
  display: flex;
  align-items: start;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1rem;  
  img {
    margin-top: .5rem;
  }
}


.stage-content-wrap {
  position: relative;
  .stage-image-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 0;    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(126deg, #3C3C3B 0%, rgba(60,60,59,0.00) 77%);
    }
  }
  
  .container {
    position: relative;
    z-index: 2;
    min-height: 300px;
  }
  .stage-content {
    padding: 2rem 0;

    h1 {
      font-weight: 300;
      font-size: 37px;
      line-height: 47px;
      margin: 0;
      padding: 0;      
      color: #fff;
    }    
    
    h4.topline {
      color: #00845c;
      margin-bottom: 0.25rem;
    }
  }             
}

.facts-container {
  --primary: #00845c;
  --light-green: #E6F6F1;

  --h1-font-size-sm: 2.938rem;
  --h2-font-size-lg: 3.813rem;
  --h4-font-size-sm: 1.375rem;
  --h5-font-size-lg: 1.5rem;
  
  display: flex;  
  flex-direction: row;
  justify-content: center;
  background-color: var(--light-green);
  padding: 2rem;
  .fact-item {
    padding: 1rem 2rem;
    flex: 1 1 auto;
    text-align: center;
    position: relative;
    padding-top: 0;
    &::after {
      content: "";
      background-color: var(--primary);
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      height: 100%;
      width: 2px;
      margin: 0;
      
    }
    
    &:last-child {
      &::after {
        content: none;
      }
    }
  }
  .fact-value {
    font-size: var(--h1-font-size-sm);    
  }
  .fact-title {
    font-size: var(--h4-font-size-sm);    
  }
}

.mood-image {
  img {
    width: 100%;
    height: auto;  
  }
}

.element-preview:not(:has(.element-preview-content)) {
  .element-preview-header-header {
    font-size: 2rem;
    text-align: center;
  }
  .element-preview-header-subheader {
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 2rem;
  }
}

.adsg-editor-preview {
  --h1-font-size-sm: 2.938rem;
  --h1-line-height-sm: 3.75rem;
  --h1-font-size-lg: 4.625rem;
  --h1-line-height-lg: 5rem;

  --h2-font-size-sm: 2.313rem;
  --h2-line-height-sm: 2.938rem;
  --h2-font-size-lg: 3.813rem;
  --h2-line-height-lg: 4.75rem;

  --h3-font-size-sm: 1.938rem;
  --h3-line-height-sm: 2.438rem;
  --h3-font-size-lg: 2.5rem;
  --h3-line-height-lg: 3.125rem;

  --h4-font-size-sm: 1.375rem;
  --h4-line-height-sm: 1.75rem;
  --h4-font-size-lg: 2.188rem;
  --h4-line-height-lg: 2.75rem;

  --h5-font-size-sm: 1.188rem;
  --h5-line-height-sm: 1.5rem;
  --h5-font-size-lg: 1.5rem;
  --h5-line-height-lg: 1.875rem;

  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5 {
    margin: 0;
    padding: 0;
    font-weight: var(--font-medium);
  }
  h1, .h1 {
    font-size: var(--h1-font-size-sm);
    line-height: var(--h1-line-height-sm);    
  }

  h1 {
    .topline {
      display: block;
      font-size: var(--h4-font-size-sm);
      line-height: var(--h4-line-height-sm);
      font-weight: var(--font-medium);          
    }
    .headline {
      display: block;
    }
  }

  h2, .h2 {
    font-size: var(--h2-font-size-sm);
    line-height: var(--h2-line-height-sm);    
  }

  h3, .h3 {
    font-size: var(--h3-font-size-sm);
    line-height: var(--h3-line-height-sm);
    margin-bottom: 2rem;    
  }

  h4, .h4 {
    font-size: var(--h4-font-size-sm);
    line-height: var(--h4-line-height-sm);
  }

  h5, .h5 {
    font-size: var(--h5-font-size-sm);
    line-height: var(--h5-line-height-sm);    
  }
  h6, .h6 {
    font-weight: var(--font-demibold);
    font-size: var(--text-lg);
    margin: 0 0 var(--paragraph-margin-bottom);
  }

  .btn {
    --btn-padding-x: 1.5rem;
    --btn-padding-y: 0.5rem;
    --btn-font-size: 1rem;
    --btn-font-size-lg: 1rem;
    --btn-font-weight: 400;
    --btn-line-height: 1.3;
    --btn-line-height-lg: 1.3;
    --btn-color: var(--body-color);
    --btn-bg: transparent;
    --btn-border-width: 2px;
    --btn-border-color: transparent;
    --btn-border-radius: 1.5rem;
    --btn-hover-border-color: transparent;
    --btn-disabled-opacity: 0.65;  
    background-color: var(--btn-bg);
    border: var(--btn-border-width) solid var(--btn-border-color);
    border-radius: var(--btn-border-radius);
    color: var(--btn-color);
    cursor: pointer;
    display: inline-block;
    font-family: var(--btn-font-family);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    text-align: center;
    text-decoration: none;
    transition: var(--btn-transition);
    user-select: none;
    vertical-align: middle;
    &:hover {
        text-decoration: none;
        background-color: var(--btn-hover-bg);
        color: var(--btn-hover-color);
        border-color: var(--btn-hover-border-color);
    }    
  }

  .btn-primary {
    --btn-bg: var(--primary);
    --btn-border-color: var(--primary);
    --btn-color: #fff;
    --btn-hover-bg: transparent;
    --btn-hover-border-color: var(--primary);
    --btn-hover-color: var(--primary);
  }

  .btn-download {
    --btn-bg: var(--primary);
    --btn-border-color: var(--primary);
    --btn-color: #fff;
    --btn-hover-bg: transparent;
    --btn-hover-border-color: var(--primary);
    --btn-hover-color: var(--primary);
    padding-right: 56px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='17' viewBox='0 0 12 17'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23FFFFFF' stroke-width='2'%3E%3Cpath d='m10.327 7.43-4.8 4.954-4.8-4.954M5.522 12.384V0M.886 15.492h9.645'/%3E%3C/g%3E%3C/svg%3E");  
    background-repeat: no-repeat;
    background-position: calc(100% - 30px) center;
    &:hover {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='17' viewBox='0 0 12 17'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%2300854D' stroke-width='2'%3E%3Cpath d='m10.327 7.43-4.8 4.954-4.8-4.954M5.522 12.384V0M.886 15.492h9.645'/%3E%3C/g%3E%3C/svg%3E");
    }
  }

  .btn-secondary {
    --btn-bg: #fff;
    --btn-border-color: var(--primary);
    --btn-color: var(--primary);
    --btn-hover-bg: var(--primary);
    --btn-hover-border-color: var(--primary);
    --btn-hover-color: #fff;  
  }

  .btn-badge {
    --btn-bg: var(--dark-green);
    --btn-border-color: var(--dark-green);
    --btn-color: #fff;
    --btn-hover-bg: var(--dark-green);
    --btn-hover-border-color: var(--dark-green);
    --btn-hover-color: #fff;
    --btn-padding-x: 1rem;
    --btn-padding-y: 0.25rem;
    cursor: default;
    border: 0;
  }

  &.bg-default {
    background-color: #fff !important;  
  }

  &.bg-light-green {
    background-color: var(--light-green);  
    padding: 1.5rem;
  }

  &.bg-gray-with-logo,
  &.bg-light-gray {
    background-color: var(--light-gray);  
    padding: 1.5rem;
  }

  &.bg-light-medium-gray {
    background-color: var(--light-medium-gray);      
    padding: 1.5rem;
  }

  .linklist {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .btn-primary-awesome {
      padding: 1rem 2rem;
      background: var(--primary);
      border-radius: 1.5rem;
      color: #fff;
      position: relative;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      text-align: left;
      gap: 1.5rem;
      h5 {
        margin-bottom: 1rem;      
        font-size: var(--h5-font-size-lg);
        line-height: var(--h5-line-height-lg);        
        
      }
      p {
        font-size: var(--text-md);  
      }
        
      .link-text {                    
        > *:last-child {
          margin-bottom: 0;
        }
      }
      .link-icon {
        margin-left: auto;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        background: transparent;
        border: 2px solid currentColor;
        color: currentColor;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        svg {
          width: 20px;
          height: auto;
        }    
      }
    }
  }
}   

.ctype-dn_introtext {
  text-align: center;
  font-size: var(--text-xl);
}

.magazine-header-wrap {
  .lead {
    margin-top: 1.25rem;
    margin-bottom: 4rem;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(12, 1fr);

  h3 {
    grid-column: 1 / span 12;
    grid-row: 1;
  }
  .magazine-header-title {
    grid-column: 1 / span 7;
    grid-row: 2;
    
  }
  .magazine-header-illustration  {
    grid-column: 8 / span 5;
    grid-row: 2;
  }
  .lead {
    font-size: var(--text-xl);
  }  
}  


.ctype-dn_magazinevolume {
  --grid-columns: 2;
  --grid-gap: 1rem;  
  
  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: var(--grid-gap);
  row-gap: 2rem;
  margin: 0;
  padding: 0;
  align-items: stretch;
  

  .magazine-issue {
    width: calc(100%/var(--grid-columns) - (var(--grid-gap)*(var(--grid-columns) - 1))/var(--grid-columns));
    header p {
      margin: 0;
      margin-bottom: 2rem;
      padding-top: 1rem;
      position: relative;
      &::before {
        content: "";
        height: 2px;
        width: 4rem;
        background-color: var(--dark-green);
        position: absolute;
        left: 0;
        top: 0;
        display: block;      
          
      }
    }
    .magazine-issue-body {    
      display: flex;
      grid-gap: var(--grid-gap);
      .magazine-issue-cover {
        flex: 0 0 auto;
      }
    }
    .magazine-issue-cover {
      img {
        width: 100%;
        height: auto;
        box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.255);
      }
    }
    h6 {
      font-weight: var(--font-medium);
      color: var(--dark-green);
      margin: 0 0 1rem;
    }
    
    .issue-online {
      margin: 2rem 0 2.5rem;
      a {
        display: flex;
        align-items: center;
        gap: .5rem;
      }
    }
  }
}


.magazine-teaser-wrap {
  img {
    width: 100%;
    height: auto;
  }
  .magazine-teaser-illustration {
    margin-bottom: 2rem;
  }
  
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(12, 1fr);
  .magazine-teaser-illustration {
    grid-column: 1 / span 3;
    grid-row: 1;
    margin-bottom: 0;
  }
  .magazine-teaser-text {
    grid-column: 5 / span 8;
    grid-row: 1;
  }
  .magazine-teaser-links {
    p {
      margin: 0;
      display: inline-flex;
      flex-direction: column;
      gap: 1rem;
      & + h6 {
        margin-top: 2.5rem;
      }
    }
  }
}

.ctype-dn_magazinenewsletter {
  text-align: center;  
  header {  
    max-width: 50%;
    margin: 0 auto;    
  }
  h2.h3 {
    font-size: var(--text-3xl);
    margin-bottom: 1rem;
  }
  .magazine-newsletter-form {
    max-width: 600px;
    margin: 0 auto;
  }
}