@charset "UTF-8";

:root {
    --default-color: var(--cd-color);
    --default-background-color: #ffffff;
    --default-background: var(--default-background-color);
    --color: var(--default-color);
    --background-color: var(--default-background-color);
    --cd-color: #1D3557;
    --cd-color2: #007a88;
    --em-color: #61e5ff;
    --em-color2: #d7f8ff;
    --claim-color: var(--em-color);
    --name-color: white;
    --grid-line: solid var(--grid-line-width) var(--default-color);
    --base-font-size: 16px;
    --default-font-size: calc(var(--font-size-device-factor) * var(--base-font-size));
    --font-size-device-factor: 1;
    --default-line-height: 1.375rem;
    --headline-line-height: 1.0em;
    --cap-height: 0.8em;
    --default-padding: calc(var(--default-line-height) * 1.0);
    --padding: var(--default-padding);
    --scrollbar-thumb-color: var(--color);
    --scrollbar-track-color: var(--background-color);
    --scrollbar-width: 12px;
}

@media (min-width: 600px) {
    :root {
        --default-padding: calc(var(--default-line-height) * 1.5);
    }
}

@media (min-width: 1025px) {
    :root {
        --font-size-device-factor: 1.125;
    }
}

@media (min-width: 1921px) {
    :root {
        --font-size-device-factor: 1.25;
    }
}

* {
    overflow-wrap: anywhere;
    /* Standard Syntax (Firefox / Future-proof) */
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
    scrollbar-width: auto;
}

/* Webkit Syntax (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
    border-radius: 10px;
    /* Optional: Adds a padding effect around the thumb */
}

/* For the Variable Font */
/* latin-ext */
@font-face {
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../../../core/assets/fonts/lexend_deca_latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../../../core/assets/fonts/lexend_deca_latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Reset for common form elements */
api-caller:not(:defined),
api-caller {
    display: none;
}

button,
input,
select,
textarea {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    background: transparent;
    color: inherit;
    vertical-align: middle;
    box-sizing: border-box;
    appearance: none;
    /* Removes default OS styling (arrows, rounded corners) */
}

a,
button,
input,
textarea {
    -webkit-tap-highlight-color: transparent;
}

pre {
    white-space: pre-wrap;
}

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    margin-top: 0;
    margin-bottom: var(--default-line-height);
    color: var(--color);
}

ol li {
    position: relative;
    padding-left: calc(2.25rem);
    counter-increment: item;
}

ol li:after {
    position: absolute;
    display: flex;
    align-items: center;
    font-size: 0.75em;
    line-height: 1em;
    justify-content: center;
    left: 0;
    top: -0.14rem;
    content: counter(item) ". ";
    color: white;
    background: var(--cd-color2);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 2em;
    font-weight: 600
}

.fahrplan-liste {
    display: grid;
    gap: var(--default-padding);
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    cursor: pointer;
}

button {
    position: relative;
}

letter-arrow {
    letter-spacing: 0;
}

a {
    color: inherit;
}

strong {
    font-weight: 700;
}

p {
    max-width: 42rem;
    margin-top: 0;
    margin-bottom: var(--default-line-height);
    color: var(--color);
}

p:last-child {
    margin-bottom: 0;
}

:is(h1, h2, h3, h4, h4, h5, h6):first-child {
    margin-top: 0;
}

h1,
h2,
h3,
h4,
h4,
h5,
h6 {
    word-spacing: 0;
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: var(--default-line-height);
    line-height: var(--headline-line-height);
    color: var(--color);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.175rem;
}

h4 {
    font-size: 1.5em;
}

.buttons {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.cdbutton {
    position: relative;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: fit-content;
    padding: 0.75em 1.25em;
    color: white;
    text-decoration: none;
    background: var(--cd-color);
    border-radius: 2rem;
    transition: background 0.3s, color 0.3s;
}

.cdbutton.secondary {
    color: var(--cd-color);
    border: 2px solid;
    background: transparent;
}

.cdbutton.secondary:hover {
    background: var(--em-color);
}

@media (hover: hover) and (pointer: fine) {
    .cdbutton:hover {
        background: var(--em-color);
        color: var(--cd-color);
    }
}

.fadein2 {
    opacity: 0;
    transition: opacity 1s ease;
}

.fadein2[data-was-in-viewport] {
    opacity: 1;

}

/* Application */
html {
    height: 100%;
    color: var(--color);
    background: var(--background);
    font-family: 'Lexend Deca';
    font-size: var(--default-font-size);
    font-weight: 350;
    line-height: var(--default-line-height);
    box-sizing: border-box;
}

html[loaded] {
    scroll-behavior: smooth;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

html,
body {
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
    position: relative;
    padding: 0;
    margin: 0;
    border: 0;
}

body {
    min-height: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    background: var(--default-background-color);
    justify-content: space-between;
}

/* HEADER */
header {
    position: sticky;
    width: 100%;
    max-width: 100%;
    z-index: 998;
    top: 0;
    display: flex;
    flex-direction: column;
    padding-top: max(var(--padding), env(safe-area-inset-top));
    padding-left: max(var(--padding), env(safe-area-inset-left));
    padding-right: max(var(--padding), env(safe-area-inset-right));
    padding-bottom: calc(var(--default-padding) + 1px);
    color: white;
    background: var(--cd-color);
    clip-path: var(--clip-path-zack-start);
}

header h1 {
    margin: 0;
}

/* --- GLOBAL DEFINITIONS --- */
:root {
    interpolate-size: allow-keywords;
    --tan1deg: 0.017455;
    /* tan(1deg) constant */
    --unexpanded-height: 200px;
    --clip-offset: calc(100vw * var(--tan1deg));
    --clip-path-zick: polygon(0 var(--clip-offset), 100% 0, 100% 100%, 0 calc(100% - var(--clip-offset)));
    --clip-path-zick-start: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--clip-offset)));
    --clip-path-zick-end: polygon(0 var(--clip-offset), 100% 0, 100% 100%, 0 100%);
    --clip-path-zack: polygon(0 0, 100% var(--clip-offset), 100% calc(100% - var(--clip-offset)), 0 100%);
    --clip-path-zack-start: polygon(0 0, 100% 0, 100% calc(100% - var(--clip-offset)), 0 100%);
    --clip-path-zack-end: polygon(0 0, 100% var(--clip-offset), 100% 100%, 0 100%);
    --clip-path--up: polygon(0 var(--clip-offset), 100% 0, 100% calc(100% - var(--clip-offset)), 0 100%);
}

/* --- BASE SECTION STYLES --- */
section,
footer {
    position: relative;
    width: 100%;
    margin-top: calc(-1 * var(--clip-offset));
    padding: 0;
    color: var(--color);
}

section {
    min-height: calc(var(--clip-offset));
}

/* --- THE EXPANDABLE WRAPPER --- */
.expandablebox {
    position: relative;
    width: 100%;
    overflow: hidden;
    max-height: max-content;
    text-wrap: pretty;
}

section:has(.expand-btn) .expandablebox {
    max-height: var(--unexpanded-height);
}

/* --- 1. FALLBACK ENGINE (Firefox / Older Browsers) --- */
@supports not (interpolate-size: allow-keywords) {
    section:has(.expand-btn) .expandablebox {
        transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), clip-path 0.5s ease;
    }

    section:has(.expand-btn)[expanded] .expandablebox {
        max-height: 8000px;
        transition: max-height 0.5s linear, clip-path 0.5s linear;
    }
}

/* --- 2. MODERN ENGINE (Chrome, Edge, Safari) --- */
@supports (interpolate-size: allow-keywords) {
    section:has(.expand-btn) .expandablebox {
        transition: max-height 0.5s ease-in-out, clip-path 0.5s ease-in-out;
    }

    section:has(.expand-btn)[expanded] .expandablebox {
        max-height: max-content;
    }
}

/* --- SHAPE CLIP-PATHS (Simple & Perfect Odd/Even Zigzag) --- */
/* UNGERADE SEKTIONEN (1, 3, 5...) - Keil zeigt nach unten rechts  */
section:nth-of-type(even):has(.expand-btn) {
    --background-color: var(--cd-color);
    --color: white;
    --background-color: var(--em-color2);
    --color: var(--cd-color);
}

section:nth-of-type(even) .expandablebox {
    /* clip-path: polygon(0 0, 100% var(--clip-offset), 100% calc(100% - var(--clip-offset)), 0 100%); */
    clip-path: var(--clip-path--up);
    clip-path: var(--clip-path-zack);
}

/* GERADE SEKTIONEN (2, 4, 6...) - Keil zeigt nach unten links  */
section:nth-of-type(odd):has(.expand-btn) {
    --background-color: var(--cd-color2);
    --color: white;
}

section:nth-of-type(odd) .expandablebox {
    /* clip-path: polygon(0 var(--clip-offset), 100% 0, 100% 100%, 0 calc(100% - var(--clip-offset))); */
    clip-path: var(--clip-path--up);
    clip-path: var(--clip-path-zick)
}

section:has(.expand-btn) .expandablebox {
    background: var(--background-color);
    color: var(--color);
}

/* --- EXPANSION HEIGHT CONTROL --- */
section:has(.expand-btn):not([expanded]) .expandablebox {
    max-height: var(--unexpanded-height);
    cursor: pointer;
}

/* --- THE FADE-OUT OVERLAY ON THE WRAPPER --- */
section:has(.expand-btn) .expandablebox::after,
section:has(.expand-btn) .expandablebox::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 2;
    opacity: 1;
    --gradient-height: calc(100% - 0.75rem - 2 *var(--clip-offset));
    --gradient-height2: calc(100% - 4rem - 2 *var(--clip-offset));
    --gradient-color: #00000045;
}

section:has(.expand-btn):nth-of-type(odd) .expandablebox::after {
    z-index: 99;
    background: linear-gradient(179deg, transparent var(--gradient-height), var(--gradient-color) 100%);
}

section:has(.expand-btn):nth-of-type(even) .expandablebox::after {
    background: linear-gradient(181deg, transparent var(--gradient-height), var(--gradient-color) 100%);
}

section:has(.expand-btn) .expandablebox::before {
    z-index: 99;
    background: linear-gradient(179deg, transparent var(--gradient-height2), var(--background-color) 100%);
}

section:has(.expand-btn)[expanded] .expandablebox::after,
section:has(.expand-btn)[expanded] .expandablebox::before {
    opacity: 0;
}

.expand-btn {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    top: calc(100% - var(--clip-offset) * 0.5 - 0.5rem);
    width: 2.5rem;
    height: 2.5rem;
    transform: translate(-50%, -100%);
    z-index: 10;
    background: white;
    color: var(--cd-color);
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    line-height: 0;
    box-shadow: 0 4px 16px rgb(0 0 0 / 34%);
    transition: background 0.3s, color 0.3s, top 0.3s, bottom 0.4s;
    cursor: pointer;
    font-size: 0.75rem;
}

section[expanded] .expand-btn {
    display: none;
}

*:focus {
    outline: none;
}

*:focus-visible {
    outline: solid var(--em-color) 4px;
    outline-offset: 0px;
}

[tabindex="-1"]:focus-visible {
    outline: none;
}

@media (hover: hover) and (pointer: fine) {
    section:hover .expand-btn {
        color: var(--cd-color);
        background: var(--em-color);
        top: calc(100% - var(--clip-offset) * 0.5 - 0.25rem);
    }
}

.padded {
    padding: calc(var(--default-padding) + var(--clip-offset)) var(--default-padding);
    display: flex;
    flex-direction: column;
    gap: var(--default-padding);
}

/* ARTICLE */
.saeulen {
    max-width: 100%;
    display: grid;
    width: max-content;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
}

/* 2. Tablet: 2 columns, perfectly equal width based on the largest item */
@media (min-width: 799px) {
    .saeulen {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3. Desktop: 4 columns, perfectly equal width based on the largest item */
@media (min-width: 1600px) {
    .saeulen {
        grid-template-columns: repeat(4, 1fr);
    }
}

article.saeule {
    width: 100%;
    display: block;
    position: relative;
    padding: var(--default-padding);
    --color: var(--cd-color);
    --background-color: white;
}

article.saeule strong {
    color: var(--cd-color);
}

article.saeule:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% + 0px);
    height: 100%;
    transform: skew(0deg, -1deg);
    background: var(--background-color);
    border-radius: var(--default-padding);
    z-index: -1;
}

article.saeule:nth-child(2):before {
    transform: skew(0deg, -1deg);
}

/* TOPBAR */
.topbar a {
    text-decoration: none;
}

/* TOPBAR */
.topbar {
    display: flex;
}

a.playvideo-btn {
    display: flex;
    color: white;
    position: absolute;
    bottom: var(--clip-offset);
    right: calc(-1 * var(--default-padding));
    background: var(--cd-color);
    padding: 0.5rem calc(2 * var(--default-padding)) 0.5rem 0.5rem;
    transform: skew(0deg, -1deg);
    transform-origin: bottom right;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}

a.playvideo-btn>* {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

a.playvideo-btn svg-icon {
    width: 2rem;
    height: 2rem;
}

@media (hover: hover) and (pointer: fine) {
    a.playvideo-btn:hover {
        background: var(--em-color);
        color: var(--cd-color);
    }
}

/* LOGO */
.logo {
    position: relative;
}

.logo h2 {
    display: block;
    display: flex;
    font-size: 3em !important;
    flex-direction: column;
    line-height: 1em;
    margin: 0;
}

.logo svg-icon {
    position: absolute;
    background: var(--claim-color);
    top: 0.18em;
    left: 0.09em;
    width: 0.666em;
    height: 0.666em;
}

.logo .name {
    color: var(--name-color);
}

.logo .claim {
    font-size: 0.333em;
    line-height: 1em;
    margin-top: 0.333em;
    color: var(--claim-color);
}

/* FOOTER */
footer .expandablebox {
    position: relative;
    color: white;
    padding-top: calc(var(--padding)*2 + 1px);
    padding-left: max(var(--padding), env(safe-area-inset-left));
    padding-right: max(var(--padding), env(safe-area-inset-right));
    padding-bottom: calc(max(var(--padding), env(safe-area-inset-bottom)));
    background: var(--cd-color);
    clip-path: polygon(0 var(--clip-offset), 100% 0, 100% 100%, 0 100%);
    clip-path: var(--clip-path-zack-end);
}

footer .footerlinks {
    display: flex;
    flex-wrap: wrap;
    gap: calc(1 * var(--padding));
}

footer .footerlink {
    text-decoration: none;
    font-weight: 300;
}

/* FLEX WRAP */
.flexwrap {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--default-line-height));
}

section#kontrast h4 {
    color: var(--cd-color2);
}

main {
    display: flex;
    flex-direction: column;
    --color: var(--cd-color);
    flex-grow: 999;
    justify-content: space-between;
}

.zitat {
    margin-top: 1em;
    margin-bottom: 0.5em;
    display: flex;
    flex-direction: column;
    --color: var(--cd-color2);
    max-width: 800px;
}

.zitat>* {
    margin: 0;
}

.zitat>span {
    display: block;
    margin-left: auto;
    font-size: 12px;
    color: var(--color);
}

.kontakt {
    position: relative;
    padding: var(--default-padding);
    color: var(--cd-color);
    width: fit-content;
}

.kontakt:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% + 0px);
    height: 100%;
    transform: rotate(-1deg);
    background: white;
    border-radius: var(--default-padding);
    z-index: -1;
}

ul.social-links {
    display: grid;
    width: max-content;
    max-width: none;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
}

/* 2. Tablet: 2 columns, perfectly equal width based on the largest item */
@media (min-width: 720px) {
    ul.social-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3. Desktop: 4 columns, perfectly equal width based on the largest item */
@media (min-width: 1200px) {
    ul.social-links {
        grid-template-columns: repeat(3, 1fr);
    }
}

ul.social-links li {
    margin: 0;
}

ul.social-links li>a {
    display: flex;
    gap: 0.5rem;
    text-decoration: none;
    line-height: 1.2em;
    transition: color 0.3s;
}

@media (hover: hover) and (pointer: fine) {
    ul.social-links li>a:hover {
        color: var(--em-color);
    }
}

ul.social-links li svg-icon {
    width: 3rem;
    height: 3rem;
}

.fullwidthmedia {
    position: relative;
    display: flex;
    margin: 0;
    padding: 0;
    border: 0;
}

.fullwidthmedia img {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 75% 15%;
    max-height: max(calc(100lvh - 16rem), calc(1/3* 100lvw));
    min-height: 400px;
}

.fullwidthmedia figcaption {
    pointer-events: none;
    position: absolute;
    left: -1rem;
    bottom: 0;
    transform: skew(0deg, -1deg);
    transform-origin: bottom left;
    padding: 0.75rem;
    padding-left: calc(1.75rem);
    /* background: white; */
}

.fullwidthmedia figcaption,
.fullwidthmedia figcaption>*>* {
    font-size: 0.75rem;
    line-height: 1em;
    margin: 0;
    color: white;
    background: var(--cd-color2);
}

body[page-slug="homepage"] .fullwidthmedia img {
    object-position: 20% 30%;
}

.halfwidthmedia {
    width: 100%;
    display: flex;
    justify-content: left;
    margin-top: var(--default-padding);
}

.halfwidthmedia img {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 32rem;
    height: auto;
    border-radius: var(--padding);
}

dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    padding: 0;
    border: none;
    margin: 0;
    box-shadow: none;
    background-color: #1d3557e0;
    overflow: hidden;
    z-index: 999;
}

/* Ensure the outer wrapper spans the full modal viewport */
.dialogcontent {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
}

/* 1. Header & Close button */
dialog .dialog-header {
    position: absolute;
    /* Keep it layered on top of the video */
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    padding: var(--default-padding);
    justify-content: flex-end;
    /* Push button to the right corner */
    z-index: 10;
    box-sizing: border-box;
}

dialog .close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: white;
    color: var(--cd-color);
    border-radius: 50%;
    font-weight: 300;
    font-size: 1rem;
    cursor: pointer;
    border: none;
}

dialog::backdrop {
    background-color: transparent;
}

/* 2. The Video Container (Centered on the screen) */
.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 2rem;
    /* Optional: gives a breathing gap around the video edges */
    box-sizing: border-box;
}

.close-overlay>* {
    pointer-events: none;
}

.close-overlay>*>* {
    pointer-events: initial;
}

/* 3. The Video Element (Locks to a 9:16 aspect ratio box) */
.video-container video {
    display: block;
    aspect-ratio: 9 / 16;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--default-padding, 16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

section#briefwahl>* {
    background: var(--cd-color2);
    --color: white;
}

section.navsec .expandablebox {
    background: var(--em-color2);
    /* clip-path: polygon(0 var(--clip-offset), 100% 0, 100% 100%, 0 calc(100% - var(--clip-offset))); */
    clip-path: var(--clip-path-zick);
}

.unlockbox {
    padding: var(--default-padding);
}

p.einleitung {
    font-style: italic;
}

p.grundsatz {
    font-weight: 350;
    font-size: 1.175rem;
    line-height: 1.375em;
}

.leitprojekt {
    margin-top: var(--default-padding);
    margin-bottom: var(--default-padding);
    padding: var(--default-padding);
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
    color: var(--cd-color);
    --color: var(--cd-color);
}

.zitat>span {
    color: #868686;
}

.leitprojekt:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% + 0px);
    height: 100%;
    transform: skew(0deg, -1deg);
    background: var(--em-color2);
    border-radius: var(--default-padding);
    z-index: -1;
}

.besipiel {
    position: relative;
    --background-color: white;
    color: var(--cd-color2);
    --color: currentColor;
    padding: 1rem;
    width: fit-content;
    padding: var(--default-padding)
}

.besipiel:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% + 0px);
    height: 100%;
    transform: skew(00deg, -1deg);
    background: var(--background-color);
    border-radius: var(--default-padding);
    z-index: -1;
}

.centerbox {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    width: min(1280px, 100%);
}

body[page-slug="datenschutz"] li {
    margin-bottom: 0.25rem;
}

body[page-slug="datenschutz"] ul {
    margin-bottom: var(--default-line-height);
}

body[page-slug="datenschutz"] h2,
body[page-slug="impressum"] h2 {
    font-size: 1.5rem;
}

ul.termine {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(315px, 100%), 1fr));
    margin-bottom: var(--default-padding);
}
ul.termine a{
    text-decoration: none;
    color: var(--cd-color2);
}
ul.termine li {
    position: relative;
    padding: var(--default-padding);
    --background-color: white;
    color: var(--cd-color);
    margin: 0;
}
ul.termine li.is-past {

    opacity: 0.6;
}
ul.termine li:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% + 0px);
    height: 100%;
    transform: skew(0deg, -1deg);
    background: var(--background-color);
    border-radius: var(--default-padding);
    z-index: -1;
}

section:has(.navsec) {
    margin-top: auto;
}

section#socialfeed>* {
    background: var(--em-color2);
}

div.elfsight-wrapper {
    position: relative;
    padding: var(--default-padding);
    border-radius: var(--default-padding);
    width: fit-content;
}

div.elfsight-wrapper:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% + 0px);
    height: 100%;
    transform: rotate(-1deg);
    background: var(--background-color);
    border-radius: var(--default-padding);
    z-index: -1;
}


section#keyvisual {
    z-index: 3;
}

body[page-slug="homepage"] section#keyvisual .expandablebox {
    clip-path: var(--clip-path--up);
}

a:has(h2.endclaim) {
    text-decoration: none;
}

h2.endclaim {
    color: white;
    font-size: 1rem !important;
    font-weight: 300;
    font-size: 0.75em !important;
    margin-top: 3rem;
    line-height: 1.5em;
}

.counterrot {
    transform: skew(0deg, 1deg);
}