@font-face {
    font-family: 'ABCFavoritPro-Regular';
    /* Ensure your font files are located in a 'fonts' directory at the root of your project */
    src: url('../fonts/ABCFavoritPro-Regular.woff2') format('woff2'),
        url('../fonts/ABCFavoritPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow-x: clip;
    /* Prevent horizontal body scrolling */
    font-family: 'ABCFavoritPro-Regular', sans-serif;
    scroll-behavior: smooth;
    background-color: #f2f2f2;
    color: black;
    line-height: 1.25;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

.safari-fix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 36;
    margin-top: -20dvh;
    padding-top: 20.1dvh;
}

#start {
    width: 100%;
    /* before height: calc(50dvh - 3rem); */
    position: relative;
    display: flow-root;
    /* Verhindert Margin-Collapsing des ersten Kind-Elements */
    /* Added to establish a positioning context for absolutely positioned children */
}

#projects {
    position: relative;
    margin-top: 2rem;
}

.swiper {
    position: sticky;
    top: 5.5rem;
    width: 100%;
    height: auto;
    overflow: visible;
    z-index: 35;
}

.swiper-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: transparent;
    z-index: 33;
}

.swiper-wrapper {
    overflow-y: visible;
    align-items: flex-start;
}

.swiper-slide {
    position: relative;
    overflow: visible;
    height: auto;
    top: 0;
    -webkit-overflow-scrolling: touch;
    background-color: transparent;
    color: black;
    padding-left: 25px;
    padding-right: 25px;
    box-sizing: border-box;
}

.slide-section {
    box-sizing: border-box;
    z-index: 35;
}

.sticky-header {
    width: 100%;
    /* Behält die volle Breite */
    height: calc(100vh - 15px - 3.7rem);
    /* Verwendet vh für stabile Höhe */
    position: sticky;
    top: calc(15px + 3.7rem);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.sticky-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.proj-title {
    /* .proj-title liegt jetzt IM .sticky-header und teilt sich dessen sticky-Box.
       Dadurch lösen sich beide garantiert im selben Moment aus dem sticky-Zustand -
       keine separate top/height-Berechnung mehr nötig. */
    position: absolute;
    top: -1.9rem;
    /* = Differenz der bisherigen top-Werte (calc(15px+3.7rem) - calc(15px+1.8rem)),
       damit der Titel optisch an derselben Stelle wie vorher sitzt */
    left: 0;
    width: 100%;
    text-align: left;
    font-size: 1.5rem;
    z-index: 2;
    /* über dem <img>, innerhalb der .sticky-header-Box */
    color: black;
}

.content-area {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    opacity: 0;
    /* Hidden by default */
    visibility: hidden;
    /* Hidden by default */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    /* Smooth transition */
    z-index: 40;
}

.half {
    width: 50%;
    /* Behält die halbe Breite */
    height: calc(100vh - 15px - 3.7rem);
    /* Verwendet vh für stabile Höhe */
    z-index: 2;
    position: sticky;
    top: calc(15px + 3.7rem);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    font-size: 1.5rem;
    text-align: center;
}

.half>div:not(.text-box):not(.small):not(.small-crop):not(.low):not(.up):not(.text-box-flex) {
    width: 100%;
    height: 100%;
    position: relative;
}

.half div.low {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: #f2f2f2;
    will-change: transform;
}

.half div.up {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: #f2f2f2;
    will-change: transform;
}

.half .small {
    height: auto;
    position: relative;
    margin: 45px 55px;
    width: calc(100% - 50px);
}

.half .small-crop {
    height: 100%;
    position: relative;
    max-height: calc(100% - 90px);
    margin: 45px 55px;
    width: calc(100% - 50px);
}

.half .small-crop img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: top;
    display: block;
}

.rounded {
    border-radius: 25px;
}

.small-crop.rounded {
    border-radius: 25px;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
}

.small-crop.rounded img {
    border-radius: 25px;
    flex-shrink: 0;
}

.small-crop.rounded .image-caption {
    margin-left: 20px;
    position: static;
    pointer-events: auto;
    text-align: left;
}

.half img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.half img[src*="HEER-Schrift_StudioHeer_Overview"] {
    width: auto;
    object-fit: contain;
    margin: 0 auto;
}

.half.double {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.half.double > div {
    flex: 1;
    overflow: hidden;
}

.half.double img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.half > div:has(> img[src*="Daniel-Heer_Brochure01_MUS"]) {
    position: relative;
}

.half > div > img[src*="Daniel-Heer_Brochure01_MUS"] {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: auto;
}

.wide-content {
    width: 100%;
    /* Behält die volle Breite */
    height: calc(100vh - 15px - 3.7rem);
    /* Verwendet vh für stabile Höhe */
    z-index: 2;
    position: sticky;
    overflow: hidden;
    top: calc(15px + 3.7rem);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}

.wide-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.wide-crop {
    width: 100%;
    height: calc(100vh - 15px - 3.7rem);
    z-index: 2;
    position: sticky;
    overflow: hidden;
    top: calc(15px + 3.7rem);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    padding: 30px;
    box-sizing: border-box;
}

.wide-crop img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.more-content {
    position: relative;
    width: 100%;
    height: calc(100vh - 15px - 3.7rem);
    z-index: 2;
    position: sticky;
    overflow: hidden;
    top: calc(15px + 3.7rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0;
    background-color: #f2f2f2;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    padding: 15px 10px;
    box-sizing: border-box;
    height: calc(100vh - 15px - 3.7rem);
    gap: 10px;
}

.grid > div {
    position: relative;
    overflow: hidden;
}

.grid img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.more-content > div {
    position: relative;
    overflow: hidden;
}

.more-content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.more-content > div:first-child img {
    width: auto;
    height: 100%;
    object-fit: contain;
    justify-self: start;
}

/* Make content visible when the class is added */
.content-area.content-visible {
    opacity: 1;
    visibility: visible;
}

.small-content {
    width: 100%;
    /* Behält die volle Breite */
    height: calc(100vh - 5.5rem);
    /* Verwendet vh für stabile Höhe */
    background-color: transparent;
    z-index: 2;
    position: sticky;
    overflow: hidden;
    top: 5.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}

.small-content img {
    width: 960px;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.slide-3 .small-content img {
    width: 800px;
    max-width: 100vw;
}

.slider-container {
    position: relative;
    /* Größe anpassen, je nach Layout. Bilder passen sich prozentual an. */
    width: 400px;
    height: 500px;
    margin: 50px auto;
}

.slider-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: transparent;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    /* 0.8s Dauer für die fließende Bewegung. Das Timing muss zum JS passen. */
    transition: transform 0.8s ease-in-out;
}

.text-box {
    background-color: #f2f2f2;
    color: black;
    padding: .24rem 15px 15px 15px;
    box-sizing: border-box;
    text-align: left;
    font-size: 1.5rem;
}

.text-box-flex {
    background-color: #f2f2f2;
    color: black;
    height: auto;
    min-height: 0;
    padding: .24rem 15px 15px 15px;
    box-sizing: border-box;
    text-align: left;
    font-size: 1.5rem;
    display: inline-block;
}

.kontakt-start {
    position: fixed;
    top: 15px;
    left: 25px;
    font-size: 1.5rem;
    z-index: 30;
    /* über Swiper */
}

.insta {
    position: fixed;
    top: calc(15px + 5.5rem);
    /* unterhalb von mail + phone */
    left: 25px;
    font-size: 1.5rem;
    z-index: 10;
    /* unter project-item — passe den Wert an den Z-Index von project-item an */
    text-decoration: none;
    color: inherit;
}

.mail {
    position: relative;
    z-index: 30;
}

.title {
    position: fixed;
    z-index: 50;
    font-size: 1.5rem;
    top: 15px;
    left: 25px;
    text-decoration: none;
    color: black;
    cursor: pointer;
}

.center-text {
    position: relative;
    text-align: left;
    width: fit-content;
    z-index: 40;
    font-size: 2.5rem;
    margin-top: calc(15px + 11.1rem);
    margin-left: 25px;
}

.center-text.change {
    display: none;
    /* Initial versteckt */
}

.center-text.mobile {
    display: none;
}

.center-text.desktop {
    display: block;
}

/* Scroll-Loop Animation Styles */
.scrolling-text-wrapper {
    display: inline-grid;
    vertical-align: bottom;
    overflow: hidden;
    height: 1.2em;
    /* Entspricht der Line-Height */
    transition: width 0.4s ease;
}

.scrolling-item {
    grid-area: 1 / 1;
    white-space: nowrap;
    display: flex;
}

.letter {
    display: inline-block;
    transition: opacity 0.4s ease;
    will-change: opacity;
    opacity: 1;
}

.letter-hidden {
    opacity: 0;
}

.closing-bracket {
    display: inline-block;
    transition: transform 0.4s ease;
}

#main-menu {
    position: fixed;
    top: calc(15px + 1.8rem);
    right: 5px;
    padding-right: 20px;
    color: black;
    line-height: 1.25;
    z-index: 50;
}

#main-menu.is-hidden-by-swiper {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
    /* Align text to the right */
}

#main-menu li,
#main-menu li {
    position: relative;
}

#main-menu a,
#main-menu a {
    text-decoration: none;
    color: inherit;
    font-size: 1.5rem;
}

/* Rotate the 'M' in the menu */
li[data-menu-target="start"] a {
    display: inline-block;
    text-decoration: none;
    color: black;
    transform: rotate(90deg) translate(-.1rem);
}

#info-menu {
    position: fixed;
    top: calc(15px + 3.85rem);
    /* unter Arbeiten (+ Index (5.5rem)) */
    right: 5px;
    padding-right: 20px;
    color: black;
    line-height: 1.25;
    list-style: none;
    margin-top: 0;
    padding: 0;
    padding-right: 20px;
    font-size: 1.5rem;
    z-index: 50;
    /* wie .menu-m/#main-menu - wird per JS auf 34 gesenkt, wenn vom Swiper-Inhalt überlappt */
}

#info-menu a {
    text-decoration: none;
    color: inherit;
}

#info-menu li {
    position: relative;
}

#legal-menu {
    position: fixed;
    bottom: 15px;
    right: 25px;
    font-size: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Keine Transition für sofortiges Ein-/Ausblenden */
    transition: opacity 0.1s;
    /* Nur Opacity mit kurzer Transition für sanfteres Erscheinen */
}

#legal-menu.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#legal-menu a {
    text-decoration: none;
    color: inherit;
    color: black;
}

.menu-m {
    position: fixed;
    top: 15px;
    right: 5px;
    margin-right: 20px;
    z-index: 50;
    font-size: 1.5rem;
    list-style: none;
}

.menu-m a {
    position: relative;
}

/* Active menu item dot indicator */
#main-menu li {
    position: relative;
}

#main-menu li::before,
#info-menu li::before,
#legal-menu li::before,
.menu-m::before {
    content: '';
    position: absolute;
    right: -16.5px;
    top: 50%;
    transform: translateY(-65%) scale(0);
    width: 8px;
    height: 8px;
    border: 2px solid black;
    background-color: black;
    border-radius: 50%;
    z-index: 65;
    opacity: 0;
}

#main-menu li.active-item::before,
#info-menu li.active-item::before,
#legal-menu li.active-item::before,
.menu-m.active-item::before {
    opacity: 1;
    animation: dot-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#main-menu li.dot-leaving::before,
#info-menu li.dot-leaving::before,
#legal-menu li.dot-leaving::before,
.menu-m.dot-leaving::before {
    opacity: 1;
    animation: dot-out 0.18s ease-in forwards;
}

@keyframes dot-in {
    0% {
        transform: translateY(-65%) scale(0);
        border-radius: 50%;
    }

    40% {
        transform: translateY(-65%) scale(1.35);
        border-radius: 50%;
    }

    55% {
        transform: translateY(-65%) scaleX(0.75) scaleY(1.2);
        border-radius: 40%;
    }

    70% {
        transform: translateY(-65%) scaleX(1.15) scaleY(0.88);
        border-radius: 50%;
    }

    82% {
        transform: translateY(-65%) scaleX(0.93) scaleY(1.07);
        border-radius: 50%;
    }

    91% {
        transform: translateY(-65%) scaleX(1.04) scaleY(0.97);
        border-radius: 50%;
    }

    100% {
        transform: translateY(-65%) scale(1);
        border-radius: 50%;
    }
}

@keyframes dot-out {
    0% {
        transform: translateY(-65%) scale(1);
        border-radius: 50%;
        opacity: 1;
    }

    60% {
        transform: translateY(-65%) scaleX(0.67) scaleY(1.0);
        border-radius: 40%;
        opacity: 1;
        width: 8px;
        height: 12px;
    }

    100% {
        transform: translateY(-65%) scale(0);
        border-radius: 50%;
        opacity: 0;
    }
}

#legal-menu li {
    position: relative;
    list-style: none;
}

#main-menu li[data-menu-target="portfolio"].active-item::before {
    display: none;
}

/* Container for the portfolio slide dots */
.menu-links-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: calc(15px + 1.8rem);
    transform: translateY(15px);
    padding-right: 25px;
    z-index: 45;
    height: 0;
    pointer-events: none;
    padding-bottom: 1.9rem;
}

.menu-links-container.no-transform {
    transform: translateY(0);
    top: calc(15px + 2.75rem);
}

.menu-link {
    pointer-events: auto;
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 2px solid black;
    border-radius: 100%;
    padding: 0 !important;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    background-color: transparent;
    transition: border-color 0.2s ease;
}

.menu-link.active-slide {
    animation: dot-in-fill 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    text-decoration: none;
}

.menu-link.dot-leaving {
    animation: dot-out-fill 0.18s ease-in forwards;
}

@keyframes dot-in-fill {
    0% {
        transform: scale(0);
        background-color: transparent;
        border-radius: 50%;
    }

    40% {
        transform: scale(1.35);
        background-color: black;
    }

    55% {
        transform: scaleX(0.75) scaleY(1.2);
        border-radius: 40%;
    }

    70% {
        transform: scaleX(1.15) scaleY(0.88);
        border-radius: 50%;
    }

    82% {
        transform: scaleX(0.93) scaleY(1.07);
    }

    91% {
        transform: scaleX(1.04) scaleY(0.97);
    }

    100% {
        transform: scale(1);
        background-color: black;
        border-radius: 50%;
    }
}

@keyframes dot-out-fill {
    0% {
        transform: scale(1);
        background-color: black;
        opacity: 1;
    }

    60% {
        transform: scaleX(0.67) scaleY(1.0);
        border-radius: 40%;
        opacity: 1;
    }

    100% {
        transform: scale(0);
        background-color: black;
        opacity: 0;
    }
}

.menu-link.active-slide {
    background-color: black;
    text-decoration: none;
}

.menu-link:hover {
    text-decoration: none;
}

.kontakt-start a {
    color: black;
    text-decoration: none;
}

.superscript {
    font-size: 1rem;
    line-height: 1.2;
    color: #000;
    text-decoration: none;
}

.info {
    position: relative;
    margin-top: 4.6rem;
    padding-right: 150px;
    z-index: 41;
}

#index {
    padding-left: 25px;
    padding-right: 25px;
}

.index-filters-bg {
    position: sticky;
    top: 0;
    background-color: #f2f2f2;
    z-index: 25;
    height: 6.7rem;
    pointer-events: none;
    /* Kompensation des Frame-Paddings für volle Breite */
    margin-left: -25px;
    margin-right: -25px;
    /* Angepasst an das neue Index-Padding */
    opacity: 0;
    visibility: hidden;
}

.index-filters {
    display: flex;
    position: sticky;
    top: 4.6rem;
    width: fit-content;
    justify-content: flex-start;
    /* Filter linksbündig ausrichten */
    gap: 25px;
    /* Abstand zwischen den Filtergruppen */
    margin-top: 4.6rem;
    padding-top: .3rem;
    z-index: 40;
}

.index-filters-bg.is-visible {
    opacity: 1;
    visibility: visible;
}

.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.filter-group {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.filter-line {
    display: inline-block;
    margin-left: 10px;
    transition: transform 0.3s ease;
    transform-origin: center;
    font-size: 1.5rem;
}

.filter-line.rotated {
    transform: rotate(90deg);
}

.filter-label {
    font-size: 1rem;
    /* Angepasste Größe für Superscript-Effekt */
    position: relative;
}

.filter-active-label {
    margin-left: 10px;
}

.filter-dropdown {
    position: absolute;
    top: 100%;
    /* Position unterhalb des Labels */
    left: 0;
    background-color: #0a0a0a;
    color: #f2f2f2;
    border-radius: 10px;
    padding: 10px;
    width: fit-content;
    /* Angepasst, damit das Dropdown nicht breiter als sein Inhalt ist */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: none;
    /* Standardmäßig ausgeblendet */
    z-index: 31;
}

.filter-dropdown.active {
    display: block;
}

.filter-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.filter-dropdown li {
    padding: 5px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.filter-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid #f2f2f2;
    background-color: transparent;
    flex-shrink: 0;
}

.filter-dropdown li.selected .filter-dot {
    background-color: #f2f2f2;
}

.project-title {
    font-size: 1.5rem;
}

.project-meta {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    /* Entspricht dem Superscript-Stil */
    margin-top: 5px;
    line-height: 1.25;
}

.index-projects-grid {
    display: flex;
    gap: 25px;
    /* Abstand zwischen den Spalten */
}

.column-left,
.column-right {
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
    /* Abstand zwischen Projektelementen in einer Spalte */
}

.project-item {
    z-index: 20;
}

.project-image-wrapper {
    overflow: hidden;
    position: relative;
    background-color: #e0e0e0;
    /* Platzhalter-Hintergrund */
}

.project-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
}

.project-image-wrapper:hover img,
.project-image-wrapper.touch-hover img {
    transform: scale(1.08);
    filter: blur(4px) brightness(1.2);
}

.project-description {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    font-size: 1.5rem;
    color: black;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    text-align: left;
}

.project-image-wrapper:hover .project-description,
.project-image-wrapper.touch-hover .project-description {
    opacity: 1;
}

.project-item.landscape .project-image-wrapper {
    aspect-ratio: 4 / 3;
    /* Querformat */
}

.project-item.portrait .project-image-wrapper {
    aspect-ratio: 3 / 4;
    /* Hochformat */
}

#about {
    height: auto;
    width: calc(50% + 75px);
    box-sizing: border-box;
    padding-left: 25px;
    padding-top: 13.3rem;
    position: relative;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.about-content {
    z-index: 35;
    position: relative;
}

#imprint {
    min-height: 100dvh;
    height: auto;
    box-sizing: border-box;
    padding-left: 25px;
    padding-right: 0;
    /* Padding wird über .frame gesteuert */
    padding-top: 13.3rem;
    padding-bottom: 15px;
    /* Top, LR, Bottom */
    background-color: transparent;
    display: block;
    line-height: 1.25;
}

#datenschutz {
    padding-top: 13.3rem;
    padding-left: 25px;
    padding-bottom: 25px;
}

.datenschutz-content {
    width: calc(50% + 75px);
    z-index: 35;
    position: relative;
}

#datenschutz h2,
#datenschutz h3,
#datenschutz h4 {
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: normal;
}

#datenschutz h2:first-child {
    margin-top: 0;
}

#datenschutz p,
#datenschutz li {
    font-size: 1rem;
}

#datenschutz ul {
    padding-left: 20px;
    margin-bottom: 2rem;
}

.imprint-content {
    width: 100%;
    text-align: left;
    z-index: 35;
    position: relative;
    
}

.imprint-row {
    display: flex;
    margin-bottom: 2rem;
    align-items: flex-start;
}

.imprint-row h2,
.imprint-row h3,
.imprint-data {
    flex: 1;
}

.imprint-data {
    width: fit-content;
}

.imprint-row h2,
.imprint-row h3 {
    flex: 0 0 calc(50% + 75px);
}

.imprint-content h2 {
    font-size: 1.5rem;
    padding-bottom: 0.5rem;
    text-transform: uppercase;
}

.imprint-content h2:first-child {
    margin-top: -.5rem;
    text-transform: uppercase;
}

.imprint-content h3 {
    font-size: 1.5rem;
    text-transform: uppercase;
}

.imprint-content p,
.imprint-content ul {
    font-size: 1.5rem;
}

.imprint-content ul {
    padding-left: 20px;
}

.imprint-content hr {
    border: 0;
    height: 1px;
    background: #ccc;
    margin: 5.5rem 0;
}

.imprint-content h2,
.imprint-content h3,
.imprint-content h4 {
    font-weight: normal;
}

.slide-footer-nav {
    width: 100%;
    display: flex;
    position: relative;
    margin-bottom: -2rem;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 2;
    z-index: 40;
}

.slide-nav-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.slide-nav-prev span {
    margin-left: 15px;
}

.slide-nav-next span {
    margin-right: 15px;
}

.contact-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.contact-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    z-index: 10000;
    padding: 1rem;
    background-color: rgba(242, 242, 242, 0.6);
    color: black;
    border: 1px solid black;
    /* Angepasst an typische Filter-Group Optik */
    backdrop-filter: blur(5px);
}

/* Cal Button Morph Animation */
.cal-morph-wrapper {
    position: relative;
    width: fit-content;
    height: auto;
    border-radius: 30px;
    overflow: hidden;
    transition: width 0.3s ease, height 0.3s ease;
}

.cal-button {
    display: inline-block;
    background-color: white;
    color: black;
    border: 1px solid black;
    border-radius: 30px;
    padding: 8px 16px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

#my-cal-inline {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 30px;
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease;
}

.cal-morph-wrapper.morphing {
    width: 100%;
    max-width: 90vw;
    min-height: 600px;
}

.cal-morph-wrapper.morphing .cal-button {
    display: none;
    opacity: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
}

.cal-morph-wrapper.morphing #my-cal-inline {
    display: flex;
    opacity: 1;
    width: 100%;
    height: 100%;
    overflow: scroll;
}

.contact-dropdown-content.active {
    display: block;
}

.contact-dropdown-content p {
    margin-bottom: 0;
    white-space: nowrap;
}

.contact-dropdown-content ul {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-dropdown-content li {
    margin: 0;
}

.contact-dropdown-content a {
    display: inline-block;
    background-color: white;
    color: black;
    border: 1px solid black;
    border-radius: 30px;
    padding: 8px 16px;
    text-decoration: none;
    white-space: nowrap;
}

.contact-dropdown-content a:hover {
    text-decoration: none;
    background-color: #f0f0f0;
}

/* Darkmode Variante */
.dark-mode .contact-dropdown-content {
    background-color: black;
    color: #f2f2f2;
    border-color: #f2f2f2;
}

.dark-mode .contact-dropdown-content a {
    color: #f2f2f2;
}

.zeichnung {
    display: block;
    background-color: #f2f2f2;
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

.zeichnung-dark {
    display: none;
    background-color: black;
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

#grafik {
    margin-right: -125px;
    margin-top: 13.3rem;
}

@media (max-width: 1024px) {
    .center-text.mobile {
        display: block;
    }

    .center-text.desktop {
        display: none;
    }

    .half {
        width: 100%;
        align-items: flex-start;
    }

    .half img {
        object-position: center top;
    }

    .hide {
        display: none;
    }

    #about {
        width: 100%;
    }

    .imprint-row {
        flex-direction: column;
    }

    .imprint-row h2,
    .imprint-row h3 {
        flex: none;
    }

    .info {
        padding-right: 25px;
        /* Reduziertes Padding für Tablets */
    }

    .datenschutz-content {
        width: 100%;
    }

    .low {
        display: none;
    }

    .more-content {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
    }

    .more-content > div:first-child img,
    .more-content img {
        justify-self: normal;
    }

    .more-content > div:nth-child(3) {
        display: none;
    }

    #grafik {
        margin-right: 0px;
    }
    
    .contact-dropdown-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
}

@media (max-width: 800px) {
    html {
        font-size: .8rem;
    }

    .menu-m,
    #main-menu,
    #info-menu {
        right: -10px;
    }

    #legal-menu {
        right: 10px;
    }

    .center-text {
        font-size: 2rem;
        margin-left: 10px;
        margin-top: calc(15px + 15.7rem);
    }

    .info {
        padding-right: 10px;
        /* Minimales Padding für Mobile */
    }

    .title {
        left: 10px;
    }

    .kontakt-start,
    .kontakt-info,
    .insta {
        left: 10px;
    }

    .swiper-slide {
        padding-left: 10px;
        padding-right: 10px;
    }

    .proj-title {
        padding-left: 0;
        padding-right: 0;
    }

    .text-box {
        padding-left: 0;
        padding-right: 0;
    }

    #about,
    #imprint,
    #datenschutz {
        padding-left: 10px;
        padding-right: 10px;
    }

    .slide-footer-nav {
        padding-left: 0;
        padding-right: 0;
    }

    .menu-links-container {
        padding-right: 10px;
    }

    #my-cal-inline {
        min-height: 850px;
        /* Auf Mobile etwas mehr Höhe einplanen */
    }
}


@media (max-width: 500px) {

    .portfolio-text-original,
    .portfolio-text-hover {
        display: none !important;
    }

    .proj-title .proj-number,
    .proj-title .superscript {
        display: none;
    }

    .center-text {
        font-size: 1.5rem;
    }
}

@media (max-width: 1024px) {
    .index-projects-grid {
        flex-direction: column;
        /* Spalten auf kleineren Bildschirmen stapeln */
    }

    .column-left,
    .column-right {
        flex: none;
        /* Flex-Grow entfernen */
        width: 100%;
    }
}

@media (max-width: 800px) {
    #index {
        padding-left: 10px;
        padding-right: 10px;
    }

    .index-filters {
        gap: 5px;
        padding-left: 0;
        padding-right: 0;
    }

    .index-filters-bg {
        margin-left: -10px;
        margin-right: -10px;
    }

    .index-filters-bg {
        margin-left: -10px;
        margin-right: -10px;
    }
}

.info-footer-links {
    position: fixed;
    bottom: 15px;
    /* Ausrichtung mit dem Padding der Sektion */
    right: 25px;
    /* Ausrichtung mit dem Padding der Sektion */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    /* Abstand zwischen den Links */
    z-index: 1100;
    /* Höher als Title und Menu */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.info-footer-links.is-visible {
    opacity: 1;
    visibility: visible;
}

.info-footer-links a {
    font-size: 1rem;
    color: inherit;
    /* Farbe vom Elternelement erben */
    text-decoration: none;
}

.info-footer-links a:hover {
    text-decoration: underline;
}

#grafik img {
    width: 100%;
    height: auto;
}

#grafik .mus-logo {
    display: block;
}

#grafik .mus-logo-dark {
    display: none;
}

@media (prefers-color-scheme: dark) {

    html,
    body,
    .text-box {
        background-color: black;
        color: #f2f2f2;
    }

    .info {
        color: #f2f2f2;
    }

    .swiper {
        color: #f2f2f2;
    }

    .title,
    .kontakt-start a,
    .kontakt-info a,
    #main-menu,
    #main-menu a,
    .menu-info a,
    .menu-m,
    .swiper-slide,
    .proj-title,
    .superscript {
        color: #f2f2f2;
    }

    #main-menu li::before,
    #info-menu li::before,
    #legal-menu li::before,
    .menu-m::before {
        border-color: #f2f2f2;
        background-color: #f2f2f2;
    }

    .zeichnung {
        display: none;
    }

    .zeichnung-dark {
        display: block;
    }

    #grafik .mus-logo {
        display: none;
    }

    #grafik .mus-logo-dark {
        display: block;
    }

    .menu-link.active-slide {
    animation-name: dot-in-fill-dark;
}

.menu-link.dot-leaving {
    animation-name: dot-out-fill-dark;
}

@keyframes dot-in-fill-dark {
    0% {
        transform: scale(0);
        background-color: transparent;
        border-radius: 50%;
    }

    40% {
        transform: scale(1.35);
        background-color: #f2f2f2;
    }

    55% {
        transform: scaleX(0.75) scaleY(1.2);
        border-radius: 40%;
    }

    70% {
        transform: scaleX(1.15) scaleY(0.88);
        border-radius: 50%;
    }

    82% {
        transform: scaleX(0.93) scaleY(1.07);
    }

    91% {
        transform: scaleX(1.04) scaleY(0.97);
    }

    100% {
        transform: scale(1);
        background-color: #f2f2f2;
        border-radius: 50%;
    }
}

@keyframes dot-out-fill-dark {
    0% {
        transform: scale(1);
        background-color: #f2f2f2;
        opacity: 1;
    }

    60% {
        transform: scaleX(0.67) scaleY(1.0);
        border-radius: 40%;
        opacity: 1;
    }

    100% {
        transform: scale(0);
        background-color: #f2f2f2;
        opacity: 0;
    }
}

    .menu-link {
        border-color: #f2f2f2;
    }

    .menu-link.active-slide {
        background-color: #f2f2f2;
    }

    li[data-menu-target="start"] a {
        color: white;
    }

    .slide-nav-btn {
        color: #f2f2f2;
    }

    #index,
    .index-filters,
    .index-filters-bg {
        background-color: black;
        color: #f2f2f2;
    }

    .filter-dropdown {
        background-color: #f2f2f2;
        color: black;
    }

    .filter-dropdown .filter-dot {
        border-color: black;
    }

    .filter-dropdown li.selected .filter-dot {
        background-color: black;
    }

    .info-footer-links a,
    #legal-menu a {
        color: #f2f2f2;
    }

    /* Klassen mit #f2f2f2 Hintergrund oder black Text, die in index.html verwendet werden */
    .text-box-flex,
    .half div.low,
    .half div.up,
    .more-content {
        background-color: black;
    }

    .text-box-flex,
    .caption-box {
        color: #f2f2f2;
    }

    /* Inline-Stile in index.html mit background-color: #f2f2f2 */
    [style*="background-color: #f2f2f2"],
    [style*="background-color:#f2f2f2"] {
        background-color: black !important;
    }

    /* Inline-Stile in index.html mit color: black */
    [style*="color: black"],
    [style*="color:black"] {
        color: #f2f2f2 !important;
    }

    /* Weitere Text-Elemente mit color: black */
    .project-description,
    .contact-dropdown-content,
    #info-menu {
        color: #f2f2f2;
    }

    /* Hintergrundfarbe für contact-dropdown-content anpassen */
    .contact-dropdown-content {
        background-color: rgba(0, 0, 0, 0.6);
        border-color: #f2f2f2;
    }

    /* Hintergrundfarbe und border für cal-button anpassen */
    .cal-button {
        background-color: #f2f2f2;
        border-color: #f2f2f2;
    }
}

.is-blurry {
    filter: blur(5px) opacity(50%);
    transition: filter 0.3s ease-out;
}

.caption-box {
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%;
    color: black;
    font-size: 1rem;
    box-sizing: border-box;
    text-align: left;
}

.image-caption {
    position: absolute;
    bottom: 30px;
    left: 30px;
    font-size: 1rem;
    z-index: 10;
    pointer-events: none;
    line-height: 1;
    text-align: left;
}

.small-crop .image-caption {
    bottom: -10px;
    left: -20px;
}