@font-face {
    font-family: 'Sen';
    src: url('../fonts/Sen-Regular.woff2') format('woff2'),
        url('../fonts/Sen-Regular.woff') format('woff'),
        url('../fonts/Sen-Regular.otf') format('otf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sen';
    src: url('../fonts/Sen-Bold.woff2') format('woff2'),
    url('../fonts/Sen-Bold.woff') format('woff'),
    url('../fonts/Sen-Bold.otf') format('otf');
    font-weight: 800;
    font-style: medium;
    font-display: swap;
}
:root {
    --font-family: 'Sen', sans-serif;
    --font-weight: 400;
    --font-family-headline: 'Sen', sans-serif;
    --font-weight-headline: 800;
    --color-primary-light: #dc74db;
    --color-primary: #C862C7;
    --color-primary-dark: #AD1FAD;
    --color-secondary-dark: #cbd629;
    --color-secondary: #DAE74D;
    --color: #081140;
    --color-background: #ffffff;
    --color-lightgray: #F6F8FD;
    --color-gray: #d9dce6;
    --color-gray-dark: #535c84;
    --letter-spacing: 0.05rem; 
    --letter-spacing-large: 0.085rem;
    --border: 2px;
    --content-width: 1460px;
    --swiper-pagination-bullet-width: 0.7rem;
    --swiper-pagination-bullet-height: 0.7rem;
    --swiper-pagination-color: #C862C7;
}
*, a {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html {
    scroll-behavior: smooth;
    font-size: 16px;
}
body{
    min-height: 100vh;
    --font-size: 1rem;
    --font-size-button: 1rem;
    --font-size-s: 0.9rem;
    --font-size-xs: 0.8rem;
    --font-size-h1: 2.074rem;
    --font-size-h2: 1.728rem;
    --font-size-h3: 1.44rem;
    --font-size-h4: 1.2rem;
    --border-radius: 1.4rem;
    background-color: var(--color-background);
    position: relative;
    color: var(--color);
    font-family: var(--font-family);
    --space-xs: 0.2rem;
    --space-s: 0.6rem;
    --space-m: 1rem;
    --space-l: 2rem;
    --space-xl: 3rem;
    --space-xxl: 4rem;
    --space-xxxl: 4rem;
    --content-padding: 1.25rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@media screen and (min-width: 900px) {
    html {
        font-size: 18px;
    }
    body {
        --space-xs: 0.4rem;
        --space-s: 0.8rem;
        --space-m: 1.4rem;
        --space-l: 2.4rem;
        --space-xl: 4rem;
        --space-xxl: 6rem;
        --space-xxxl: 7rem;
        --font-size: 1rem;
        --font-size-button: 1rem;
        --font-size-s: 1rem;
        --font-size-xs: 0.9rem;
        --font-size-h1: 2.074rem;
    }
}
@media screen and (min-width: 1200px) {
    body {
        --space-m: 1.4rem;
        --space-l: 2.4rem;
        --space-xl: 4rem;
        --space-xxl: 6rem;
        --space-xxxl: 9rem;
        --content-padding: 2.4rem;
        --font-size: 1.125rem;
        --font-size-button: 1rem;
        --font-s: 0.9rem;
        --font-xs: 0.75rem;
        --font-size-h1: 3.157rem;
        --font-size-h2: 2.4rem;
        --font-size-h3: 1.577rem;
        --font-size-h4: 1.333rem;
    }
}

h1, h2, h3, h4, h5, h6, a {
    font-weight: var(--font-weight-headline);
    font-family: var(--font-family-headline);
    line-height: 130%;
}
h1 {
    font-size: var(--font-size-h1);
    line-height: 120%;
}
h2, .h2 {
    font-size: var(--font-size-h2);
}
h3, .h3 {
    font-size: var(--font-size-h3);
}
h4, .h4 {
    font-size: var(--font-size-h4);
}
p, li {
    font-weight: var(--font-weight);
    font-family: var(--font-family);
    line-height: 160%; 
    font-size: var(--font-size);
}
h1 strong, h2 strong, h3 strong, h4 strong {
    color: var(--color-primary);
}
.textlink, p a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
    text-decoration-thickness: var(--border);
}
.textlink:hover, p a:hover  {
    color: var(--color-primary-dark);
}
.announcement-bar .textlink {
    color: var(--color-primary-light);
}
.announcement-bar .textlink:hover {
    color: var(--color-primary);
}
button {
    cursor: pointer;
}
img, svg {
    width: 100%;
    height: auto;
}
main {
    margin-top: 3.3rem;
}
.content-width {
    padding: 0 var(--content-padding);
    max-width: var(--content-width);
    display: block;
    margin: 0 auto;
}
.content-width .content-width {
    padding: 0 0;
    max-width: auto;
}

.button {
    color: var(--color-primary);
    border: var(--color-primary) solid 2px;
    display: inline-block;
    border-radius: 10rem;
    padding: 0.7rem 1.2rem 0.8rem;
    text-decoration: none;
    margin-top: 0.4rem;
    text-align: center;
}
.button:hover {
    color: var(--color-primary-light);
    border-color: var(--color-primary-light) solid 2px;
}
.button.primary {
    color: var(--color-background);
    background: var(--color-primary);
}
.button.primary:hover {
    border-color: var(--color-primary-light);
    background: var(--color-primary-light);
}
.button:nth-child(1) {
    margin-right: 0.2rem;
}
.block-type-buttons {
    margin-top: var(--space-m);
}
.image-none .button , .image-small .button {
    margin-top: 2rem;
}
@media screen and (min-width: 1200px) {
   main {
        margin-top: 9rem;
    } 
}
@media screen and (min-width: 1400px) {
   main {
        margin-top: 9.4rem;
    } 
}

img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

/* Breadcrumb */
.breadcrumb {
    padding-top: 1rem;
    margin-bottom: 0;
}

.press-article .breadcrumb, #job-article .breadcrumb, #program .breadcrumb, #contact .breadcrumb, #membership .breadcrumb , #sponsors .breadcrumb, #error .breadcrumb {
    padding-top: 1rem;
    margin-bottom: var(--space-xxl);
}
@media screen and (min-width: 900px) {
    .press-article .breadcrumb, #job-article .breadcrumb, #program .breadcrumb, #contact .breadcrumb, #membership .breadcrumb, #sponsors .breadcrumb, #error .breadcrumb {
        margin-bottom: 5rem;
    }
}
@media screen and (min-width: 1200px) {
    .press-article .breadcrumb, #job-article .breadcrumb, #program .breadcrumb, #contact .breadcrumb, #membership .breadcrumb, #sponsors .breadcrumb, #error .breadcrumb  {
        margin-bottom: 6rem;
    }
}
.breadcrumb ol {
    list-style: none;
    margin-top: 0 !important;
    margin-bottom: 0;
    margin-left: 0 !important;
}
.press-article .breadcrumb ol, #job-article .breadcrumb ol {
    margin-bottom: 0;
}
.breadcrumb ol li {
    display: inline-block;
    margin-right: 0rem;
    line-height: 100%;  
}
.breadcrumb ol li a{
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight);
    line-height: 100%;
}
.breadcrumb ol li a:after {
    content: ">";
    position: relative;
}
.breadcrumb ol li:last-child a:after {
    content: "";
    display: none;
}
.breadcrumb ol li:last-child a[aria-current=page] {
    font-weight: var(--font-weight-headline);
}

/* Content */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0;
    grid-row-gap: 1.4rem;
}
.column {
    grid-column: span 12;
    align-self: center;
}
@media screen and (min-width: 900px) {
    .column {
        grid-column: span var(--span);
    }
    .grid {
        gap: 2rem;
    }
}

.header-section {
    overflow: hidden;
    width: 100vw;
}
.block-type-header.image-small {
    padding-top: 1.2rem;
}
.block-type-header.image-large {
    padding-top: 0;
}

.block-type-header .image-container {
    width: 100%;
    background: var(--color-primary-light);
    margin-bottom: 2rem;
    line-height: 0;
    display: block;
    border-radius: var(--border-radius);
    height: 60vw;
}
.block-type-header .image-container img {
    object-fit: cover;
    object-position: top right;
    height: 100%;
    line-height: 0;
}
.image-large {
    margin-left: -1.3rem;
    margin-right: -1.3rem;
}
.image-large .image-container, .image-large img {
    border-radius: 0;
}
.image-large > span:first-child {
    margin-bottom: 0;
    height: 66vw;
}
.image-large > span:last-child {
    display: block;
    background: var(--color);
    padding: 3rem 1.2rem;
    color: var(--color-background);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}
.image-none {
    margin-top: 3.8rem;
}
 .image-none > span:last-child {
    margin-top: 3rem;
}

.image-large .button.primary {
    color: var(--color);
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

.image-large .button.primary:hover {
    color: var(--color);
    background: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
}
.image-large .button.secondary {
    color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}
.image-large .button.secondary:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.button-container {
    margin-top: 1.6rem;
    display: block;
}
.intro2 {
    margin-top: 1rem;
}


.image-none .intro2, .image-small .intro2 {
    margin-top: 0.6rem;
}

@media screen and (min-width: 900px){
    .block-type-header {
        display: grid;
        align-items: center;
        gap: 2rem 2rem;
        grid-template-columns: 1fr 1fr;
    }
    .block-type-header > span:last-child {
        grid-column: 1;
    }
    .block-type-header .image-container {
        grid-column: 2;
        order: 1;
        margin-bottom: 0;
        height: 31vw;
    }

    .image-none > span:last-child {
        grid-column: 1 / span 2;
        max-width: 900px;
    }
    .image-large {
        margin-left: auto;
        margin-right: auto;
        margin-top: 2rem;
    }
    .image-large .image-container, .image-large img {
        border-radius: var(--border-radius);
    }
    .image-large > span:first-child {
        margin-left: -44%;
        width: calc(140% + 2rem);
        height: 50vw;
    }
    .image-large > span:last-child {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 400px;
        border-top-right-radius: 400px;
        width: 130%;
        position: relative;
        padding-right: 4rem;
        margin-left: -1rem;
        min-height: 80%;
        padding-left: 1.2rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .image-large > span:last-child > *{
        max-width: 80%;
    }
    .image-none {
        margin-top: 1.6rem;
    }
    .image-small > *:last-child {
        margin-top: 3.4rem;
    }
    .image-small {
        align-items: flex-start;
    }
}
@media screen and (min-width: 1200px){
    .block-type-header > span:last-child {
        padding-right: 4rem;
    }
    .block-type-header.image-small, .block-type-header.image-large  {
        padding-top: 2rem;
    }
    .block-type-header.image-small {
        grid-template-columns: 5fr 6fr;
    }
    .image-none > span:last-child {
        margin-top: 5rem;
    }
    .image-large {
        margin-top: 0;
    }
     .image-large > span:first-child {
        /* width: calc(100% + 8rem); */
        margin-left: -43%;
        height: 41vw;
    }
    .image-large > span:last-child {
        width: 120%;
    }
    .image-none > span:last-child {
        margin-top: 0.4rem;
    }
    .image-none {
        margin-top: 4.9rem;
    }
    
}
@media screen and (min-width: 1400px){
    .block-type-header .image-container {
        height: 477px;
    }
}
@media screen and (min-width: 1600px){
    .image-large > span:first-child {
        width: calc(100% + 16rem);
        margin-left: -12.2rem;
        height: 656px;
    }
    .image-large > span:last-child {
        margin-left: -10%;
        padding-left: 10%;
        width: 120%;
    }
}

/* Video */
video {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}
.video-consent-block {
    margin: 2rem 0;
    position: relative;
}

.video-consent-overlay {
    aspect-ratio: 16/9;
    background: var(--color);
    border-radius: var(--border-radius);
    border: 1px solid #333;
    transition: all 0.3s ease;
}

.video-consent-overlay:hover {
    border-color: #555;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.video-consent-content {
    text-align: left;
    padding: 2rem;
    color: white;
    width: 100%;
    height: auto;
}

.video-consent-icon {
    font-size: 1rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
}
.video-consent-icon svg{
    width: 2rem;
    height: 2rem;
    margin-right: 0.8rem;
    
}


figure .video-consent-content p {
    color: var(--color-background);
    margin-bottom: 1rem;
    margin-top: 0;
    max-width: 600px;
}

.video-consent-content a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.video-consent-content a:hover {
    color: var(--color-primary-light);
}

.video-consent-btn {
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 0.875rem 2rem;
    border-radius: 10rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.video-consent-btn:hover {
    background: var(--color-primary-light);
}

.video-consent-btn:active {
    transform: translateY(0);
}

.video-container iframe,
.video-container video {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
}

/* Responsive */
@media (max-width: 600px) {
    .video-consent-icon {
        margin-bottom: 0.4rem;
    }
    .video-consent-content {
        padding: 1rem;
    }
    
    .video-consent-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
        margin-top: 0.4rem;
    }
    figure .video-consent-content p {
        margin-bottom: 0.4rem;
        font-size: 0.8rem;
        display: inline;
        
    }
}

/* Image Block */
.block-image {
    margin: 0;
    position: relative;
}

/* Text block */
.textblock.center {
    text-align: center;
}
.center {
    text-align: center;
}
.textblock.larger * {
    font-size: var(--font-size-h3);
}

/* Aspect Ratio Container für gecropte Bilder */
.block-image[data-crop="true"] .image-container {
    position: relative;
    width: 100%;
    padding-bottom: var(--aspect-ratio);
    overflow: hidden;
}

.block-image[data-crop="true"] .image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Normale Bilder ohne Crop */
.block-image[data-crop="false"] img {
    width: 100%;
    height: auto;
    display: block;
}

/* Caption Styling */
.image-caption {
    margin-top: 0.5rem;
    font-size: 0.9em;
    color: #666;
    font-style: italic;
}


/* Cards */
.cardgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    list-style: none;
    margin-top: 2rem !important;
}
.content-section .content-width > div:first-child .cardgrid {
    margin-top: 0 !important;
}

.cardgrid a {
    color: var(--color);
    text-decoration: none;
    font-size: var(--font-size);
    display: block;
    background: var(--color-background);
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
    height: 100%;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}
.image-content {
    display: block;
    width: 100%;
    padding-bottom: 50%;
    position: relative;
    overflow: hidden;
}

.cardgrid img {
    border-radius: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    object-fit: cover;
    transition: all 0.2s ease-in-out;
}
.horizontallogo img{
    top: 1rem;
    left: 1rem;
    right: 1rem;
    width: calc(100% - 2rem);
    object-fit: contain;
    object-position: top right;
}
.cardgrid a.full {
    min-height: 460px;
}
.cardgrid a.full .image-content {
    height: 100%;
}
.cardgrid a.full .card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    font-weight: var(--font-weight-headline);
    background: linear-gradient(359deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}
.cardgrid a.full .card-content * {
    font-weight: var(--font-weight-headline);
    color: var(--color-background);
}
.cardgrid a.full .card-content path {
    fill: var(--color-background);
}
.full .card-content > span {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
}
.card-content {
    padding: 1rem;
    display: block;
}
.card-content span {
    display: block;
}
.card-content span:first-child {
    font-weight: var(--font-weight);
    font-size: var(--font-size-s);
}
#press-items-container .card-content span:first-child {
    font-size: var(--font-size-h4);
    font-family: var(--font-family-headline);
}
#press-items-container .card-content span.label, .press-articles #press-items-container .card-content span:first-child {
    font-size: var(--font-size-s);
    font-family: var(--font-family-headline);
}
.horizontal .card-content span:first-child {
    color:var(--color-background);
    background: var(--color);
    display: inline-block;
    padding: 0.4rem 0.4rem 0.5rem;
    border-radius: 0.2rem;
    line-height: 100%;
    margin-bottom: 0.4rem;
}
.horizontal .card-content span.paused {
    color:var(--color);
    background: var(--color-gray);
}
.card-content span:nth-child(3) {
    font-weight: var(--font-weight);
    margin-top: 1rem;
    margin-bottom: 2rem;
}
.card-content span:nth-child(3) svg {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
}
.card-content > svg {
    width: 1rem;
    height: 1rem;
    position: absolute;
    right: 1rem;
    bottom: 1rem;
}
.more-button {
    display: block;
    text-align: center;
    margin-top: 2rem;
}
@media screen and (min-width: 800px){
   .cardgrid:not(.horizontal, .horizontallogo) {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
    } 
    .card-content span:nth-child(3) {
        margin-bottom: 3rem;
    }
    .cardgrid a {
        min-height: 460px;
    }
    .cardgrid a:hover  {
        border: 1px solid var(--color-gray);
    }
    .cardgrid a:hover .card-content > svg path {
        fill: var(--color-primary);
    }
    .cardgrid a:hover img {
        transform: scale(1.1);
    }
    .horizontal.cardgrid, .horizontallogo.cardgrid {
        gap: 1rem;
    }
    .horizontal.cardgrid a, .horizontal.cardgrid a.full {
        min-height: 160px;
        display: flex;
    }
    .horizontallogo.cardgrid a, .horizontallogo.cardgrid a.full {
        min-height: 160px;
    }
    .horizontal.cardgrid .image-content {
        width: 33%;
        padding-bottom: 0;
    }
    .horizontallogo.cardgrid .image-content {
        width: 200px;
        padding-bottom: 0;
        height: 100px;
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 0.0;
    }
    .horizontal .card-content span:first-child {
        position: absolute;
        right: 1.4rem;
        top: 1.4rem;
    }
    .horizontallogo img{
        top: 1rem;
        left: 1.4rem;
        right: 1.4rem;
        width: calc(100% - 2.8rem);
        object-fit: contain;
    }
    .horizontallogo .card-content span:nth-child(2) {
        margin-right: 12rem;
    }
    .horizontal .card-content span:nth-child(2) {
        margin-right: 8rem;
        display: block;
    }
    .horizontal .card-content span:nth-child(3), .horizontallogo .card-content span:nth-child(3) {
        margin-bottom: 0;
        margin-top: 0;
    }
    .horizontal .card-content span:nth-child(3) p {
        margin-top: 0;
    }
    .horizontallogo .card-content span:nth-child(3) p {
        margin-top: 0;
    }
}
@media screen and (min-width: 900px){
    .horizontal.cardgrid .image-content {
        width: 25%;
        padding-bottom: 0;
    }
}
@media screen and (min-width: 1200px){
   .cardgrid:not(.horizontal, .horizontallogo) {
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-rows: 1fr;
    } 
    .cardgrid a, .cardgrid a.full {
        min-height: 560px;
    }
    .horizontal.cardgrid a, .horizontal.cardgrid a.full {
        min-height: 160px;
    }
    .card-content {
        padding: 1.4rem;
    }
    .card-content > svg {
        right: 1.6rem;
        bottom: 1.6rem;
    }
    .full .card-content > span {
        left: 1.6rem;
        bottom: 1.6rem;
    }
    
    .card-content span:nth-child(3) {
        margin-bottom: 4rem;
    }
    .horizontal .card-content span:nth-child(3) {
        margin-bottom: 0;
    }
    .horizontallogo.cardgrid .image-content {
        width: 200px;

    }
    .horizontallogo .card-content span:nth-child(2) {
        margin-right: 16rem;
    }
}

/* svg in Text */
.intro2 p {
    display: flex;
    margin-bottom: 0.4rem;
}
p svg {
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 0.2rem;
    transform: translateY(0.2rem);
}
/* Contact Block */
.content-section .block-type-contact p {
    margin-top: 1rem;
}
.content-section .block-type-contact p:first-of-type {
    margin-top: var(--space-m);
}
.content-section .block-type-contact h2 {
    margin-top: 0;
    font-size: var(--font-size-h3);
}
.block-type-contact {
    margin-top: var(--space-xxl);
}
.block-type-contact .image-container {
    max-width: 300px;
    display: block;
    margin-bottom: 2rem;
}
.block-type-contact .image-container.round {
    border-radius: 50%;
    width: 220px;
    height: 220px;
    overflow: hidden;
    line-height: 0;
}
.block-type-contact .image-container.round img {
    height: 100%;
    object-fit: cover;
}
@media screen and (min-width: 700px) {
    .block-type-contact {
        display: flex;
    }
    .block-type-contact .image-container {
        width: 30%;
    }
    .block-type-contact > span:last-child {
        width: 70%;
        padding-left: 2rem;
    }
}

.teaser-section #sponsor-container {
    margin-top: 1rem;
}
.teaser-section .block-type-sponsors {
    padding-bottom: 2rem;
}
.teaser-section .block-type-sponsors .sponsor-item img {
    max-width: 200px;
}
.teaser-section .block-type-sponsors .child-content {
    display: block;
    text-align: center;
}
@media screen and (min-width: 1400px) {
    .teaser-section .block-type-sponsors .sponsor-item img {
        max-width: 260px;
    }
}
/* Accordion block */
details {
    background: var(--color-background);
    margin: 1rem 0;
    border-radius: var(--border-radius);
}
summary {
    min-height: 160px;
}
.block-type-accordion,
.block-type-cards {
    margin: 2rem 0;
}
.block-type-cards.content-width {
    margin: 2rem auto;
}
summary::marker {
    display: none;
    content: "";
}
summary::-webkit-details-marker {
    display: none;
    content: "";
}
summary img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.accordio-imagecontainer {
    width: 100%;
    height: 200px;
    display: block;
    overflow: hidden;
}
summary > span:last-child {
    padding: 1rem 1rem 2rem;
    display: block;
    position: relative;
}
summary p.large {
    margin: 0;
    font-size: var(--font-size);
    font-family: var(--font-family-headline);
    font-weight: var(--font-weight-headline);
}
.content-section summary p {
    margin: 0.4rem 0 0;
}
summary svg {
    width: 1.4rem;
    height: auto;
    transition: 0.2s ease-in-out all;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}
details[open] svg {
    transform: rotate(180deg);
}
details > span:last-child {
    transition: 0.2s ease-in-out all;
    display: block;
    padding: 0 0 0 0;
    position: relative;
}

details > span:last-child > *
details > span:last-child > *:first-child{
    margin-top: 0;
}
.accordio-imagecontainer img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
details .label {
    display: inline-block !important;
    padding: 0.4rem 0.6rem 0.4rem;
    border-radius: 0.2rem;
    line-height: 100%;
    margin-top: 0;
    width: auto;
    font-size: var(--font-size-xs);
    color: var(--color-background);
    background: var(--color-gray-dark);
}
@media screen and (min-width: 900px){
    summary {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 2rem;
    }
    
    .accordio-imagecontainer {
        grid-column: 1;
        height: 230px;
        grid-column: 1 / span 3;
        height: 100%;
    }
    .accordio-imagecontainer img {
        border-bottom-left-radius: var(--border-radius);
        border-top-right-radius: 0;
    }

    summary > span:last-child {
        grid-column: 4 / span 9;
        padding: 1.4rem 2rem 1.4rem 0;
        flex-direction: column;
    }
    .noimage summary >span:last-child {
        grid-column: 1 / span 12;
        padding: 1.4rem 2rem 1.4rem 1.6rem;
    }
    summary span svg {
        margin-top: auto;
        bottom: 1.6rem;
        right: 1.6rem;
    }
    details > span:last-child {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 2rem;
        row-gap: 0;
    }
    details > span:last-child > *{
        grid-column: 4 / span 9;
        padding: 0 2rem 2rem 0;
    }
    .noimage > span:last-child > *{
        grid-column: 1 / span 12;
        padding: 0 2rem 2rem 1.6rem;
        
        margin: 0;
    }
    details .label {
        display: inline-block !important;
        padding: 0.4rem 0.6rem 0.3rem;
        border-radius: 0.2rem;
        line-height: 100%;
        margin-top: 0;
        width: auto;
        font-size: var(--font-size-xs);
        color: var(--color-background);
        background: var(--color-gray-dark);
        position: absolute;
        right: 2rem;
        top: 2rem;
    }
    details.noimage .label {
        position: static;
        right: auto;
        top: auto;
    }
}
.content-section h2 {
    scroll-margin-top: 3rem;
}
@media screen and (min-width: 900px){
    .content-section h2 {
        scroll-margin-top: 6rem;
    }
}