* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-width: 0;
    font-size: 1em;
}

.width--auto {
    width: fit-content;
}

.width--custom {
    width: var(--width, 100%);
}

.width--smaller {
    max-width: 50rem;
} 

.is--center {
    margin-left: auto !important;
    margin-right: auto !important;
}

h1.is--center, h2.is--center, h3.is--center, h4.is--center, h5.is--center, h6.is--center, p.is--center {
    text-align: center;
}

.is--right {
    text-align: right;
    margin-left: auto !important;
}

.no-margin-top {
    margin-top: 0;
}

.has-larger-font-size {
    font-size: var(--size-18);
}

.is--hidden, [hidden], [type="hidden"] {
    display: none !important;
}

.is--disabled, [disabled] {
    cursor: not-allowed;
    opacity: .5;
}

.is--disabled *, [disabled] * {
    pointer-events: none;
}

.is--disabled .is--disabled, [disabled] .is--disabled, [disabled] .is--disabled, [disabled] [disabled] {
    opacity: 1;
}

.color-main {
    color: var(--color-main);
}

.icon--top {
    flex-direction: column;
    align-items: center !important;
}

.icon--right {
    flex-direction: row-reverse;
}

.sr--only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.is--compact {
    max-width: 16em;
}

::selection, ::-moz-selection {
    color: var(--color-white);
    background: var(--color-main);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 8em;
}

body {
    --color-white: rgb(var(--color-white-rgb, 255, 255, 255));
    --color-white-fade-5: rgba(var(--color-white-rgb, 255, 255, 255), 0.05);
    --color-white-fade-10: rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
    --color-white-fade-15: rgba(var(--color-white-rgb, 255, 255, 255), 0.15);
    --color-white-fade-25: rgba(var(--color-white-rgb, 255, 255, 255), 0.25);
    --color-white-fade-50: rgba(var(--color-white-rgb, 255, 255, 255), 0.5);
    --color-white-fade-75: rgba(var(--color-white-rgb, 255, 255, 255), 0.75);
    --color-main: rgb(var(--color-main-rgb, 175, 151, 120));
    --color-main-fade-5: rgba(var(--color-main-rgb, 175, 151, 120), .15);
    --color-main-fade-10: rgba(var(--color-main-rgb, 175, 151, 120), .10);
    --color-main-fade-15: rgba(var(--color-main-rgb, 175, 151, 120), 0.15);
    --color-main-fade-25: rgba(var(--color-main-rgb, 175, 151, 120), 0.25);
    --color-main-fade-50: rgba(var(--color-main-rgb, 175, 151, 120), 0.5);
    --color-beige: rgb(var(--color-beige-rgb, 248, 246, 242));
    --color-grey: rgb(var(--color-grey-rgb, 117, 117, 117));
    --color-black: rgb(var(--color-black-rgb, 65, 65, 65));
    --color-black-fade-5: rgba(var(--color-black-rgb, 65, 65, 65), 0.05);
    --color-black-fade-10: rgba(var(--color-black-rgb, 65, 65, 65), 0.1);
    --color-black-fade-25: rgba(var(--color-black-rgb, 65, 65, 65), 0.25);
    --color-black-fade-50: rgba(var(--color-black-rgb, 65, 65, 65), 0.5);
    --color-black-fade-75: rgba(var(--color-black-rgb, 65, 65, 65), 0.75);
    --color-black-fade-90: rgba(var(--color-black-rgb, 65, 65, 65), 0.9);
    --color-background: rgb(var(--color-background-rgb, 46, 46, 46));
    --color-red: rgb(var(--color-red-rgb, 178, 103, 94));
    --color-yellow: rgb(var(--color-yellow-rgb, 178, 178, 94));
    --color-green: rgb(var(--color-green-rgb, 103, 178, 94));

    --color-black-fade-logo: rgba(0,0,0, 0.5);

    --size-2: .0625em;
    --size-3: .09375em;
    --size-4: .125em;
    --size-6: .25em;
    --size-8: .375em;
    --size-12: .625em;
    --size-13: .75em;
    --size-14: .8125em;
    --size-15: .875em;
    --size-16: .9375em;
    --size-18: 1em;
    --size-20: 1.125em;
    --size-24: 1.25em;
    --size-28: 1.375em;
    --size-32: 1.5em;
    --size-40: 1.75em;
    --size-48: 2em;
    --size-56: 2.25em;
    --size-60: 2.375em;
    --size-64: 2.5em;
    --size-72: 2.75em;
    --size-80: 3em;
    --size-96: 3.5em;
    --size-128: 4em;

    --transition: all 500ms cubic-bezier(.23,1,.32,1);
    --box-shadow: 0 0 var(--size-16) var(--color-black-fade-10);

    font-family: var(--font-default, 'Arial'), sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.6;
    background: var(--color-background);
    color: var(--color-white-fade-75);
}

html, body {
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-accent, 'Arial'), sans-serif;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-white);
    margin: 2em 0 .5em 0;
    text-wrap: balance;
}

h1 {
    font-size: clamp(1.5em, 2.5vw, 3em);
}

h2 {
    font-size: var(--size-32);
}

h3 {
    font-size: var(--size-20);
}

h4 {
    font-size: var(--size-18);
}

p, ul, ol {
    font-size: var(--size-15);
    margin: 1em 0;
    color: var(--color-white-fade-75);
}

a {
    cursor: pointer;
    color: var(--color-main);
    text-decoration: underline;
    transition: var(--transition);
}

hr {
    width: var(--size-48);
    margin: var(--size-24) 0;
    border: none;
    height: 1px;
    background: var(--color-white);
}

small {
    font-size: 80%;
    display: inline-block;
}

a:hover {
    text-decoration: none;
}

strong {
    color: var(--color-white);
}

img {
    display: block;
    width: 100%;
    height: auto;
}

i {
    font-style: normal;
}

a, button, input, select, textarea {
    outline: 1px solid transparent;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline-color: var(--color-main);
    outline-offset: var(--size-4);
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
p:first-child,
ul:first-child,
ol:first-child,
hr:first-child,
.grid:first-child,
.columns:first-child,
.button:first-child {
    margin-top: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child,
ul:last-child,
ol:last-child,
hr:last-child,
.grid:last-child,
.columns:last-child,
.button:last-child {
    margin-bottom: 0;
}

section, .wrapper {
    margin: 0 auto;
    width: 90vw;
    max-width: 75em;
    padding: var(--size-80) 0;
    position: relative;
}

section > *, .wrapper > * {
    position: relative;
}

section::before, .wrapper::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    height: 100%;
    left: 50%;
    width: 100vw; 
    transform: translateX(-50%);
}

section[style*="--background"]::before, .wrapper[style*="--background"]::before {
    background: var(--background);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

section[style*="--background: url"]::before, .wrapper[style*="--background: url"]::before {
    mix-blend-mode: multiply;
}

section[style*="--background"].top--background::before, .wrapper[style*="--background"].top--background::before {
    height: 12em;
}

header {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--color-white-fade-25);
    backdrop-filter: blur(1em);
    -webkit-backdrop-filter: blur(1em);
    border-bottom: 1px solid var(--color-white);
    transition: var(--transition);
}

header section {
    display: flex;
    align-items: center;
    gap: var(--size-24);
    padding: var(--size-16) 0;
    transition: var(--transition);
}

header section > * {
    flex: 1;
}

header section > a {
    flex: 0 0 auto;
    max-width: 4em;
    position: relative;
}

.logo {
    text-align: center;
    text-decoration: none;
    letter-spacing: .05em;
    font-size: var(--size-20);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-white);
}

/* header section > a:not(.logo):after {
    content: '';
    display: block;
    position: absolute;
    width: 125%;
    aspect-ratio: 1;
    background: linear-gradient(to bottom, var(--color-white-fade-5), var(--color-white-fade-10));
    border: 1px solid var(--color-white-fade-10);
    border-radius: 50%;
    left: 50%;
    backdrop-filter: blur(1em);
    -webkit-backdrop-filter: blur(1em);
    bottom: calc(-1 * var(--size-48));
    translate: -50%;
    z-index: -1;
    pointer-events: none;
    transition: var(--transition);
} */

header.menu--open {
    background: var(--color-black-fade-90);
    max-height: 100dvh;
    overflow: hidden auto;
}

nav {
    width: 100%;
}

nav hr {
    margin: var(--size-24) 0;
    width: 100%;
    opacity: .4;
}

#main-menu {
    display: flex !important;
    flex-direction: column;
    gap: var(--size-48);
    padding: 0;
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    transition: var(--transition);
    align-items: flex-start;
}

#main-menu .link-box {
    max-width: 24em;
}

header.menu--open #main-menu {
    visibility: visible;
    opacity: 1;
    max-height: 100vh;
    padding-bottom: var(--size-32);
    padding-top: var(--size-16);
}

.toolbar {
    display: flex;
    justify-content: end;
}

.toolbar.toolbar.toolbar > * {
    margin: 0;
    padding: var(--size-4) var(--size-24);
    border-right: 1px solid var(--color-white-fade-25);
    transform: none;
}

.toolbar.toolbar.toolbar > *:last-child {
    border-right: none;
    padding-right: 0;
}

.tabs.is--initialized .tabs-content {
    display: flex;
    gap: 0;
    transition: var(--transition);
    pointer-events: none;
}

.tabs.is--initialized .tabs-content > * {
    flex: 0 0 100%;
    width: 100%;
}

.tabs.is--initialized .tab.is--active {
    pointer-events: all;
}

.tabs .tab-navigation .icon {
    fill: inherit;
}

.tabs .tab-navigation li a::before {
    content: "";
    display: block;
    position: absolute;
    right: 100%;
    background: var(--color-black-fade-10);
    top: 15%;
    bottom: 15%;
    width: 1px;
}

.tabs .tab-navigation li:first-child a::before {
    content: none;
}

.tabs .tab-navigation li a span {
    font-weight: 700;
    font-size: var(--size-15);
}

.tabs .tab-navigation li.is--active a {
    background: var(--color-main);
    color: var(--color-white);
    fill: var(--color-white);
}

.tabs .tab-navigation li.is--active a::before, .tabs .tab-navigation li.is--active + li a::before {
    opacity: 0;
}

.tabs .tab-navigation li.icon--big .icon {
    font-size: var(--size-64);
}

.tabs .tab-navigation li.icon--big a {
    aspect-ratio: 1;
    flex-direction: column;
    gap: var(--size-12);
}

.tabs.is--multistep .tab-navigation {
    counter-reset: tabs;
    gap: var(--size-24);
    margin: 0 auto;
}

.tabs.is--multistep .tab-navigation li {
    flex: 0 0 auto;
}

.tabs.is--multistep .tab-navigation li.is--disabled {
    opacity: 1;
}

.tabs.is--multistep .tab-navigation li.is--disabled a {
    background: var(--color-white);
    color: var(--color-black);
    fill: var(--color-black);
}

.tabs.is--multistep .tab-navigation li.is--active a {
    background: var(--color-main);
    color: var(--color-white);
    fill: var(--color-white);
}

.tabs.is--multistep .tab-navigation li a::before {
    opacity: 1 !important;
    top: 50%;
    bottom: unset;
    width: var(--size-24);
    height: 1px;
    background: inherit;
}

.tabs.is--multistep .tab-navigation li a::after {
    counter-increment: tabs;
    content: counter(tabs);
    position: relative;
    font-size: var(--size-13);
    font-weight: 700;
}

.tabs.is--multistep .tab-navigation li a span {
    display: none;
}

.tabs.is--multistep .tab > .icon-text {
    display: none;
}

.tabs:not(.is--initialized) .interaction--navigation {
    display: none;
}

.gallery .slider {
    width: 100vw;
    position: relative;
    left: 50%;
    translate: -50%;
}

.gallery .slider.swiper-initialized .swiper-wrapper {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
}


.gallery .slider.swiper-initialized .swiper-slide {
    height: auto !important;
    margin: 0 !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
}

.gallery img {
    /* height: 12em; */
    object-fit: cover;
}

.gallery .slider > .button {
    padding: var(--size-24);
    top: 0;
    bottom: 0;
    height: 100%;
    aspect-ratio: unset;
    width: var(--size-128);
    transform: none !important;
}

.gallery .slider > .button.is--prev {
    justify-content: start;
    left: 0;
    background: linear-gradient(to right, var(--color-black), transparent);
}

.gallery .slider > .button.is--next {
    justify-content: end;
    right: 0;
    background: linear-gradient(to left, var(--color-black), transparent);
}

.image img {
    border-radius: var(--size-16);
}

.filter {
    width: fit-content;
    padding: 0;
    margin: 0 auto var(--size-32) auto;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    border-radius: var(--size-12);
    padding: var(--size-4);
    background: linear-gradient(to bottom, var(--color-white-fade-5), var(--color-white-fade-10));
    border: 1px solid var(--color-white-fade-25);
    max-width: 100%;
}

.filter li {
    flex: 0 0 50%;
}

.filter .button {
    padding: var(--size-12) var(--size-16);
}

.filter .button span {
    font-weight: 500;
}

.filter .button:not(.is--active) {
    background: transparent;
    color: var(--color-white);
    fill: var(--color-white);
}

footer {
    background: var(--color-main);
}

footer section.is--bottom {
    padding: var(--size-16) 0;
}

footer section.is--bottom::before {
    background: var(--color-white-fade-25);
}

footer section.is--bottom .columns .column {
    justify-content: center;
}

footer .columns .column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    text-align: center;
    gap: var(--size-24);
}

footer .columns .column > * {
    margin: 0 auto;
    align-items: center;
}

footer section:first-child .columns {
    gap: 0;
}

footer section:first-child .columns .column {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: var(--color-white-fade-25);
    padding: var(--size-48) 0;
}

footer section:first-child .columns .column:last-child {
    border-width: 0;
}

footer p, footer ul, footer ol, footer a {
    color: var(--color-white);
}

.columns {
    display: flex;
    flex-direction: column;
    gap: var(--size-24);
    margin: var(--size-32) 0;
}

.columns.big--gap {
    gap: var(--size-48);
}

.columns.is--row {
    flex-direction: row;
}

.columns.align--end {
    align-items: end;
}

.columns.site-plan h2 {
    text-align: center;
}
.columns.site-plan .button {
    margin-left: auto!important;
    margin-right: auto!important;
}

.columns .column {
    flex: 1;
}

.columns .column.width-25 {
    flex-basis: 25%;
}

.columns .column.width-33 {
    flex-basis: 33.33%;
}

.columns .column.width-66 {
    flex-basis: 66.66%;
}

.columns .column.width-75 {
    flex-basis: 75%;
}

.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    fill: var(--color-main);
    width: 1em;
    height: 1em;
    aspect-ratio: 1;
    flex: 0 0 auto;
    font-size: var(--size-24);
    transition: var(--transition);
}

.icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.icon svg, .icon svg path {
    fill: inherit;
}

.button-group {
    display: flex;
    gap: var(--size-8);
    flex-direction: column;
    flex: 0 0 auto;
    width: 100%;
}

.icon-text-group {
    display: flex;
    gap: var(--size-16) var(--size-32);
    flex-direction: column;
}

.icon-text-group.is--small .icon-text {
    font-size: .9em;
}

.button-group .button:last-child {
    margin-top: 0;
}

.button {
    font-family: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    gap: var(--size-8);
    padding: var(--size-16) var(--size-24);
    border-radius: var(--size-8);
    margin: 2em 0 .5em 0;
    user-select: none;
    background: var(--color-main);
    color: var(--color-white);
    fill: var(--color-white);
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.button .icon {
    fill: inherit;
}

.button:hover {
    transform: scale(1.05);
    opacity: .9;
}

.button span {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    line-height: 1;
}

.button.is--small {
    padding: var(--size-8) var(--size-12);
}

.button.is--small span {
    font-size: var(--size-14);
}

.button.is--small .icon {
    font-size: var(--size-20);
}

.button.icon--only {
    padding: 0;
    aspect-ratio: 1;
    width: var(--size-48);
}

.button.is--secondary {
    background: var(--color-main-fade-15);
    color: var(--color-main);
    fill: var(--color-main);
}

.button.is--tertiary {
    border-radius: 0;
    background: transparent;
    color: var(--color-main);
    fill: var(--color-main);
    padding: 0;
}

.button.is--formular {
    background: transparent;
    color: var(--color-black);
    fill: var(--color-black);
}

.button.is--inverted {
    background: var(--color-white);
    color: var(--color-black);
    fill: var(--color-black);
}

.button.is--inverted.is--secondary {
    background: var(--color-white-fade-10);
    color: var(--color-white);
    fill: var(--color-white);
}

.button.is--inverted.is--tertiary {
    background: transparent;
    color: var(--color-white);
    fill: var(--color-white);
}

.button.is--inverted.is--formular {
    background: transparent;
    color: var(--color-white);
    fill: var(--color-white);
}

.grid {
    font-size: 1em;
    padding: 0;
    margin: var(--size-32) 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(var(--columns-mobile, 1), 1fr);
    gap: var(--gap-mobile, var(--size-16));
}

.grid.is--flex {
    display: flex;
    flex-wrap: wrap;
}

.grid.is--flex > li {
    display: contents;
}

.grid.has--outlines {
    overflow: hidden;
    border: 1px solid var(--color-main);
    border-radius: var(--size-12);
}

.grid.has--outlines li {
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-color: var(--color-main);
}

.grid.has--outlines li:nth-child(-n+3) {
    border-top-width: 1px;
}

.grid.has--outlines li:nth-child(3n+1) {
    border-left-width: 1px;
}

.grid.has--outlines .icon-text {
    padding: var(--size-16);
}

.grid.has--outlines:not(.is--contact) {
    border-radius: var(--size-24);
}

.grid.has--outlines:not(.is--contact) .icon-text.icon--big {
    justify-content: center;
    padding: var(--size-24);
    aspect-ratio: 1;
}

.grid.has--outlines.is--contact .icon-text.icon--big {
    aspect-ratio: unset;
}

.grid.has--outlines a.icon-text:hover {
    background: var(--color-main);
}

.grid.has--outlines a.icon-text:hover > .icon {
    fill: var(--color-white);
}

.grid.marquee-content {
    display: flex;
    white-space: nowrap;
    width: fit-content;
    animation: marquee 20s linear infinite;
    position: relative;
}

.marquee {
    margin-top: 3em;
}

.marquee .icon-text {
    align-items: center;
}

.marquee .icon-text .icon {
    font-size: var(--size-32);
}

@keyframes marquee {
    from {
        left: 0;
        translate: 0;
    }
    to {
        left: 100%;
        translate: -100%;
    }
}

a.icon-text {
    text-decoration: none;
}

ul, ol {
    padding-left: 2em;
}

ul.menu {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-size: 1em;
}

ul.menu, ul.menu ul {
    list-style: none;
}

ul.menu ul {
    margin: 0;
    padding-left: 1em;
}

ul.menu li a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    gap: var(--size-8);
    padding: var(--size-8) 0;
    color: var(--color-white);
    fill: var(--color-white);
}

ul.menu li a span {
    flex: 1;
    color: inherit;
}
ul.menu li.linkedin .icon{
    padding: .2em;
}

ul.menu li a .icon {
    fill: inherit;
}

ul.menu li a .icon.is--indicator {
    display: none;
}

ul.menu.is--small li a span {
    font-size: var(--size-13);
}

ul.menu.is--main {
    display: grid;
    grid-template-columns: 1fr;
}

ul.menu.is--main li.ostra-see {
    margin-bottom: var(--size-16);
}

ul.menu.is--main li a {
    padding: var(--size-8) var(--size-4) var(--size-8) var(--size-12);
    border-radius: var(--size-8);
}

ul.menu.is--main > li > a {
    padding: var(--size-12) var(--size-8) var(--size-12) var(--size-16);
}

ul.menu.is--main > li > a > span{
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}

ul.menu.is--main li a .icon.is--indicator {
    display: flex;
}

ul.menu.is--main li a:hover {
    background: var(--color-white-fade-10);
}

ul.menu.is--main li a:hover .icon {
    transform: translateX(10%);
}

ul.menu.is--social {
    flex-direction: row;
    gap: var(--size-8);
}

ul.menu.is--social li a {
    padding: 0;
    background: var(--color-white);
    border-radius: 50%;
    fill: var(--color-black);
    width: var(--size-48);
    aspect-ratio: 1;
}

ul.menu.is--social li a .icon {
    font-size: var(--size-32);
}

ul.menu.is--social li a:hover {
    background: var(--color-black);
    fill: var(--color-white);
}

.form-item {
    display: flex;
    flex-direction: column;
    gap: var(--size-8);
    flex: 1 1 100%;
}

.form-item.width--auto {
    width: 100%;
}

ul.form-item-wrapper {
    padding: 0;
    list-style: none;
    margin: 0;
    font-size: 1em;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

input, textarea, select {
    display: block;
    font-family: inherit;
    box-shadow: none;
    border: 1px solid var(--color-white);
    padding: 1.75em 1.25em .75em 1.25em;
    border-radius: .5em;
    font-size: var(--size-15);
    width: 100%;
    background: var(--color-white);
    transition: var(--transition);
    appearance: none;
    color: var(--color-black);
}

.form-item-holder.is--error input, .form-item-holder.is--error textarea, .form-item-holder.is--error select {
    border-color: var(--color-red);
}

.form-item-holder.is--warning input, .form-item-holder.is--warning textarea, .form-item-holder.is--warning select {
    border-color: var(--color-yellow);
}

.form-item-holder.is--success input, .form-item-holder.is--success textarea, .form-item-holder.is--success select {
    border-color: var(--color-green);
}

textarea {
    resize: vertical;
    min-height: 8em;
}

select {
    cursor: pointer;
}

fieldset {
    border: none;
    padding: 0;
}

legend {
    float: left;
    width: 100%;
    text-align: center;
    font-size: var(--size-20);
    font-weight: 700;
    margin-bottom: var(--size-8);
}

legend ~ * {
    clear: both;
}

legend, label {
    display: block;
    color: var(--color-black);
}

label {
    user-select: none;
    cursor: pointer;
    font-size: var(--size-15);
}

input[type="checkbox"], input[type="radio"] {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.form-item-message {
    font-size: var(--size-13);
    color: var(--color-red);
}

.form-item-message.is--warning {
    color: var(--color-yellow);
}

.form-item-message.is--success {
    color: var(--color-green);
}

.form-item-holder {
    position: relative;
}

div.form-item-holder label {
    pointer-events: none;
    position: absolute;
    color: var(--color-grey);
    inset: 1.25em 1.25em auto 1.25em;
    transform: scale(.75) translateY(-100%);
    transform-origin: bottom left;
    transition: var(--transition);
}

div.form-item-holder > .icon {
    position: absolute;
    top: .75em;
    left: .75em;
    pointer-events: none;
}

div.form-item-holder > .icon.is--indicator {
    left: unset;
    right: .75em;
}

div.form-item-holder > .button {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    margin: 0;
}

div.form-item-holder > .button.is--minus {
    left: 0;
}

div.form-item-holder > .button.is--minus ~ input {
    padding-left: 3em;
}

div.form-item-holder > .button.is--minus ~ label {
    left: 3em;
}

div.form-item-holder > .button.is--plus {
    right: 0;
}

div.form-item-holder > .button.is--plus ~ input {
    padding-right: 3em;
}

div.form-item-holder > .button.is--plus ~ label {
    right: 3em;
}

.form-item.is--number.has--buttons input, .form-item.is--number.has--buttons label {
    text-align: center;
}

.form-item.is--number.has--buttons label {
    transform-origin: bottom center;
}

div.form-item-holder:not(.has--value) input:not(:focus) ~ label, div.form-item-holder:not(.has--value) textarea:not(:focus) ~ label {
    transform: scale(1) translateY(0);
}

li.form-item-holder .form-item-fake-element {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition);
    left: var(--size-8);
    aspect-ratio: 1;
}

li.form-item-holder > .icon, li.form-item-holder .form-item-fake-element {
    position: absolute;
    top: 50%;
    pointer-events: none;
    translate: 0 -50%;
}

.form-item.is--checkbox.has--images {
    margin: 0 auto;
    text-align: center;
    max-width: 40em;
}
/* .form-item.is--checkbox.has--images .form-item-holder.is--error img {
    border: 2px solid var(--color-red);
} */

.form-item.is--checkbox.has--images li.form-item-holder.is--error .form-item-fake-element {
    border: 3px solid var(--color-red);
}

form {
    overflow: hidden;
}
.form-item.is--checkbox.has--images .form-item-wrapper {
    gap: var(--size-24);
    grid-template-columns: repeat(2, 1fr);
}

.form-item.is--checkbox.has--images li.form-item-holder .form-item-fake-element {
    left: unset;
    top: 70%;
    right: 10%;
    border-radius: 50%;
    box-shadow: var(--box-shadow);
}

.form-item.is--checkbox.has--images li.form-item-holder .form-item-fake-element .icon {
    fill: var(--color-white);
}

.form-item.is--checkbox.has--images li.form-item-holder input:checked ~ .form-item-fake-element {
    background: var(--color-main);
}

.form-item.is--checkbox.has--images label {
    padding: 0;
    background: transparent !important;
}

.form-item.is--checkbox.has--images p {
    line-height: 1.25;
}

.form-item.is--checkbox.has--images img {
    border-radius: 50%;
    aspect-ratio: 1;
    object-fit: cover;
}

.form-item.is--checkbox.has--images p > span {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-black);
}

.form-item.is--checkbox .form-item-wrapper, .form-item.is--radio .form-item-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--size-8);
}

.besonderheiten .tabs .tab-navigation li {
    position: relative;
}
.besonderheiten .tabs .tab-navigation li a{
    padding-bottom: var(--size-48);
}

.besonderheiten .tabs .tab-navigation li.is--active::after {
    opacity: .3;
    transform: translate(-50%, -25%);
}

.besonderheiten .tabs .tab-navigation li::after {
    content: '';
    position: absolute;
    display: block;
    bottom: 0;
    height: 1.5em;
    left: 50%;
    width: 1.5em; 
    background-image: url('../../assets/icons/keyboard_arrow_down.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translate(-50%, -40%);
    transition: var(--transition);
    pointer-events: none;
    
}

.form-item.is--checkbox label, .form-item.is--radio label {
    background: var(--color-white);
    padding: var(--size-12);
    border-radius: var(--size-8);
    transition: var(--transition);
}

.form-item.is--checkbox li.form-item-holder .form-item-fake-element {
    border-radius: var(--size-4);
    width: var(--size-32);
    height: var(--size-32);
    background: var(--color-beige);
}

.form-item.is--radio li.form-item-holder .form-item-fake-element {
    width: var(--size-24);
    border-radius: 50%;
    background: var(--color-beige);
}

.form-item.is--checkbox li.form-item-holder > .icon {
    left: 2em;
}

.form-item.is--radio li.form-item-holder > .icon {
    left: var(--size-28);
}

.form-item.is--checkbox li.form-item-holder .form-item-fake-element .icon {
    opacity: 0;
    fill: var(--color-black);
    transition: var(--transition);
}

.form-item.is--checkbox li.form-item-holder input:checked ~ .form-item-fake-element {
    background: var(--color-white);
}

.form-item.is--radio li.form-item-holder input:checked ~ .form-item-fake-element {
    box-shadow: inset 0 0 0 var(--size-6) var(--color-white);
    background: transparent;
}

.form-item.is--checkbox li.form-item-holder input:checked ~ .form-item-fake-element .icon {
    opacity: 1;
}

.form-item.is--checkbox li.form-item-holder input:checked ~ .icon, .form-item.is--radio li.form-item-holder input:checked ~ .icon {
    fill: var(--color-white);
}

.form-item.is--checkbox li.form-item-holder input:checked ~ label, .form-item.is--radio li.form-item-holder input:checked ~ label {
    background: var(--color-main);
    color: var(--color-white);
}

.form-item.is--checkbox label {
    padding-left: 3em;
}

.form-item.is--radio label {
    padding-left: 2em;
}

.form-item.is--checkbox .icon ~ label, .form-item.is--radio .icon ~ label {
    padding-left: 5em;
}

.icon-text {
    display: flex;
    align-items: start;
    gap: var(--size-16);
}

.icon-text .icon-text-content {
    padding-top: var(--size-4);
}

.icon-text > .icon {
    width: 1.33em;
    height: 1.33em;
    padding: .25em;
    background: var(--color-main);
    fill: var(--color-white);
    border: 1px solid var(--color-main);
    border-radius: 50%;
}

.grid.capacity h3, .grid.capacity p {
    margin: 0;
}

.icon-text.is--secondary > .icon {
    border-color: var(--color-white-fade-10);
    background: linear-gradient(to bottom,var(--color-white-fade-5),var(--color-white-fade-10));
    backdrop-filter: blur(1em);
    -webkit-backdrop-filter: blur(1em);
}

.icon-text.is--inverted.is--tertiary > .icon {
    fill: var(--color-white);
}

.icon-text.icon--big > .icon {
    font-size: var(--size-48);
}

.accordion {
    display: grid;
    grid-template-rows: auto 0;
    border: 1px solid var(--color-main);
    border-radius: var(--size-12);
    overflow: hidden;
    transition: var(--transition);
}

.accordion summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    gap: var(--size-12);
    font-weight: 700;
    color: var(--color-white);
    padding: var(--size-12) var(--size-60) var(--size-12) var(--size-12);
    user-select: none;
    position: relative;
}

.accordion summary span {
    font-size: var(--size-18);
    flex: 1;
}

.accordion summary .icon {
    font-size: var(--size-32);
}

.accordion summary .icon.is--indicator {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: var(--color-main);
    fill: var(--color-white);
    width: 1.5em;
    padding: .25em;
    transition: var(--transition);
}

.accordion summary .icon.is--indicator svg {
    transition: inherit;
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.accordion .accordion-content {
    display: block;
    opacity: 0;
    padding: 0 var(--size-60) var(--size-12) var(--size-12);
    transition: var(--transition);
}

.accordion.icon--left .accordion-content {
    padding-left: var(--size-72);
}

.accordion[open] {
    grid-template-rows: auto 1fr;
}

.accordion[open] .accordion-content {
    opacity: 1;
}

.accordion[open] summary .icon.is--indicator {
    border-bottom-left-radius: var(--size-8);
}

.accordion[open] summary .icon.is--indicator svg {
    transform: rotate(45deg);
}

.slider > .button {
    margin: 0;
    position: absolute;
    top: 50%;
    z-index: 8;
}

.slider > .button.is--prev {
    left: 0;
    transform: translate(-50%, -50%);
}

.slider > .button.is--next {
    right: 0;
    transform: translate(50%, -50%);
}

.slider .swiper-wrapper {
    margin: 0;
    display: grid;
}

.slider:not(.swiper-initialized) > .button {
    display: none;
}

.slider.swiper-initialized:not(.is--gallery) .swiper-wrapper {
    display: flex;
    gap: 0;
}

.slider.swiper-initialized .swiper-slide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transition);
}

.image.is--white, .image.is--dark img {
    filter: brightness(0) invert(1);
}

.image.is--white img {
    aspect-ratio: 3 / 1;
    object-fit: contain;
}

.image.is--white.is--dvb img, .image.is--white.is--sachsen-energie img, .image.is--white.is--airport-holding img {
    padding: var(--size-12);
}

.image.logo img {
    aspect-ratio: unset;
}

[class*="background--"] {
    position: relative;
    padding: var(--size-24);
    border-radius: var(--size-16);
}

.background--blur {
    backdrop-filter: blur(1em);
    -webkit-backdrop-filter: blur(1em);
    border: 1px solid var(--color-white-fade-10);
    background: linear-gradient(to bottom,var(--color-white-fade-5),var(--color-white-fade-10));
}

.background--beige {
    background: var(--color-beige);
}

.background--beige p {
    color: var(--color-grey);
}

.link-box {
    text-decoration: none;
    overflow: hidden;
    position: relative;
    display: block;
    border-radius: var(--size-16);
    padding: var(--size-24);
    border: 1px solid var(--color-white-fade-10);
    background: linear-gradient(to bottom,var(--color-white-fade-5), var(--color-white-fade-10), var(--color-white-fade-15)) 0 0 / 100% 200%;
    transition: var(--transition);
}

.grid.is--ostra-cricles .link-box  {
    background-repeat: no-repeat;
    background-size: cover;
    /* border-radius: 50%;
    aspect-ratio: 1; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 0; */
}

.grid.is--ostra-cricles .link-box .link-box-content figure.is--dark {
    /* filter: unset; */
}

.link-box > .button {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    border-radius: 0 0 0 var(--size-8);
    pointer-events: none;
}

.link-box:hover > .button .icon {
    transform: translate(15%, -15%);
}

.link-box:hover {
    border-color: var(--color-white-fade-15);
    background-position: 0 100%;
}

#hero {
    height: calc(100svh - 12em);
    padding: 0;
}

#hero .slider {
    height: 100%;
    width: 100vw;
    left: 50%;
    translate: -50%;
}

#hero .slider .image, #hero .slider img {
    height: 100%;
}

#hero .slider img {
    object-fit: cover;
    border-radius: 0;
}

#hero .slider > .button {
    background: var(--color-white-fade-75);
    backdrop-filter: blur(1em);
    -webkit-backdrop-filter: blur(1em);
    fill: var(--color-black);
    border-radius: 50%;
    transform: translate(0, -50%);
}

#hero .slider > .button.is--prev {
    left: var(--size-16);
}

#hero .slider > .button.is--next {
    right: var(--size-16);
}

#hero .slider:not(.is--initialized) .swiper-wrapper {
    display: flex;
}

.logo-container .button {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    margin: 0;
}

#open-menu {
    padding-left: var(--size-56);
    position: relative;
}

#open-menu span {
    display: none;
}

#open-menu .icon {
    position: absolute;
    font-size: 1em;
    left: var(--size-18);
    top: 50%;
    translate: 0 -50%;
}

#open-menu .icon::before, #open-menu .icon::after {
    content: "";
    position: absolute;
    left: 50%;
    translate: -50%;
}

#open-menu .icon::before {
    top: calc(-1 * var(--size-6));
}

#open-menu .icon::after {
    bottom: calc(-1 * var(--size-6));
}

#open-menu .icon, #open-menu .icon::before, #open-menu .icon::after {
    width: var(--size-24);
    height: var(--size-2);
    background: var(--color-white);
    transition: var(--transition);
}

#open-menu .icon svg {
    display: none;
}

header ul.menu.is--social li a {
    background: var(--color-white-fade-25);
    backdrop-filter: blur(1em);
    -webkit-backdrop-filter: blur(1em);
    fill: var(--color-white);
}

header ul.menu.is--social li a:hover {
    background: var(--color-white);
    fill: var(--color-black);
}

header.menu--open #open-menu .icon {
    width: 0;
}

header.menu--open #open-menu .icon::before {
    rotate: 45deg;
    translate: 0;
    top: 0;
}

header.menu--open #open-menu .icon::after {
    rotate: -45deg;
    translate: 0;
    bottom: 0;
}

[data-select-all] {
    position: relative;
    top: var(--size-64);
}

#desired-locations {
    margin-top: calc(var(--size-48) * -1);
}

#desired-locations legend {
    margin-bottom: 3em;
}

@media (min-width: 48em) {
    .grid {
        grid-template-columns: repeat(var(--columns-tablet, 2), 1fr);
        gap: var(--gap-tablet, var(--size-16));
    }

    .columns.site-plan h2 {
        text-align: left;
    }
    .columns.site-plan .button {
        margin-left: 0!important;
        margin-right: auto!important;
    }

    .icon-text-group {
        flex-direction: row;
    }

    .button-group {
        width: auto;
    }

    .is--compact {
        max-width: unset;
    }
    
    .gallery .slider.swiper-initialized .swiper-slide:nth-child(2n - 1):not(:nth-child(5n)):not(:nth-child(7n)) {
        grid-column: span 2;
    }
    .gallery .slider.swiper-initialized.is--home .swiper-wrapper {
        grid-template-rows: repeat(3, 1fr);
    }
}

@media (min-width: 64em) {
    body {
        --size-2: .125em;
        --size-3: .1875em;
        --size-4: .25em;
        --size-6: .375em;
        --size-8: .5em;
        --size-12: .75em;
        --size-13: .8125em;
        --size-14: .875em;
        --size-15: .9375em;
        --size-16: 1em;
        --size-18: 1.125em;
        --size-20: 1.25em;
        --size-24: 1.5em;
        --size-28: 1.75em;
        --size-32: 2em;
        --size-40: 2.5em;
        --size-48: 3em;
        --size-56: 3.5em;
        --size-60: 3.75em;
        --size-64: 4em;
        --size-72: 4.5em;
        --size-80: 5em;
        --size-96: 6em;
        --size-128: 8em;
    }

    footer section:first-child .columns .column {
        border-width: 0 1px 0 0;
        padding: 0;
    }

    footer .columns .column:first-child > * {
        text-align: left;
        margin-left: 0;
        align-items: start;
    }

    footer .columns .column:last-child > * {
        text-align: right;
        margin-left: auto;
        margin-right: 0;
        align-items: end;
    }

    .columns {
        flex-direction: row;
    }

    .grid {
        grid-template-columns: repeat(var(--columns-desktop, 3), 1fr);
        gap: var(--gap-desktop, var(--size-16));
    }

    .accordion.icon--left .accordion-content {
        padding-left: var(--size-56);
    }

    ul.menu.is--small {
        flex-direction: row;
    }

    ul.menu.is--small li a {
        padding: 0 var(--size-24);
        border-right: 1px solid var(--color-white-fade-25);
    }

    ul.menu.is--small li:last-child a {
        padding-right: 0;
        border-right: none;
    }

    ul.menu.is--main {
        grid-template-columns: repeat(3, 1fr);
    }

    #main-menu {
        flex-direction: row;
    }

    #open-menu span {
        display: block;
    }

    #intro::before {
        background-size: 125%;
        background-position: 100% 65%;
    }

    header section > a {
        max-width: 8em;
    }

    .form-item.is--checkbox .form-item-wrapper, .form-item.is--radio .form-item-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-item.is--checkbox .form-item-wrapper > *:last-child:nth-child(odd), .form-item.is--radio .form-item-wrapper > *:last-child:nth-child(odd) {
        grid-column: span 2;
    }

    .form-item.is--checkbox.has--images .form-item-wrapper{
        grid-template-columns: repeat(3, 1fr);
    }

    .form-item.is--checkbox.has--images .form-item-wrapper > *:last-child:nth-child(odd) {
        grid-column: unset;
    }

    .form-item.width--custom {
        flex: 1 1 calc(var(--width, 100%) - var(--size-8));
    }

    section[style*="--background"].top--background::before, .wrapper[style*="--background"].top--background::before {
        height: 16em;
    }

    .gallery img {
        height: 30em;
    }

    [data-select-all] {
        top: var(--size-32);
    }

    .filter li {
        flex-basis: auto;
    }
}

.sl-overlay {
    background-color: var(--color-black-fade-logo);
}

.sl-wrapper .sl-close svg{
    fill: var(--color-white);
}

.sl-wrapper .sl-close {
    width: 1em;
    height: 1em;
    font-size: 1em;
}

.sl-wrapper .sl-navigation button.sl-next svg, .sl-wrapper .sl-navigation button.sl-prev svg{
    fill: var(--color-white);
}
.sl-wrapper .sl-navigation button.sl-next, .sl-wrapper .sl-navigation button.sl-prev {
    width: 1em;
    height: 1em;
    font-size: 1em;
}

.sl-wrapper .sl-counter {
    color: var(--color-white);
}



/* 27.02.2025 */

blockquote {
    font-style: italic;
    color: var(--color-main);
    font-size: var(--size-20);
}

blockquote.is--inverted {
    color: var(--color-white);
}

iframe {
    border-radius: var(--size-16);
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.image.is--overflowing {
    width: 100vw;
    left: 50%;
    translate: -50%;
    position: relative;
}

.map {
    aspect-ratio: 3 / 2;
    width: 100vw;
    left: 50%;
    translate: -50%;
    position: relative;
    overflow: hidden;
}

.map svg {
    width: 250%;
    height: 250%;
    translate: -33% -22%;
}

.map #locations {
    transition: var(--transition);
}

.slider {
    width: 100%;
    /* overflow: hidden; removed */
    position: relative; /* added */
}

/* .logo-container.image.is--white, .logo-container.image.is--dark {
    background: var(--color-black-fade-10);
} */

#hero .logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.subline {
    font-size: var(--size-16);
    color: var(--color-main);
    margin: 0;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.subline ~ h2 {
    margin-top: .25em;
}

.image.is--badge img {
    width: 75%;
    max-width: var(--size-96);
    margin: 0 auto;
}

.columns {
    margin: var(--size-64) 0; /* added */
}

.image.is--dark img {
    aspect-ratio: 5 / 3;
    object-fit: contain;
    /* moved negative margin-top to only ostra logos */
}

.image.is--dark img[src*="ostra"] {
    margin-top: -1em;
}

@media(min-width: 64em) {
    /* moved selector to only desktop */
    .columns.align--center { 
        align-items: center;
    }

    .columns .column .image.is--overflowing {
        width: 50vw;
        translate: none;
    }

    .columns .column:first-child .image.is--overflowing {
        left: unset;
        right: 0;
    }

    .columns .column:last-child .image.is--overflowing {
        left: 0;
    }
}

@media only screen and (max-width: 64em) {
    .columns.is--mobile-reverse {
        flex-direction: column-reverse;
    }
}



/* 08.04.2025 */

/* removed */
/* body.is--home.js--enabled header:not(.is--scrolled):not(.menu--open) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
    border-bottom-color: transparent;
}

body.is--home.js--enabled header:not(.is--scrolled) section {
    padding: 0;
}

body.is--home.js--enabled header:not(.is--scrolled):not(.menu--open) section > a {
    max-width: 8em;
}

body.is--home header.is--scrolled section > a:not(.logo):after, body.is--home header.menu--open section > a:not(.logo):after {
    opacity: 0;
    visibility: hidden;
}

.map-location {
    list-style: none;
    padding: 0;
    font-size: 1em;
    display: flex;
    flex-direction: column;
    gap: var(--size-16);
} 
    
.map-container .slider > .button {
    top: unset;
    bottom: calc(100% + var(--size-16));
    transform: none;
} 
    
.grid.capacity .icon-text .icon {
    background-color: transparent;
    border: none;
    padding: 0;
} */

.logo-container {
    z-index: 2;
    max-width: 16em;
    width: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    aspect-ratio: 1;
    background-color: var(--color-black-fade-logo);
    border: 2px solid var(--color-white);
    backdrop-filter: blur(.5em);
    -webkit-backdrop-filter: blur(.5em);
    /* added background blur */
}

.icon-text.is--tertiary .icon-text-content {
    padding-top: 0;
}
 
.icon-text.is--tertiary > .icon {
    padding: 0;
    width: 1em;
    height: 1em; /* added */
    border: none;
    background: transparent;
    border-radius: 0;
    fill: var(--color-main);
}

button.map-location { /* added */
    cursor: pointer;
}

.map-location .link-box-content { /* changed selector */
    /* width: 100%;
    line-height: inherit; */
    display: flex;
    align-items: center;
    gap: var(--size-32);
    /* font-family: inherit;
    text-align: left;
    border-radius: var(--size-16);
    border: none;
    padding: var(--size-24);
    background: var(--color-white-fade-10);
    transition: var(--transition); */
}

.map-location.is--active { /* changed selector */
    background: var(--color-main);
}

.map-location.is--active .icon-text > .icon {
    fill: var(--color-black);
}

.map-location .logo-container {
    flex: 0 0 auto;
    width: var(--size-128);
}

.map-location .grid {
    margin: 0;
}

.map-location .icon-text ul {
    padding: 0;
    list-style: none;
}

.map-container.has--default-location .map #points circle {
    pointer-events: none;
}

.map-container .slider, .map-container > .map-location {
    position: relative;
    z-index: 3;
    max-width: 32rem;
    margin: 0 auto;
}

.map {
    margin-bottom: var(--size-24);
}

.map text {
    font-size: var(--size-8);
    fill: var(--color-black);
    stroke: var(--color-white);
    stroke-width: .5em;
    paint-order: stroke;
    stroke-linejoin: round;
    font-weight: 500;
    dominant-baseline: middle;
    text-anchor: middle;
    line-height: 1;
}

.map path {
    fill-rule: evenodd;
    clip-rule: evenodd;
}

.map #messe text {
    font-size: var(--size-6);
    fill: var(--color-white);
    stroke-width: 0;
}

.map #strassen {
    stroke: #414142;
    fill: #353535;
    stroke-width: 1.5px;
}

.map #autobahn {
    stroke: #353535;
    fill: #414142;
    stroke-width: 3px;
}

.map #elbe {
    fill: #A1DAF8;
}

.map .shape {
    fill: var(--color-black);
}

.map .outline {
    fill: var(--color-white);
}

.map #points circle {
    fill: var(--color-main); /* changed */
    r: var(--size-6);
    transition: var(--transition);
    cursor: pointer; /* added */
}

.map #points circle.is--active {
    /* fill: var(--color-main); */
    r: var(--size-12);
}

.map #points circle.is--disabled { /* added */
    fill: var(--color-white);
    opacity: 1;
}

body.is--white .map #points circle.is--disabled { /* added */
    fill: var(--color-black);
}

.image.logo { /* added width for firefox bug */
    font-size: 1em;
    width: var(--size-128);
}

.grid.is--ostra-cricles .link-box .link-box-content {
    border-radius: 50%;
   aspect-ratio: 1;
   display: flex;
   align-items: center;
   background-color: var(--color-black-fade-logo);
   border: 2px solid var(--color-white);
   max-width: 10em;
   width: 100%; /* changed */
}

body.is--white { 
    background-color: var(--color-white);
}

body.is--white section {
    z-index: 1;
}

body.is--white header.menu--open {
    background: var(--color-white-fade-75);
}

body.is--white .logo {
    color: var(--color-black);
}

body.is--white #open-menu .icon, body.is--white #open-menu .icon::before, body.is--white #open-menu .icon::after {
    background: var(--color-black);
}
body.is--white header ul.menu.is--social li a {
    fill: var(--color-black);
}

body.is--white header {
    border-bottom: var(--color-white-fade-75);
    background-color: var(--color-white-fade-75);
}

body.is--white .button.is--inverted.is--tertiary {
    color: var(--color-black);
}

body.is--white h1, body.is--white h2, body.is--white h3, body.is--white h4, body.is--white h5, body.is--white h6 {
    color: var(--color-black);
}

body.is--white p, body.is--white ul, body.is--white ol {
    color: var(--color-black);
}

body.is--white .link-box {
    background: linear-gradient(to bottom, var(--color-main-fade-5), var(--color-main-fade-10), var(--color-main-fade-15)) 0 0 / 100% 200%;
    border-color: var(--color-main-fade-10);
}

body.is--white .map-location.is--active {
    background: var(--color-main);
}

body.is--white .map-location.is--active h3, body.is--white .map-location.is--active strong, body.is--white .map-location.is--active ul {
    color: var(--color-white);
}

body.is--white .map-location.is--active p {
    color: var(--color-white-fade-75);
}

body.is--white strong {
    color: var(--color-black);
}

body.is--white strong body.is--white button p {
    color: var(--color-black);
}

body.is--white .map-container .figure.is--white{
    background-color: var(--color-black);
    border-color: var(--color-black);
}

body.is--white ul.menu li a {
    color: var(--color-black);
    fill: var(--color-black);
}

body.is--white .columns .align--center .big--gap{
    color: var(--color-white);
}

body.is--white footer *{
    color: var(--color-white);
}

body.is--white footer .logo {
    color: var(--color-white);
}

body.is--white footer li a {
    color: var(--color-white) !important;
}

.map path.is--active {
    fill: var(--color-black);
}

body.is--white .logo-container figure {
    background-color: transparent;
}

body.is--white section[style*="--background: url"]::before,
body.is--white .wrapper[style*="--background: url"]::before {
    mix-blend-mode: unset;
    opacity: .1;
}

body.is--white .background--blur {
    background: linear-gradient(to bottom,var(--color-main-fade-15),var(--color-main-fade-25));
    border-color: var(--color-main-fade-25);
}

body.is--white .image.is--white, 
body.is--white .image.is--dark img {
    filter: brightness(0);
}
body.is--white .logo-container {
    background-color: var(--color-white-fade-50);
}

.slider.swiper-initialized .swiper-slide.swiper-slide-active,
.slider.swiper-initialized .swiper-slide.swiper-slide-visible { /* added line */
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

body.is--white .map #messe text {
    fill: var(--color-white);
}

body.is--white .map #strassen {
    stroke: #F1EFEA;
    fill: #FAF9F6;
}

body.is--white .map #autobahn {
    stroke: #FAF9F6;
    fill: #F1EFEA;
}

body.is--white .map #points path {
    fill: var(--color-black);
}

body.is--white .map #points path.is--active { 
    fill: var(--color-main);
}

body.is--white {
    color: var(--color-black);
}

body.is--white .icon-text.is--primary > .icon {
    fill: var(--color-white);
}

body.is--white .icon-text.is--secondary > .icon {
    background: linear-gradient(to bottom,var(--color-main-fade-5),var(--color-main-fade-10));
    border-color: var(--color-main-fade-10);
    backdrop-filter: unset;
}

body.is--white .icon-text > .icon {
    fill: var(--color-main);
}

.map-container .slider.swiper-initialized .swiper-slide { /* changed moved out of media query */
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.image {
    width: 100%; /* added to fix no svg logo width */
}

#intro h1 {
    color: var(--color-white);
    text-shadow: 0 0 .25em var(--color-black);
}

#intro::before {
    mix-blend-mode: unset;
    opacity: 1;
}

body.is--white .accordion summary {
    color: var(--color-black);
}

body.is--white .subline {
    color: var(--color-main);
}

.no--style, .no--style li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.slider.is--history img {
    width: auto;
    max-width: 100%;
}

.image--list {
    display: flex;
    gap: var(--size-16);
}

.image--list li {
    flex: 1;
}

.slider.is--history h3 {
    display: inline-block;
    margin-bottom: var(--size-24);
    background: var(--color-white-fade-5);
    padding: var(--size-8) var(--size-12);
    text-transform: uppercase;
    letter-spacing: .1em;
    border-radius: var(--size-8);
}

.slider.is--history > .button {
    top: 0;
    transform: none;
}

.slider.is--history > .button.is--next {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.slider.is--history > .button.is--prev {
    left: unset;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    right: var(--size-48);
}

.slider.is--history .swiper-wrapper::before {
    content: "";
    position: absolute;
    top: var(--size-96);
    left: 0;
    width: 1000vw;
    height: 2px;
    background: var(--color-white-fade-5);
}

body.is--white .slider.is--history h3, .slider.is--history .swiper-wrapper::before {
    background: var(--color-black-fade-10);
}

.flip-card-module {
    perspective: 1000px;
}

.flip-card-module .card {
    border-radius: var(--size-12);
    display: grid;
    transform-style: preserve-3d;
    transition: var(--transition);
    border: none;
    box-shadow: var(--box-shadow);
    text-align: center;
    font-family: inherit;
    cursor: pointer;
    transform-style: preserve-3d;
    line-height: inherit;
    width: 100%;
    height: 100%;
    min-height: calc(var(--size-128) * 2.5);
}

.flip-card-module .card-face {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: 100%;
    padding: var(--size-24);
    border-radius: var(--size-12);
}

.card .card-title {
    margin: 0;
    font-size: var(--size-16);
}

body.is--white .flip-card-module .card-face--front {
    background: var(--color-white);
    color: var(--color-white);
}
.flip-card-module .card-face--front {
    background: var(--color-black);
    color: var(--color-black);
}

.flip-card-module .card-face--back {
    background: var(--color-main);
    color: var(--color-white);
    transform: rotateY(180deg); 
}

.flip-card-module .card.is--flipped {
    transform: rotateY(180deg);
}

@media (hover: hover) {
    .flip-card-module li:hover .card {
        transform: rotateY(180deg);
    }
}

.flip-card-module .card .icon.is--top-right {
    position: absolute;
    top: var(--size-12);
    right: var(--size-12);
    font-size: var(--size-20);
}

body.is--white .flip-card-module .card .icon.is--top-right {
    fill: var(--color-grey);
    opacity: .5;
}

.tabs .tab-navigation {
    list-style: none;
    padding: 0;
    /* margin: 0; */
    display: flex;
    justify-content: center;
    /* border-radius: var(--size-12);
    overflow: hidden;
    max-width: 40em; */
    margin: 4.5em auto;
    text-align: center; /* added */
}

.tabs .tab-navigation li {
    flex: 1 1 100%;
    max-width: calc(var(--size-128) * 2); /* added */
}

.tabs .tab-navigation li a {
    padding: var(--size-12) var(--size-16);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration: none;
    color: var(--color-black);
    fill: var(--color-black);
    background: var(--color-white);
    line-height: 1; /* added */
}

.tabs .tab-navigation li:first-child a {
    border-radius: var(--size-12) 0 0 var(--size-12);
}

.tabs .tab-navigation li:last-child a {
    border-radius: 0 var(--size-12) var(--size-12) 0;
}

/* moved selector down to overwrite */
.tabs.is--multistep .tab-navigation li a {
    width: var(--size-28);
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 0;
    color: var(--color-white);
    fill: var(--color-white);
    background: var(--color-main-fade-50);
}

#intro {
    padding: 12em 0 8em 0; /* changed */
}

@media (min-width: 64em) {
    /* removed */
    /* body.is--home.js--enabled header:not(.is--scrolled):not(.menu--open) section > a {
        max-width: 16em;
    }

    .map-container .slider .swiper-wrapper {
        transform: none !important;
        flex-direction: column;
        gap: var(--size-16) !important;
    }
    
    .map-container .slider > .button {
        display: none;
    } */

    .map svg { /* changed values */
        width: 175%;
        height: 175%;
        translate: -22% -21%
    }

    .map {
        aspect-ratio: 2/1; /* changed */
        /* border-radius: 50%; */
        width: 100%;
        left: unset;
        translate: unset;
        /* border: 2px solid var(--color-white); */
    }

    .slider.is--history .swiper-wrapper::before {
        top: var(--size-64);
    }

    .tabs .tab-navigation li {
        max-width: calc(var(--size-128) * 1.5); /* added */
    }

    .flip-card-module .card {
        min-height: calc(var(--size-128) * 1.5);
    }

    #intro {
        padding: 16em 0 12em 0; /* changed */
    }
}