@charset "utf-8";
:root {
    --clr-scheme: dark;
    --clr-fg: #eee7e1;
    --clr-bg: #222;
    --clr-highlight-fg: #fff;
    --clr-highlight-bg: #52697f;
    --w-gap: 1rem;
    --transition: 200ms;
    --scroll: smooth
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --scroll: auto;
        --transition: 1ms
    }
}

@media (prefers-contrast: more) {
    :root {
        --clr-fg: #fff;
        --clr-bg: #000
    }
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0 !important;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    background: none transparent;
    text-align: inherit;
    text-decoration: inherit;
    accent-color: #c1ff72;
    box-sizing: border-box
}

:root {
    color-scheme: var(--clr-scheme)
}

:focus, :active {
    outline: 0
}

html {
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 400;
    font-size: medium;
    line-height: 1.41;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: var(--scroll, auto);
    color: var(--clr-fg);
    background-color: var(--clr-bg)
}

label, button, summary {
    user-select: none
}

a, label, button, summary {
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
    text-wrap: nowrap;
    transition: color var(--transition) linear
}

time {
    white-space: nowrap;
    text-wrap: nowrap
}

button[disabled], input[disabled] {
    cursor: default;
    opacity: .5
}

article h1, article h2, article h3, article h4, article h5, article h6 {
    text-wrap: balance
}

article p {
    text-wrap: pretty;
    hyphens: auto;
    word-break: break-word
}

summary, ol, ul {
    list-style-type: none
}

img, svg, iframe {
    max-width: 100%
}

img, svg {
    height: auto;
    display: inline;
    vertical-align: bottom;
    pointer-events: none
}

a img, a svg {
    pointer-events: initial
}

svg {
    fill: currentColor
}

table {
    border-collapse: collapse;
    border-spacing: 0 0;
    empty-cells: show
}

tr, td {
    vertical-align: top
}

tbody {
    display: table-row-group
}

mark, ::selection {
    color: var(--clr-highlight-fg);
    background-color: var(--clr-highlight-bg)
}

* .d-visually-hidden {
    display: none
}

* .d-hidden, * .d-gt-md, * .d-gt-lg {
    display: none
}

@media (min-width: 33rem) {
    * .d-gt-md {
        display: initial
    }

    * [data-display="lt-md"] {
        display: none
    }
}

@media (min-width: 80rem) {
    * .d-gt-lg {
        display: initial
    }

    * [data-display="lt-lg"] {
        display: none
    }
}

.icon {
    --w-gap: calc(1rem * .33);
    line-height: max(1.41em, 24px);
    align-items: center;
    flex-shrink: 0
}

.icon svg {
    width: max(1.41em, 24px)
}

.t-small {
    font-size: 88%;
    line-height: 166%
}

.t-right {
    text-align: right
}

.t-center {
    text-align: center
}

.t-nowrap {
    display: inline-block
}

.t-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%
}

.h-center {
    width: 80rem;
    max-width: calc(100vw -(2 * 1rem));
    margin: 0 auto
}

.flex {
    display: flex;
    flex-direction: row;
    gap: var(--w-gap)
}

.flex.flex-row-md, .flex.flex-row-lg {
    flex-direction: column
}

@media (min-width: 33rem) {
    .flex.flex-row-md {
        flex-direction: row
    }
}

@media (min-width: 80rem) {
    .flex.flex-row-lg {
        flex-direction: row
    }
}

.flex.flex-h-space {
    justify-content: space-between
}

.flex.flex-h-center {
    justify-content: center
}

.flex.flex-v-start {
    align-items: flex-start
}

.flex.flex-v-center {
    align-items: center
}

.flex > .flex-grow {
    flex-grow: 2;
    min-width: 0
}

:root {
    --clr-bg-accent: rgba(82, 105, 127, 0.33)
}

html {
    background-image: radial-gradient(circle at top left, var(--clr-bg-accent), transparent 15%), radial-gradient(farthest-corner at top right, rgba(175, 155, 139, 0.25), transparent 50%);
    background-repeat: no-repeat, no-repeat
}

.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1rem 0
}

.cards figure {
    max-width: 50%
}

@media (min-width: 80rem) {
    .cards {
        grid-template-columns: 1fr 1fr
    }

    .cards > * {
        box-shadow: 0 0 .5em rgba(34, 34, 34, 0.25);
        padding: 1rem;
        border-radius: .5rem;
        background-color: rgba(255, 255, 255, 0.05)
    }

    .cards h3 {
        margin: 0 0 2ex 0
    }
}

article {
    padding: 2ex 1rem 5ex 1rem;
    font-size: 110%;
    box-shadow: 0 0 1rem rgba(34, 34, 34, 0.25);
    background-color: rgba(255, 255, 255, 0.05)
}

article h1 {
    font-size: min(240%, 10vw);
    font-weight: 200;
    line-height: 1.1;
    margin: 1ex 0;
    color: #e2d0c0
}

article h2 {
    font-size: min(200%, 8vw);
    font-weight: 200;
    line-height: 1.1;
    margin: 3ex 0 1rem 0;
    color: #b6ccc9
}

article h3 {
    font-size: 141%;
    font-weight: 500;
    margin: 3ex 0 1ex 0;
    padding-bottom: .25ex;
    border-bottom: 1px solid rgba(165, 189, 213, 0.25);
    color: #a5bdd5
}

article a {
    color: #c1ff72
}

article a:hover {
    text-decoration: underline;
    color: #fff
}

article strong {
    font-weight: 600;
    color: #fff
}

.article-cms-content p {
    margin-top: 1.41ex
}

/* Hero section using similar styling to stage */
.page-header--stage {
    display: block;
    height: min(45vh, 66vw);
    max-width: 1920px;
    margin: 0 auto;
    background-color: #000;
    color: #fff;
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><defs><pattern id="mountain" x="0" y="0" width="200" height="100" patternUnits="userSpaceOnUse"><polygon points="0,100 50,20 100,60 150,10 200,80 200,100" fill="%23228B22" opacity="0.1"/></pattern></defs><rect width="1200" height="600" fill="url(%23mountain)"/></svg>');
    background-size: cover;
    background-position: center;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
}

.hero-content h1 {
    font-size: min(420%, 10vw);
    line-height: .75;
    font-weight: 200;
    white-space: break-spaces;
    margin-bottom: 1rem;
}

.hero-content p {
    font-size: 120%;
    opacity: .75;
    margin-bottom: 2rem;
}

.hero-content .link {
    background-color: #9c2128;
    color: #fff;
    padding: 1rem 2rem;
    border-radius: .5rem;
    transition: background-color var(--transition) linear;
    text-decoration: none;
    display: inline-block;
}

.hero-content .link:hover {
    background-color: #c1ff72;

.hero-title-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.hero-logo {
    height: 1.2em; /* Passt sich an die H1-Größe an */
    width: auto;
}

.hero-content h1 {
    margin-bottom: 0; /* Entfernt den Standard-Margin */
}

.hero-slogan {
    font-size: min(420%, 10vw); /* Gleiche Größe wie H1 */
    line-height: .75;
    font-weight: 200;
    margin: 0;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title-line {
        gap: 0.5rem;
    }
    
    
    
}