/* ===================================
   Fafleralp - Hauptstil
   =================================== */

/* ===================================
   ZIMMER-DETAIL ELEMENT
   =================================== */

.zimmer-detail-element {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: #ffffff;
    padding: 120px 0;
    overflow-x: hidden;
}

.zimmer-detail-wrapper {
    position: relative;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 120px;
    box-sizing: border-box;
}

/* Hauptbereich: Zwei-Spalten-Layout - Bild links (2/3), Text rechts (1/3) */
.zimmer-detail-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
    align-items: stretch;
    position: relative;
}

/* Linke Spalte: Hauptbild - 2/3 Breite, mit etwas Abstand links */
.zimmer-detail-main-image {
    width: calc(100% + 80px);
    margin-left: -80px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f5f5f5;
    position: relative;
}

.zimmer-detail-image-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Rechte Spalte: Text-Bereich - minimalistisch */
.zimmer-detail-content {
    background: #ffffff;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 40px;
    height: 100%;
    align-self: stretch;
}

/* Titel - sehr groß */
.zimmer-detail-title {
    font-family: 'HALTimezone', serif;
    font-size: 5.5em;
    font-weight: normal;
    font-style: italic;
    line-height: 1.1;
    color: #000000;
    margin: 0;
    padding: 0;
    letter-spacing: -0.02em;
}

/* Kategorie - h2 unter dem Titel */
.zimmer-detail-category {
    font-family: 'HALTimezone', serif;
    font-size: 1.8em;
    font-weight: normal;
    font-style: italic;
    line-height: 1.3;
    color: #666666;
    margin: -10px 0 0 0;
    padding: 0;
    letter-spacing: -0.01em;
}

/* Specs als Badges mit Icons - Schwarz-Weiß Optik */
.zimmer-detail-specs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.zimmer-detail-spec-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: #000000;
    border-radius: 4.15rem;
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    white-space: nowrap;
    border: 1px solid #000000;
}

.zimmer-detail-spec-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
}


/* Bild-Galerie unten - Swiper mit asymmetrischem Layout */
.zimmer-detail-gallery {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: #ffffff;
    padding: 80px 0 0 0;
    margin-top: 80px;
}

.zimmer-detail-gallery-swiper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0 80px;
    box-sizing: border-box;
}

.zimmer-detail-gallery-swiper-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 100px;
    transition: transform 0.5s ease;
    will-change: transform;
    cursor: grab;
    min-height: 800px;
    align-content: flex-start;
}

.zimmer-detail-gallery-swiper-wrapper:active {
    cursor: grabbing;
}

/* Slides mit unterschiedlichen Größen und Positionen */
.zimmer-detail-gallery-slide {
    flex-shrink: 0;
    overflow: hidden;
    background: #f5f5f5;
    position: relative;
    aspect-ratio: 3 / 4;
}

/* Muster: 1. oben klein, 2. unten groß, 3. oben groß, 4. unten klein, 5. Mitte groß, 6. oben klein - dann wiederholen */
/* 1. Bild oben, klein */
.zimmer-detail-gallery-slide:nth-child(6n+1) {
    width: 300px;
    align-self: flex-start;
}

/* 2. Bild unten, groß */
.zimmer-detail-gallery-slide:nth-child(6n+2) {
    width: 500px;
    align-self: flex-end;
}

/* 3. Bild oben, groß */
.zimmer-detail-gallery-slide:nth-child(6n+3) {
    width: 500px;
    align-self: flex-start;
}

/* 4. Bild unten, klein */
.zimmer-detail-gallery-slide:nth-child(6n+4) {
    width: 300px;
    align-self: flex-end;
}

/* 5. Bild Mitte, groß */
.zimmer-detail-gallery-slide:nth-child(6n+5) {
    width: 500px;
    align-self: center;
}

/* 6. Bild oben, klein */
.zimmer-detail-gallery-slide:nth-child(6n+6) {
    width: 300px;
    align-self: flex-start;
}

.zimmer-detail-gallery-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.zimmer-detail-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Swiper Navigation */
.zimmer-detail-gallery-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    padding: 0 80px;
}

.zimmer-detail-gallery-button {
    width: 50px;
    height: 50px;
    border: 2px solid #000000;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.zimmer-detail-gallery-button:hover {
    background: #000000;
    color: #ffffff;
}

.zimmer-detail-gallery-button svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

.zimmer-detail-gallery-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.zimmer-detail-gallery-button:disabled:hover {
    background: transparent;
}

/* Swiper Dots */
.zimmer-detail-gallery-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    padding: 0 80px;
}

.zimmer-detail-gallery-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cccccc;
    border: 2px solid #000000;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.zimmer-detail-gallery-dot.active {
    background: #000000;
}

/* Lightbox */
.zimmer-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.zimmer-lightbox.active {
    display: flex;
}

.zimmer-lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zimmer-lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
}

.zimmer-lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.zimmer-lightbox-close:hover {
    opacity: 0.7;
}

.zimmer-lightbox-prev,
.zimmer-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    padding: 20px;
    transition: opacity 0.3s ease;
    user-select: none;
}

.zimmer-lightbox-prev {
    left: -80px;
}

.zimmer-lightbox-next {
    right: -80px;
}

.zimmer-lightbox-prev:hover,
.zimmer-lightbox-next:hover {
    opacity: 0.7;
}

@media (max-width: 768px) {
    .zimmer-lightbox-prev {
        left: 10px;
    }

    .zimmer-lightbox-next {
        right: 10px;
    }

    .zimmer-lightbox-close {
        top: 10px;
        right: 10px;
    }
}


/* Beschreibung - minimalistisch */
.zimmer-detail-description {
    margin: 0;
    border-top: 2px solid #000000;
    padding-top: 30px;
}

.zimmer-detail-description-content {
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 1.125rem;
    line-height: 1.8;
    color: #333333;
    font-weight: 400;
}

.zimmer-detail-description-content p {
    margin: 0 0 1.5em 0;
}

.zimmer-detail-description-content p:last-child {
    margin-bottom: 0;
}

/* Ausstattung - kompakte Liste */
.zimmer-detail-ausstattung {
    margin: 0;
    padding: 0;
}

.zimmer-detail-ausstattung-content {
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #666666;
}

.zimmer-detail-ausstattung-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.zimmer-detail-ausstattung-content li {
    margin-bottom: 6px;
    padding-left: 20px;
    position: relative;
}

.zimmer-detail-ausstattung-content li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #000000;
    font-size: 1.2em;
}

.zimmer-detail-ausstattung-content li:last-child {
    margin-bottom: 0;
}

/* Action Buttons - wie andere Buttons */
.zimmer-detail-actions {
    display: flex;
    gap: 20px;
    margin: 0;
    flex-wrap: wrap;
}

.zimmer-detail-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 30px;
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 0.95em;
    text-decoration: none;
    border-radius: 4.15rem;
    border: 2px solid #000000;
    background: transparent;
    color: #000000;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
    min-height: 48px;
}

.zimmer-detail-button-primary {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
}

.zimmer-detail-button-primary:hover {
    background: #333333;
    border-color: #333333;
}

.zimmer-detail-button-secondary {
    background: transparent;
    border-color: #000000;
    color: #000000;
}

.zimmer-detail-button-secondary:hover {
    background: #000000;
    color: #ffffff;
}

/* Bild-Links für Lightbox */
.zimmer-detail-image-link,
.zimmer-detail-gallery-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: opacity 0.3s ease;
}


.zimmer-detail-image-link img,
.zimmer-detail-gallery-link img {
    display: block;
}


.zimmer-detail-error {
    text-align: center;
    padding: 60px 20px;
}

.zimmer-detail-error p {
    font-family: 'HALTimezone', serif;
    font-size: 1.2em;
    color: #666666;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .zimmer-detail-element {
        padding: 80px 0;
    }
    
    .zimmer-detail-wrapper {
        padding: 0 60px;
    }
    
    .zimmer-detail-main {
        grid-template-columns: 1fr;
        gap: 60px;
        min-height: auto;
    }

    .zimmer-detail-main-image {
        width: calc(100% + 60px);
        max-width: calc(100vw - 60px);
        margin-left: -60px;
        aspect-ratio: 16 / 9;
        order: 1;
    }
    
    .zimmer-detail-content {
        order: 2;
    }

    .zimmer-detail-title {
        font-size: 4em;
    }
    
    .zimmer-detail-category {
        font-size: 1.6em;
        margin-top: -8px;
    }

    .zimmer-detail-gallery {
        margin-top: 60px;
        padding: 60px 0 0 0;
    }

    .zimmer-detail-gallery-swiper {
        padding: 0 40px;
    }

    .zimmer-detail-gallery-swiper-wrapper {
        min-height: 600px;
    }

    /* Muster für Tablet: proportional angepasst */
    .zimmer-detail-gallery-slide:nth-child(6n+1) {
        width: 240px;
        align-self: flex-start;
    }

    .zimmer-detail-gallery-slide:nth-child(6n+2) {
        width: 400px;
        align-self: flex-end;
    }

    .zimmer-detail-gallery-slide:nth-child(6n+3) {
        width: 400px;
        align-self: flex-start;
    }

    .zimmer-detail-gallery-slide:nth-child(6n+4) {
        width: 240px;
        align-self: flex-end;
    }

    .zimmer-detail-gallery-slide:nth-child(6n+5) {
        width: 400px;
        align-self: center;
    }

    .zimmer-detail-gallery-slide:nth-child(6n+6) {
        width: 240px;
        align-self: flex-start;
    }

    .zimmer-detail-gallery-nav,
    .zimmer-detail-gallery-dots {
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    .zimmer-detail-element {
        padding: 60px 0;
    }
    
    .zimmer-detail-wrapper {
        padding: 0 20px;
    }

    .zimmer-detail-main {
        gap: 40px;
    }

    .zimmer-detail-title {
        font-size: 3em;
    }
    
    .zimmer-detail-category {
        font-size: 1.4em;
        margin-top: -5px;
    }

    .zimmer-detail-specs {
        gap: 8px;
    }
    
    .zimmer-detail-spec-badge {
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    .zimmer-detail-description-content {
        font-size: 1rem;
    }

    .zimmer-detail-ausstattung-content {
        font-size: 0.9rem;
    }

    .zimmer-detail-actions {
        flex-direction: column;
        gap: 12px;
    }

    .zimmer-detail-button {
        width: 100%;
        padding: 12px 24px;
    }

    .zimmer-detail-main-image {
        width: calc(100% + 20px);
        max-width: calc(100vw - 20px);
        margin-left: -20px;
        aspect-ratio: 16 / 9;
    }

    .zimmer-detail-gallery {
        margin-top: 40px;
        padding: 40px 0 0 0;
    }

    .zimmer-detail-gallery-swiper {
        padding: 0 20px;
    }

    .zimmer-detail-gallery-swiper-wrapper {
        min-height: 500px;
        gap: 30px;
    }

    /* Mobile: Kleinere Bilder, damit mehr als zwei sichtbar sind */
    .zimmer-detail-gallery-slide:nth-child(6n+1) {
        width: 180px !important;
        align-self: flex-start;
    }

    .zimmer-detail-gallery-slide:nth-child(6n+2) {
        width: 300px !important;
        align-self: flex-end;
    }

    .zimmer-detail-gallery-slide:nth-child(6n+3) {
        width: 300px !important;
        align-self: flex-start;
    }

    .zimmer-detail-gallery-slide:nth-child(6n+4) {
        width: 180px !important;
        align-self: flex-end;
    }

    .zimmer-detail-gallery-slide:nth-child(6n+5) {
        width: 300px !important;
        align-self: center;
    }

    .zimmer-detail-gallery-slide:nth-child(6n+6) {
        width: 180px !important;
        align-self: flex-start;
    }
}

/* Schriftarten */
@font-face {
    font-family: 'HALTimezone';
    src: url('/fileadmin/user_upload/fonts/haltimezone-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HALTimezone';
    src: url('/fileadmin/user_upload/fonts/haltimezone-italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* Bold-Varianten fehlen noch - werden über font-weight: bold simuliert, falls benötigt */

@font-face {
    font-family: 'PPNeueMontreal';
    src: url('/fileadmin/user_upload/fonts/ppneuemontreal-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Reset & Basis */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===================================
   HEADER
   =================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid #000000;
    z-index: 1000;
    height: 80px;
}

/* Breadcrumbs */
.breadcrumbs-wrapper {
    position: relative;
    background: transparent;
    padding: 4px 0 4px 40px;
    margin-top: 80px;
    margin-bottom: 0;
    z-index: 2;
}

.breadcrumbs {
    max-width: 1400px;
    margin: 0;
}

.breadcrumb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    font-family: 'HALTimezone', serif;
    font-size: 0.75em;
    color: #888888;
}

.breadcrumb-item:not(:last-child)::after {
    content: ">";
    margin: 0 6px;
    color: #aaaaaa;
    font-weight: normal;
}

.breadcrumb-item:last-child::after {
    display: none;
}

.breadcrumb-link {
    color: #888888;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-link:hover {
    color: #000000;
}

.breadcrumb-current {
    color: #000000;
    font-weight: normal;
}

.breadcrumb-current .breadcrumb-link {
    color: #000000;
    cursor: default;
    pointer-events: none;
}

/* Responsive Breadcrumbs */
@media (max-width: 1030px) {
    .breadcrumbs-wrapper {
        padding: 4px 0 4px 20px;
        margin-top: 90px;
        z-index: 2;
    }
}

@media (max-width: 480px) {
    .breadcrumbs-wrapper {
        padding: 4px 0 4px 20px;
        margin-top: 85px;
        z-index: 2;
    }
    
    .breadcrumb-item {
        font-size: 0.7em;
    }
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.header-left {
    flex: 0 0 auto;
}

.header-logo-text {
    display: block;
    font-family: 'HALTimezone', serif;
    font-size: 32px;
    font-weight: bold;
    color: #000000 !important;
    text-decoration: none;
    line-height: 70px;
    height: 70px;
    visibility: visible;
    opacity: 1;
}

.header-logo-img {
    display: none;
}

.header-center {
    flex: 1;
    text-align: center;
}

.header-title {
    font-family: 'HALTimezone', serif;
    font-size: 24px;
    font-weight: bold;
    font-style: italic;
    color: #000000;
    letter-spacing: 0.05em;
}

.header-right {
    flex: 0 0 auto;
}

.header-subtitle {
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

@media (max-width: 1030px) and (min-width: 481px) {
    .site-header {
        position: fixed !important;
        height: auto;
        min-height: 60px;
        z-index: 1000;
        padding: 8px 0;
    }
    
    .header-container {
        padding: 0 0 0 12px !important;
        gap: 6px;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
    }
    
    .header-left {
        flex: 0 0 auto;
        order: 1;
    }
    
    .header-logo-text {
        height: 52px;
        line-height: 52px;
        font-size: 26px;
        font-weight: bold;
        color: #000000 !important;
        visibility: visible;
        opacity: 1;
    }
    
    .header-center {
        flex: 0 0 auto !important;
        order: 2;
        text-align: right !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center;
        margin-left: auto !important;
        width: auto;
    }
    
    .burger-menu-button {
        width: 32px;
        height: 32px;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
    
    .burger-line {
        width: 20px;
        height: 2px;
    }
    
    .header-title {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        max-width: 100%;
    }
    
    .header-right {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        flex: 0 0 0 !important;
    }
    
    .header-subtitle {
        font-size: 7px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        max-width: 100px;
    }
    
    .header-buchen-button,
    .header-anfrage-button {
        display: none !important;
    }
    
    /* Padding für Content anpassen */
    .site-main {
        padding-top: 0;
    }
    
    .fullwidth-slider-wrapper:first-child {
        margin-top: -80px;
    }
    
    /* Überschriften kleiner machen und Overflow verhindern */
    .text-element h1.text-main-heading,
    .text-element h2.text-main-heading,
    .text-element h3.text-main-heading,
    .text-element h4.text-main-heading,
    .text-element h5.text-main-heading,
    .text-element h6.text-main-heading {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0 20px;
        box-sizing: border-box;
    }
    
    .text-element h1.text-main-heading { font-size: 2em; }
    .text-element h2.text-main-heading { font-size: 1.8em; }
    .text-element h3.text-main-heading { font-size: 1.5em; }
    .text-element h4.text-main-heading { font-size: 1.3em; }
    .text-element h5.text-main-heading { font-size: 1.1em; }
    .text-element h6.text-main-heading { font-size: 1em; }
    
    .text-element h1.text-subheading,
    .text-element h2.text-subheading,
    .text-element h3.text-subheading,
    .text-element h4.text-subheading,
    .text-element h5.text-subheading,
    .text-element h6.text-subheading {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0 20px;
        box-sizing: border-box;
    }
    
    .text-element h1.text-subheading { font-size: 1.5em; }
    .text-element h2.text-subheading { font-size: 1.3em; }
    .text-element h3.text-subheading { font-size: 1.1em; }
    .text-element h4.text-subheading { font-size: 1em; }
    .text-element h5.text-subheading { font-size: 0.9em; }
    .text-element h6.text-subheading { font-size: 0.8em; }
    
    .textimage-element h1,
    .textimage-element h2,
    .textimage-element h3 {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0 20px;
        box-sizing: border-box;
    }
    
    .textimage-element h1 { font-size: 2em; }
    .textimage-element h2 { font-size: 1.8em; }
    .textimage-element h3 { font-size: 1.5em; }
    
    .slider-heading {
        font-size: 2em;
        margin-bottom: 20px;
        line-height: 1.3;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0 20px;
        box-sizing: border-box;
    }
    
    .slider-caption {
        font-size: 1em;
        line-height: 1.5;
        margin-top: 0;
        padding: 0 20px;
        box-sizing: border-box;
    }
    
    .slider-content {
        padding: 20px;
        box-sizing: border-box;
    }
    
    /* Alle Überschriften allgemein */
    h1, h2, h3, h4, h5, h6 {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .site-header {
        position: fixed !important;
        height: auto;
        min-height: 55px;
        z-index: 1000;
        padding: 6px 0;
    }
    
    .header-container {
        padding: 0 0 0 10px !important;
        gap: 4px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
    
    .header-logo-text {
        height: 48px;
        line-height: 48px;
        font-size: 22px;
        font-weight: bold;
        color: #000000 !important;
        visibility: visible;
        opacity: 1;
    }
    
    .header-center {
        flex: 0 0 auto;
        order: 2;
        text-align: right;
        padding: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-left: auto;
        width: auto;
    }
    
    .header-container {
        padding-right: 0 !important;
        padding-left: 12px;
        justify-content: space-between;
    }
    
    .header-left {
        flex: 1;
        order: 1;
    }
    
    .header-right {
        display: none !important;
    }
    
    .header-buchen-button,
    .header-anfrage-button {
        display: none !important;
    }
    
    .burger-menu-button {
        width: 28px;
        height: 28px;
        margin-right: 0 !important;
        margin-left: auto;
        padding-right: 0 !important;
    }
    
    .header-center {
        padding-right: 0 !important;
        margin-right: 0 !important;
        flex: 0 0 auto;
        min-width: 28px;
    }
    
    .burger-line {
        width: 18px;
        height: 2px;
        gap: 4px;
    }
    
    .header-title {
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        max-width: 100%;
    }
    
    .header-right {
        flex: 0 0 auto;
        order: 3;
        min-width: 0;
    }
    
    .header-subtitle {
        font-size: 6px;
        letter-spacing: 0.03em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        max-width: 80px;
    }
    
    .header-buchen-button,
    .header-anfrage-button {
        display: none !important;
    }
    
    /* Padding für Content anpassen */
    .site-main {
        padding-top: 0;
    }
    
    .fullwidth-slider-wrapper:first-child {
        margin-top: -70px;
    }
    
    /* Überschriften noch kleiner und Overflow verhindern */
    .text-element h1.text-main-heading,
    .text-element h2.text-main-heading,
    .text-element h3.text-main-heading,
    .text-element h4.text-main-heading,
    .text-element h5.text-main-heading,
    .text-element h6.text-main-heading {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    .text-element h1.text-main-heading { font-size: 1.6em; }
    .text-element h2.text-main-heading { font-size: 1.4em; }
    .text-element h3.text-main-heading { font-size: 1.2em; }
    .text-element h4.text-main-heading { font-size: 1.1em; }
    .text-element h5.text-main-heading { font-size: 1em; }
    .text-element h6.text-main-heading { font-size: 0.9em; }
    
    .text-element h1.text-subheading,
    .text-element h2.text-subheading,
    .text-element h3.text-subheading,
    .text-element h4.text-subheading,
    .text-element h5.text-subheading,
    .text-element h6.text-subheading {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    .text-element h1.text-subheading { font-size: 1.2em; }
    .text-element h2.text-subheading { font-size: 1.1em; }
    .text-element h3.text-subheading { font-size: 1em; }
    .text-element h4.text-subheading { font-size: 0.9em; }
    .text-element h5.text-subheading { font-size: 0.8em; }
    .text-element h6.text-subheading { font-size: 0.7em; }
    
    .textimage-element h1,
    .textimage-element h2,
    .textimage-element h3 {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    .textimage-element h1 { font-size: 1.6em; }
    .textimage-element h2 { font-size: 1.4em; }
    .textimage-element h3 { font-size: 1.2em; }
    
    .slider-heading {
        font-size: 1.5em;
        margin-bottom: 15px;
        line-height: 1.3;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    .slider-caption {
        font-size: 0.9em;
        line-height: 1.4;
        margin-top: 0;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    .slider-content {
        padding: 15px;
        box-sizing: border-box;
    }
    
    /* Alle Überschriften allgemein */
    h1, h2, h3, h4, h5, h6 {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        box-sizing: border-box;
    }
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    position: relative;
    font-family: 'HALTimezone', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #ffffff;
    overflow-x: hidden;
    color: #000000;
    line-height: 1.6;
    font-size: 18px;
}

/* ===================================
   Textlinks - Allgemeine Formatierung
   =================================== */
a {
    color: #000000;
    font-weight: bold;
    text-decoration: underline;
}

/* Ausnahmen für Navigation, Buttons etc. */
.nav-link,
.nav-link-with-submenu,
.nav-sub-link,
.header-buchen-button,
.header-anfrage-button,
.zimmer-button,
.btn,
button,
.accordion-header {
    text-decoration: none !important;
}

.nav-link,
.nav-link-with-submenu,
.nav-sub-link {
    font-weight: normal !important;
}

/* ===================================
   Header - Fixed Navigation
   =================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid #000000;
    z-index: 1000;
    padding: 20px 40px;
}

.header-container {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

.header-right {
    justify-content: flex-end;
}

.header-text {
    font-family: 'HALTimezone', serif;
    font-size: 0.9em;
    color: #000000;
    white-space: nowrap;
}

/* Header Buchen Button */
.header-buchen-button,
.header-anfrage-button {
    display: inline-block;
    padding: 10px 25px;
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 0.95em;
    text-decoration: none;
    border-radius: 4.15rem;
    border: 2px solid #000000;
    text-align: center;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.header-buchen-button {
    background: #000000;
    color: #ffffff;
}

.header-buchen-button:hover {
    background: #ffffff;
    color: #000000;
}

.header-anfrage-button {
    background: #ffffff;
    color: #000000;
}

.header-anfrage-button:hover {
    background: #000000;
    color: #ffffff;
}

.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 481px) and (max-width: 1030px) {
    .header-center {
        flex: 0 0 auto !important;
        justify-content: flex-end !important;
        margin-left: auto !important;
        width: auto;
    }
    
    .header-container {
        padding-right: 0 !important;
    }
    
    .burger-menu-button {
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
}

/* Burger Menu Button */
.burger-menu-button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 10;
    visibility: visible;
    opacity: 1;
}

.burger-line {
    width: 24px;
    height: 2px;
    background-color: #000000;
    display: block;
    transition: all 0.3s ease;
}

.burger-menu-button:hover .burger-line {
    background-color: #333333;
}

/* Burger Menu Button Active State (for when menu is open) */
.burger-menu-button.active .burger-line:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.burger-menu-button.active .burger-line:nth-child(2) {
    opacity: 0;
}

.burger-menu-button.active .burger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Navigation Overlay */
.nav-overlay {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform-origin: left center;
    transform: perspective(2000px) rotateY(-90deg);
    clip-path: inset(0 100% 0 0);
    transition: opacity 0.5s ease 0.3s,
                visibility 0.5s ease 0.3s,
                transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                clip-path 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
    backface-visibility: hidden;
}

.nav-overlay.active {
    display: block; /* Show when active */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: perspective(2000px) rotateY(0deg);
    clip-path: inset(0 0% 0 0);
    transition: opacity 0.3s ease,
                visibility 0.3s ease,
                transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                clip-path 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Close Button (X) - exakt an der Burger-Button Position im Header */
/* Burger-Button: im header-center (flex: 1, justify-content: center) innerhalb header-container */
/* header-container: max-width: 1400px, margin: 0 auto, padding: 0 40px, height: 80px, align-items: center */
/* Burger-Button wird also horizontal zentriert (durch header-center) und vertikal zentriert (durch align-items: center) */
/* Close Button (X) - Position wird per JavaScript auf exakt Burger-Button Position gesetzt */
.nav-overlay-close {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10000;
    padding: 8px;
    margin: 0;
    opacity: 0;
    transition: opacity 0.3s ease 0.5s;
    box-sizing: border-box;
    /* Position wird per JavaScript dynamisch gesetzt */
    left: 50%;
    top: 40px;
    transform: translate(-50%, -50%);
}

.nav-overlay.active .nav-overlay-close {
    opacity: 1;
}

.nav-close-line {
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: #000000;
    transition: all 0.3s ease;
}

.nav-close-line:nth-child(1) {
    transform: rotate(45deg) translate(0, 0);
    top: calc(50% - 1px);
    left: calc(50% - 12px);
}

.nav-close-line:nth-child(2) {
    transform: rotate(-45deg) translate(0, 0);
    top: calc(50% - 1px);
    left: calc(50% - 12px);
}

.nav-overlay-close:hover .nav-close-line {
    background-color: #333333;
}

.nav-overlay-content {
    max-width: 1800px;
    margin: 0 auto;
    padding: 120px 40px 60px;
    min-height: 100vh;
    box-sizing: border-box;
}

/* Buch-Layout: Linke und rechte Seite */
.nav-book-layout {
    display: flex;
    width: 100%;
    min-height: 80vh;
    gap: 0;
    position: relative;
    margin: 0 auto;
}

/* Linke Seite: Hauptmenü */
.nav-left-page {
    flex: 0 0 50%;
    width: 50%;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* Rechte Seite: Unterseiten */
.nav-right-page {
    flex: 0 0 50%;
    width: 50%;
    padding-left: 0;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .nav-overlay-close {
        width: 32px;
        height: 32px;
        padding: 8px;
    }
    
    .nav-close-line {
        width: 20px;
    }
    
    .nav-close-line:nth-child(1),
    .nav-close-line:nth-child(2) {
        left: calc(50% - 10px);
    }
    
    .nav-overlay {
        transform-origin: left center;
        transform: perspective(1500px) rotateY(-90deg);
        clip-path: inset(0 100% 0 0);
    }
    
    .nav-overlay.active {
        transform: perspective(1500px) rotateY(0deg);
        clip-path: inset(0 0% 0 0);
    }
    
    .nav-overlay-content {
        padding: 80px 20px 40px;
    }
    
    .nav-book-layout {
        flex-direction: column;
        gap: 0;
    }
    
    .nav-left-page {
        flex: 1 1 100%;
        width: 100%;
        padding: 0;
        border-right: none !important; /* Remove border on mobile */
    }
    
    /* Hide right page and hover images on mobile */
    .nav-right-page {
        display: none !important;
    }
    
    .nav-hover-image-container {
        display: none !important;
        height: 0 !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        overflow: hidden !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }
    
    .nav-hover-image-wrapper,
    .nav-hover-image {
        display: none !important;
        height: 0 !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Entferne data-hover-image Attribute-Effekte auf mobilen Geräten */
    .nav-link[data-hover-image],
    .nav-link-with-submenu[data-hover-image] {
        background-image: none !important;
    }
    
    /* Show submenu inline under parent item on mobile */
    .nav-submenu-data {
        display: none !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, opacity 0.3s ease;
        opacity: 0;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
    }
    
    .nav-item.has-submenu.expanded .nav-submenu-data {
        display: block !important;
        max-height: 2000px;
        opacity: 1;
        margin-top: -5px !important; /* Negative margin to bring closer */
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-left: 20px;
        padding-right: 60px; /* Don't overlap arrow */
        z-index: 1; /* Below the link */
    }
    
    .nav-item.has-submenu.expanded .nav-submenu-data .nav-sub-menu-list {
        list-style: none;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .nav-item.has-submenu.expanded .nav-submenu-data .nav-sub-item {
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
    }
    
    .nav-item.has-submenu.expanded .nav-submenu-data .nav-sub-item:last-child {
        margin-bottom: 0 !important;
    }
    
    .nav-item.has-submenu.expanded .nav-submenu-data .nav-sub-link {
        font-family: 'HALTimezone', serif;
        font-size: 1.5rem;
        color: #000000;
        text-decoration: none;
        display: block;
        padding: 8px 0 !important;
        transition: color 0.3s ease;
        pointer-events: auto !important; /* Ensure links are clickable on mobile */
        cursor: pointer;
    }
    
    .nav-item.has-submenu.expanded .nav-submenu-data .nav-sub-link:hover {
        color: #333333;
    }
    
    /* Add visual indicator for expandable items - use same arrow as desktop */
    .nav-link-with-submenu {
        padding-right: 60px !important; /* More space for arrow, moved left */
        position: relative !important;
        overflow: visible !important; /* Make sure arrow is visible */
        z-index: 10 !important; /* Keep above submenu */
    }
    
    .nav-item.has-submenu .nav-link-with-submenu::after {
        content: " →" !important;
        position: absolute !important;
        right: 10px !important; /* Moved further left */
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 2.5rem !important; /* Match desktop size */
        line-height: 1 !important;
        transition: opacity 0.3s ease, transform 0.3s ease !important;
        z-index: 100 !important; /* Above everything */
        pointer-events: none !important; /* Don't interfere with clicks */
        display: block !important; /* Force visibility */
        visibility: visible !important;
        background: transparent !important;
    }
    
    .nav-item.has-submenu .nav-link-with-submenu:hover::after {
        opacity: 1 !important;
        transform: translateY(-50%) translateX(5px) !important;
    }
    
    .nav-item.has-submenu.expanded .nav-link-with-submenu {
        z-index: 50 !important; /* Keep link above submenu */
        position: relative !important;
    }
    
    .nav-item.has-submenu.expanded .nav-link-with-submenu::after {
        transform: translateY(-50%) !important;
        z-index: 100 !important;
        visibility: visible !important;
        display: block !important;
    }
}

@media (max-width: 480px) {
    .nav-overlay-close {
        width: 28px;
        height: 28px;
        padding: 8px;
    }
    
    .nav-close-line {
        width: 18px;
    }
    
    .nav-close-line:nth-child(1),
    .nav-close-line:nth-child(2) {
        left: calc(50% - 9px);
    }
    
    .nav-overlay {
        transform-origin: left center;
        transform: perspective(1200px) rotateY(-90deg);
        clip-path: inset(0 100% 0 0);
    }
    
    .nav-overlay.active {
        transform: perspective(1200px) rotateY(0deg);
        clip-path: inset(0 0% 0 0);
    }
    
    .nav-overlay-content {
        padding: 60px 15px 30px;
    }
    
    .nav-book-layout {
        gap: 0;
    }
    
    /* Hide right page and hover images on mobile */
    .nav-right-page {
        display: none !important;
    }
    
    .nav-hover-image-container {
        display: none !important;
    }
}

.nav-menu {
    width: 100%;
}

.nav-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-link {
    display: block;
    font-family: 'HALTimezone', serif;
    font-size: 2.5rem;
    color: #000000;
    text-decoration: none;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-top: none;
    transition: color 0.3s ease;
    line-height: 1.2;
}

.nav-item:first-child .nav-link {
    border-top: none;
}

.nav-item:last-child .nav-link {
    border-bottom: none;
}

.nav-link:hover {
    color: #333333;
}

.nav-link-with-submenu {
    cursor: pointer;
    pointer-events: auto;
    display: block;
    font-family: 'HALTimezone', serif;
    font-size: 2.5rem;
    color: #000000;
    text-decoration: none;
    padding: 15px 30px 15px 0; /* Add right padding for arrow */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: color 0.3s ease;
    line-height: 1.2;
    position: relative;
    overflow: visible; /* Make sure arrow is visible */
}

.nav-item:last-child .nav-link-with-submenu {
    border-bottom: none;
}

.nav-link-with-submenu:hover {
    color: #333333;
}

.nav-link-with-submenu::after {
    content: " →";
    position: absolute;
    right: 30px; /* Abstand zur Trennlinie */
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-link-with-submenu:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(5px);
}

/* Rechte Seite: Unterseiten */
.nav-right-page {
    flex: 0 0 50%;
    width: 50%;
    padding-left: 60px;
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.nav-right-page .nav-sub-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease 0.5s, visibility 0.3s ease 0.5s;
}

.nav-right-page.active .nav-sub-menu {
    opacity: 1;
    visibility: visible;
}


.nav-sub-page-wrapper {
    position: relative;
    width: 100%;
    min-height: 400px;
}

.nav-sub-page-close {
    position: absolute;
    top: -10px;
    right: 0;
    background: transparent;
    border: none;
    font-size: 3rem;
    line-height: 1;
    color: #000000;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.nav-sub-page-close:hover {
    opacity: 1;
}

.nav-sub-menu {
    width: 100%;
    border: none;
    border-top: none;
    border-bottom: none;
}

.nav-sub-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: none;
}

.nav-sub-item {
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
}

.nav-sub-item:first-child {
    border-top: none;
}

.nav-sub-link {
    display: block;
    font-family: 'HALTimezone', serif;
    font-size: 1.8rem;
    color: #000000;
    text-decoration: none;
    padding: 10px 0;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    transition: color 0.3s ease;
    line-height: 1.2;
}

.nav-sub-item .nav-sub-link {
    border: none !important;
}

.nav-sub-item:first-child .nav-sub-link {
    border-top: none !important;
}

.nav-sub-item:last-child .nav-sub-link {
    border-bottom: none !important;
}

/* Entferne Borders von allen Links im Submenu-Bereich */
.nav-sub-menu a,
.nav-sub-menu .nav-link,
.nav-sub-menu-list a {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

.nav-sub-link:hover {
    color: #333333;
}

.nav-submenu-data {
    display: none !important;
}

/* Hover Image Container - sits on top, covering the submenu - only visible inside nav-overlay */
.nav-hover-image-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    z-index: 5;
    padding: 20px;
    box-sizing: border-box;
    perspective: 1500px; /* Perspective for natural depth as page flips */
    perspective-origin: center center;
    transform-style: preserve-3d;
    overflow: hidden; /* Verhindert Schatten außerhalb */
}

/* Ensure hover image container is hidden when overlay is not active */
body:not(.nav-open) .nav-hover-image-container,
.nav-overlay:not(.active) .nav-hover-image-container {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
}

.nav-overlay.active .nav-hover-image-container {
    display: flex;
}

/* Only show active state when inside active overlay */
.nav-overlay.active .nav-hover-image-container.active {
    opacity: 1;
    visibility: visible;
}

/* Page flip animation - realistic magazine/book page turn to the right */
.nav-hover-image-container.flipping {
    z-index: 10;
}

/* Ultra-smooth book page flip - maximum keyframes for buttery smooth motion */
@keyframes pageFlip {
    0% {
        transform: rotateY(0deg) translateZ(0);
        opacity: 1;
    }
    3% {
        transform: rotateY(2.5deg) translateZ(1px);
        opacity: 1;
    }
    6% {
        transform: rotateY(5.5deg) translateZ(3px);
        opacity: 1;
    }
    10% {
        transform: rotateY(9deg) translateZ(5px);
        opacity: 1;
    }
    14% {
        transform: rotateY(13deg) translateZ(7px);
        opacity: 1;
    }
    18% {
        transform: rotateY(17deg) translateZ(9px);
        opacity: 1;
    }
    22% {
        transform: rotateY(21deg) translateZ(11px);
        opacity: 1;
    }
    26% {
        transform: rotateY(25deg) translateZ(13px);
        opacity: 1;
    }
    30% {
        transform: rotateY(29deg) translateZ(15px);
        opacity: 0.998;
    }
    34% {
        transform: rotateY(33deg) translateZ(16.5px);
        opacity: 0.996;
    }
    38% {
        transform: rotateY(37deg) translateZ(17.5px);
        opacity: 0.993;
    }
    42% {
        transform: rotateY(41deg) translateZ(18.5px);
        opacity: 0.99;
    }
    46% {
        transform: rotateY(45deg) translateZ(19px);
        opacity: 0.985;
    }
    50% {
        transform: rotateY(49deg) translateZ(19.5px);
        opacity: 0.98;
    }
    54% {
        transform: rotateY(53deg) translateZ(20px);
        opacity: 0.97;
    }
    58% {
        transform: rotateY(57deg) translateZ(20px);
        opacity: 0.96;
    }
    62% {
        transform: rotateY(61deg) translateZ(19.8px);
        opacity: 0.94;
    }
    66% {
        transform: rotateY(65deg) translateZ(19.5px);
        opacity: 0.92;
    }
    70% {
        transform: rotateY(70deg) translateZ(19px);
        opacity: 0.89;
    }
    74% {
        transform: rotateY(75deg) translateZ(18px);
        opacity: 0.86;
    }
    78% {
        transform: rotateY(81deg) translateZ(16.5px);
        opacity: 0.82;
    }
    82% {
        transform: rotateY(88deg) translateZ(14.5px);
        opacity: 0.76;
    }
    86% {
        transform: rotateY(98deg) translateZ(12px);
        opacity: 0.68;
    }
    90% {
        transform: rotateY(112deg) translateZ(9px);
        opacity: 0.58;
    }
    94% {
        transform: rotateY(135deg) translateZ(5px);
        opacity: 0.42;
    }
    97% {
        transform: rotateY(160deg) translateZ(2px);
        opacity: 0.25;
    }
    99% {
        transform: rotateY(175deg) translateZ(0.5px);
        opacity: 0.1;
    }
    100% {
        transform: rotateY(180deg) translateZ(0);
        opacity: 0;
    }
}

/* Ultra-smooth paper curvature gradient - many keyframes for seamless transitions */
@keyframes paperCurve {
    0% {
        background: radial-gradient(ellipse 200% 100% at 100% 50%,
            transparent 0%,
            rgba(255, 255, 255, 0.02) 30%,
            transparent 60%);
        opacity: 0;
    }
    8% {
        background: radial-gradient(ellipse 190% 100% at 98% 50%,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.12) 7%,
            rgba(255, 255, 255, 0.04) 16%,
            transparent 32%);
        opacity: 0.3;
    }
    20% {
        background: radial-gradient(ellipse 175% 100% at 90% 50%,
            rgba(255, 255, 255, 0.32) 0%,
            rgba(255, 255, 255, 0.24) 7.5%,
            rgba(255, 255, 255, 0.11) 17%,
            transparent 34%);
        opacity: 0.48;
    }
    35% {
        background: radial-gradient(ellipse 160% 100% at 75% 50%,
            rgba(255, 255, 255, 0.46) 0%,
            rgba(255, 255, 255, 0.36) 9%,
            rgba(255, 255, 255, 0.21) 22%,
            rgba(255, 255, 255, 0.07) 39%,
            transparent 54%);
        opacity: 0.62;
    }
    50% {
        background: radial-gradient(ellipse 140% 100% at 55% 50%,
            rgba(255, 255, 255, 0.58) 0%,
            rgba(255, 255, 255, 0.48) 9.5%,
            rgba(255, 255, 255, 0.30) 21%,
            rgba(255, 255, 255, 0.13) 37%,
            rgba(255, 255, 255, 0.02) 49%,
            transparent 63%);
        opacity: 0.75;
    }
    65% {
        background: radial-gradient(ellipse 135% 100% at 45% 50%,
            rgba(255, 255, 255, 0.60) 0%,
            rgba(255, 255, 255, 0.50) 10%,
            rgba(255, 255, 255, 0.32) 22%,
            rgba(255, 255, 255, 0.15) 38%,
            rgba(255, 255, 255, 0.03) 50%,
            transparent 65%);
        opacity: 0.78;
    }
    80% {
        background: radial-gradient(ellipse 155% 100% at 28% 50%,
            rgba(255, 255, 255, 0.40) 0%,
            rgba(255, 255, 255, 0.34) 13%,
            rgba(255, 255, 255, 0.19) 28%,
            rgba(255, 255, 255, 0.08) 46%,
            transparent 63%);
        opacity: 0.58;
    }
    92% {
        background: radial-gradient(ellipse 185% 100% at 12% 50%,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.10) 18%,
            transparent 43%);
        opacity: 0.28;
    }
    100% {
        background: radial-gradient(ellipse 200% 100% at 0% 50%,
            transparent 0%,
            transparent 100%);
        opacity: 0;
    }
}

/* Realistic paper shadow animation - like light hitting paper */
/* Ultra-smooth paper shadow - many keyframes for seamless shadow growth */
@keyframes paperShadow {
    0% {
        box-shadow: 
            0 2px 12px rgba(0, 0, 0, 0.08),
            0 0 0 1px rgba(0, 0, 0, 0.02) inset;
    }
    8% {
        box-shadow: 
            -2px 4px 16px rgba(0, 0, 0, 0.10),
            0 0 0 1px rgba(0, 0, 0, 0.021) inset;
    }
    18% {
        box-shadow: 
            -4px 6px 22px rgba(0, 0, 0, 0.13),
            0 0 0 1px rgba(0, 0, 0, 0.024) inset;
    }
    28% {
        box-shadow: 
            -6px 7.5px 27px rgba(0, 0, 0, 0.17),
            0 0 0 1px rgba(0, 0, 0, 0.028) inset;
    }
    38% {
        box-shadow: 
            -9px 9.5px 34px rgba(0, 0, 0, 0.21),
            0 0 0 1px rgba(0, 0, 0, 0.034) inset;
    }
    48% {
        box-shadow: 
            -13px 12px 42px rgba(0, 0, 0, 0.25),
            0 0 0 1px rgba(0, 0, 0, 0.041) inset;
    }
    58% {
        box-shadow: 
            -18px 14.5px 52px rgba(0, 0, 0, 0.30),
            0 0 0 1px rgba(0, 0, 0, 0.050) inset;
    }
    68% {
        box-shadow: 
            -23px 17px 62px rgba(0, 0, 0, 0.35),
            0 0 0 1px rgba(0, 0, 0, 0.058) inset;
    }
    78% {
        box-shadow: 
            -28px 19.5px 72px rgba(0, 0, 0, 0.40),
            0 0 0 1px rgba(0, 0, 0, 0.066) inset;
    }
    88% {
        box-shadow: 
            -31px 21px 76px rgba(0, 0, 0, 0.43),
            0 0 0 1px rgba(0, 0, 0, 0.070) inset;
    }
    96% {
        box-shadow: 
            -32px 22px 78px rgba(0, 0, 0, 0.44),
            0 0 0 1px rgba(0, 0, 0, 0.072) inset;
    }
    100% {
        box-shadow: 
            -30px 22px 75px rgba(0, 0, 0, 0.42),
            0 0 0 1px rgba(0, 0, 0, 0.07) inset;
    }
}

/* Paper texture gradient animation - simulates light reflection on paper */
@keyframes paperLight {
    0% {
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(0, 0, 0, 0.02) 30%,
            rgba(0, 0, 0, 0.01) 70%,
            transparent 100%);
        opacity: 0;
    }
    40% {
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.15) 20%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0.15) 80%,
            transparent 100%);
        opacity: 0.6;
    }
    70% {
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.25) 15%,
            rgba(255, 255, 255, 0.5) 45%,
            rgba(255, 255, 255, 0.25) 75%,
            transparent 100%);
        opacity: 0.8;
    }
    100% {
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.4) 10%,
            rgba(255, 255, 255, 0.7) 40%,
            rgba(255, 255, 255, 0.4) 70%,
            transparent 100%);
        opacity: 1;
    }
}

/* Paper curvature simulation - gradient that simulates the curve as page flips */
.nav-hover-image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: 2px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    mix-blend-mode: overlay;
}

.nav-hover-image-container.flipping .nav-hover-image-wrapper::before {
    animation: paperCurve 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes pageFlipGradient {
    0% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
        background: linear-gradient(to left, 
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0.8) 100%);
    }
}

.nav-hover-image-container.flipping .nav-hover-image-wrapper {
    /* Ultra-smooth book page flip - buttery smooth animation */
    animation: pageFlip 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    transform-origin: right center; /* Page anchored at right edge */
    will-change: transform, opacity;
    transform-style: preserve-3d;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Force GPU acceleration */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.nav-hover-image-container.flipping .nav-hover-image {
    /* Ultra-smooth paper shadow during flip */
    animation: paperShadow 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* Shadow animation removed */

.nav-hover-image-container.flipped .nav-hover-image-wrapper {
    transform: rotateY(180deg) translateZ(0);
    transform-origin: right center;
    opacity: 0;
}

.nav-hover-image-container.flipped {
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}

.nav-hover-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 90%;
    max-height: 90%;
    aspect-ratio: 9 / 16;
    transform-style: preserve-3d;
    transform-origin: right center; /* Page anchored at right spine, opens to left */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform, opacity;
    /* Maximum GPU acceleration */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    /* Smooth rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

.nav-hover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 2px;
    box-shadow: none;
    background: #fafafa; /* Slightly off-white for paper feel */
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 
        -2px 8px 25px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.03) inset;
    box-sizing: border-box;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    position: relative;
    margin: 0 auto; /* Zentriert das Bild */
}

/* Paper texture overlay - subtle grain effect */
.nav-hover-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.008) 2px, rgba(0, 0, 0, 0.008) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, 0.008) 2px, rgba(0, 0, 0, 0.008) 4px);
    pointer-events: none;
    border-radius: 2px;
    z-index: 1;
    opacity: 0.4;
    mix-blend-mode: overlay;
}

/* Page curl effect removed - no shadow on right side */

/* Add subtle paper texture effect - commented out for performance, uncomment if needed
.nav-hover-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.01) 2px, rgba(0, 0, 0, 0.01) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, 0.01) 2px, rgba(0, 0, 0, 0.01) 4px);
    pointer-events: none;
    border-radius: 2px;
    z-index: 1;
    opacity: 0.3;
}
*/

/* Prevent body scroll when overlay is open */
body.nav-open {
    overflow: hidden;
}

.header-logo-box {
    border: 2px solid #000000;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-logo-box .header-logo-text {
    color: #000000 !important;
    visibility: visible;
    opacity: 1;
    font-size: 32px;
    font-weight: bold;
    line-height: normal;
    height: auto;
}

.header-logo-image {
    display: none;
}

/* Main Content Area - with header offset */
.site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 20px 60px;
}

/* ===================================
   Mask Content Elements
   =================================== */

/* Hero Element */
.hero-element {
    padding: 120px 40px;
    text-align: center;
    background: #f5f5f5;
    margin: 0 0 60px 0;
    border-radius: 8px;
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-element .hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.hero-element .hero-heading {
    font-family: 'HALTimezone', serif;
    font-size: 5em;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 25px;
    color: #000000;
    letter-spacing: 0;
    line-height: 1.1;
}

.hero-element .hero-subtitle {
    font-size: 1.6em;
    color: #555555;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Text Element */
.text-element {
    margin: 60px 0;
}

.text-element .text-main-heading {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 15px;
    color: #000000;
    letter-spacing: 0;
}

.text-element .text-subheading {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 30px;
    color: #666666;
    letter-spacing: 0;
}

.text-element h1.text-main-heading { font-size: 4em; }
.text-element h2.text-main-heading { font-size: 3.5em; }
.text-element h3.text-main-heading { font-size: 2.8em; }
.text-element h4.text-main-heading { font-size: 2.2em; }
.text-element h5.text-main-heading { font-size: 1.8em; }
.text-element h6.text-main-heading { font-size: 1.5em; }

.text-element h1.text-subheading { font-size: 2.5em; }
.text-element h2.text-subheading { font-size: 2.2em; }
.text-element h3.text-subheading { font-size: 1.9em; }
.text-element h4.text-subheading { font-size: 1.6em; }
.text-element h5.text-subheading { font-size: 1.4em; }
.text-element h6.text-subheading { font-size: 1.2em; }

.text-element .text-content {
    font-size: 1.2em;
    line-height: 1.8;
    color: #333333;
}

/* Text Width Varianten */
.text-element.text-width-narrow {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.text-element.text-width-normal {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.text-element.text-width-wide {
    max-width: 100%;
}

/* Text mit Bild - Volle Breite */
.textimage-element {
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 80px 0;
}

.textimage-element h2,
.textimage-element h1,
.textimage-element h3,
.textimage-element h4,
.textimage-element h5,
.textimage-element h6 {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 30px;
    color: #000000;
    letter-spacing: 0;
    padding: 0 40px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.textimage-element h1 { font-size: 4em; }
.textimage-element h2 { font-size: 3.5em; }
.textimage-element h3 { font-size: 2.8em; }

.textimage-element .textimage-content {
    display: flex;
    flex-direction: row !important;
    gap: 0;
    align-items: center;
    flex-wrap: nowrap;
    max-width: 1400px;
    margin: 0 auto;
}

.textimage-element .textimage-content .textimage-image {
    flex: 0 0 55% !important;
    min-width: 0;
}

.textimage-element .textimage-content .textimage-text {
    flex: 0 0 45% !important;
    padding: 60px;
    min-width: 0;
}

.textimage-element img {
    width: 100%;
    height: auto;
    border-radius: 0;
    display: block;
    object-fit: cover;
}

.textimage-element .textimage-text {
    font-size: 1.3em;
    line-height: 1.8;
    color: #333333;
}

/* ===================================
   Full Width Breakout & Basis
   =================================== */

   .imagestext-element {
    /* Der "Breakout"-Trick: */
    width: 100vw; 
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    /* Abstände vertikal */
    margin-top: 100px;
    margin-bottom: 100px;
    
    /* Verhindert horizontalen Scrollbalken */
    overflow-x: hidden; 
    box-sizing: border-box;
    padding: 0;
}

/* Container für den Inhalt - nutzt jetzt die volle Breite */
.imagestext-grid {
    display: grid !important;
    width: 100%;
    max-width: 100%;
    /* Nur minimaler Abstand zum Rand, damit Text nicht klebt. 
       Für "echtes" Randlos bei Bildern können wir das später spezifizieren. */
    padding: 0 3vw; 
    box-sizing: border-box;
    gap: 40px;
    align-items: start;
}

/* Typografie */
.imagestext-heading {
    font-family: 'HALTimezone', 'Times New Roman', serif;
    font-weight: 400;
    font-style: italic;
    color: #111;
    line-height: 1.05;
    margin-bottom: 30px;
    letter-spacing: -0.01em;
}

/* Riesige Überschriften für den Editorial Look */
.imagestext-heading h1 { font-size: clamp(3rem, 6vw, 5.5rem); }
.imagestext-heading h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.imagestext-heading h3 { font-size: clamp(2rem, 4vw, 3.5rem); }

.imagestext-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333;
    /* Text soll nicht unendlich breit laufen, das liest niemand */
    max-width: 550px; 
}

/* Bild-Styling */
.imagestext-image-wrapper {
    width: 100%;
    display: block;
}
.imagestext-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.imagestext-caption {
    font-family: 'HALTimezone', serif;
    font-style: italic;
    font-size: 0.9rem;
    color: #666;
    margin-top: 15px;
    display: block;
}

/* ===================================
   Desktop Layouts (Full Width)
   =================================== */

/* LAYOUT 1: 3 Spalten über die volle Breite verteilt */
.imagestext-layout-layout-text-left-image-top-2-right {
    /* Spalte 1 (Text): 35% der Breite
       Spalte 2 (Bild Mitte): 35% der Breite
       Spalte 3 (Bild Rechts): 30% der Breite (Rest)
    */
    grid-template-columns: 35fr 35fr 30fr !important;
    column-gap: 5vw; /* Relativer Abstand */
}

.imagestext-layout-layout-text-left-image-top-2-right .imagestext-heading-item,
.imagestext-layout-layout-text-left-image-top-2-right .imagestext-text-item,
.imagestext-layout-layout-text-left-image-top-2-right .imagestext-item-top-image {
    grid-column: 1;
}

/* Versatz nach unten für Spalte 2 */
.imagestext-layout-layout-text-left-image-top-2-right .imagestext-item-right-1 {
    grid-column: 2;
    grid-row: 1 / span 10;
    margin-top: 20vh; /* Starker Versatz */
}

/* Spalte 3 sitzt oben */
.imagestext-layout-layout-text-left-image-top-2-right .imagestext-item-right-2 {
    grid-column: 3;
    grid-row: 1 / span 10;
    margin-top: 5vh;
}


/* LAYOUT 2: Text Links / Grosses Bild Rechts */
.imagestext-layout-layout-text-left-image-right-2-below {
    /* Halbe Halbe Aufteilung über den ganzen Screen */
    grid-template-columns: 1fr 1fr !important;
    gap: 6vw;
}

.imagestext-layout-layout-text-left-image-right-2-below .imagestext-heading-item {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    margin-bottom: 20px;
}
.imagestext-layout-layout-text-left-image-right-2-below .imagestext-text-item {
    grid-column: 1;
    grid-row: 2;
}

/* Das große Bild rechts füllt den Platz bis zum Rand */
.imagestext-layout-layout-text-left-image-right-2-below .imagestext-item-right-main {
    grid-column: 2;
    grid-row: 1 / span 2;
}

/* Untere Bilder */
.imagestext-layout-layout-text-left-image-right-2-below .imagestext-item-below-1 {
    grid-column: 1;
    grid-row: 3;
    width: 90%; 
    margin-top: 50px;
}
.imagestext-layout-layout-text-left-image-right-2-below .imagestext-item-below-2 {
    grid-column: 2;
    grid-row: 3;
    width: 60%;
    margin-left: auto; /* Rechtsbündig */
    margin-top: -100px; /* Überlappungs-Effekt */
}


/* LAYOUT 3: Video */
.imagestext-layout-layout-text-left-video-right-image-below {
    grid-template-columns: 45fr 55fr !important; /* Video etwas breiter */
    gap: 15vw;
}
.imagestext-layout-layout-text-left-video-right-image-below .imagestext-item-video {
    grid-column: 2;
    grid-row: 1 / span 3;
}


/* ===================================
   MOBILE & TABLET (Stacked & Stylish)
   =================================== */

@media (max-width: 1024px) {
    /* Auf Tablet/Mobile den "Breakout" etwas zähmen */
    .imagestext-grid {
        padding: 0 20px; /* Sicherer Abstand am Rand */
    }
    
    .imagestext-heading h1 { font-size: 3.5rem; }
}

@media (max-width: 768px) {
    .imagestext-element {
        margin: 50px 0;
        /* Auf Mobile kein negativer Margin Breakout nötig, da eh alles 100% */
        width: 100%;
        left: auto;
        right: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .imagestext-grid,
    .imagestext-layout-layout-text-left-image-top-2-right,
    .imagestext-layout-layout-text-left-image-right-2-below,
    .imagestext-layout-layout-text-left-video-right-image-below {
        display: flex !important;
        flex-direction: column;
        gap: 40px !important;
        padding: 0 20px;
    }

    /* Reset aller Spaltenzuweisungen */
    .imagestext-item, 
    .imagestext-heading-item,
    .imagestext-text-item,
    .imagestext-item-right-1,
    .imagestext-item-right-2,
    .imagestext-item-right-main,
    .imagestext-item-below-1,
    .imagestext-item-below-2 {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    .imagestext-text {
        max-width: 100%;
    }

    /* Künstlerische Anordnung Mobile */
    
    /* Layout 1 Mobile: Bilder versetzt */
    .imagestext-layout-layout-text-left-image-top-2-right .imagestext-item-right-1 {
        width: 85% !important;
        margin-bottom: -20px !important;
    }
    .imagestext-layout-layout-text-left-image-top-2-right .imagestext-item-right-2 {
        width: 85% !important;
        align-self: flex-end;
    }

    /* Layout 2 Mobile: Text oben */
    .imagestext-layout-layout-text-left-image-right-2-below .imagestext-heading-item {
        order: -2;
    }
    .imagestext-layout-layout-text-left-image-right-2-below .imagestext-text-item {
        order: -1;
    }
    
    .imagestext-layout-layout-text-left-image-right-2-below .imagestext-item-below-2 {
        width: 70% !important;
        align-self: flex-end;
        margin-top: -30px !important;
    }
}

/* Zweispaltig */
.twocolumn-element-wrapper {
    margin: 60px 0;
}

.twocolumn-element-wrapper h2 {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 2.5em;
    font-weight: 500;
    margin-bottom: 30px;
    color: #000000;
    letter-spacing: -0.02em;
}

.twocolumn-element {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.twocolumn-element > div {
    font-size: 1.05em;
    line-height: 1.7;
    color: #333333;
}

@media (max-width: 768px) {
    .twocolumn-element {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Vollbreites Bild / Slider */
.site-main {
    padding-top: 0px; /* Abstand für Header */
}

/* Slider direkt unter Header - negiert padding */
.fullwidth-slider-wrapper:first-child {
    margin-top: -80px;
}

.fullwidth-slider-wrapper {
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.fullwidth-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000000;
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.slider-track {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 500px;
}

.slider-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
}

.slider-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.slider-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.slider-content {
    max-width: 800px;
    text-align: center;
    color: #ffffff;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
}

.slider-heading {
    font-family: 'HALTimezone', serif;
    font-size: 4em;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 50px;
    margin-top: 0;
    color: #ffffff;
    letter-spacing: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.slider-caption {
    font-size: 1.4em;
    line-height: 1.7;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    margin-top: 0;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Slider Indicators */
.slider-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.slider-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.slider-indicator:hover {
    background: rgba(255, 255, 255, 0.6);
}

.slider-indicator.active {
    background: rgba(255, 255, 255, 0.9);
    width: 24px;
    border-radius: 4px;
}

/* Bildergalerie */
.image-gallery {
    margin: 60px 0;
}

.image-gallery .gallery-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 2.5em;
    font-weight: 500;
    margin-bottom: 20px;
    color: #000000;
    letter-spacing: -0.02em;
}

.image-gallery .gallery-description {
    font-size: 1.1em;
    line-height: 1.7;
    color: #555555;
    margin-bottom: 40px;
    max-width: 800px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #f5f5f5;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-item .image-description {
    padding: 15px;
    font-size: 0.9em;
    line-height: 1.5;
    color: #555555;
    background: #f5f5f5;
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
    }
    
    .image-gallery .gallery-title {
        font-size: 2em;
        margin-bottom: 30px;
    }
}

/* ===================================
   Quote/Zitat Element
   =================================== */

.quote-element {
    margin: 80px 0;
    padding: 60px 40px;
    background: #f9f9f9;
    border-radius: 8px;
}

.quote-element.quote-center {
    text-align: center;
}

.quote-element.quote-left {
    text-align: left;
}

.quote-text {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 2.5em;
    line-height: 1.4;
    color: #000000;
    margin: 0 0 30px 0;
    padding: 0;
    border: none;
    quotes: """ """ "'" "'";
}

.quote-text::before {
    content: open-quote;
}

.quote-text::after {
    content: close-quote;
}

.quote-author {
    font-size: 1.3em;
    color: #666666;
}

.quote-author cite {
    font-style: normal;
    font-weight: 500;
    color: #000000;
}

.quote-author-position {
    display: block;
    margin-top: 5px;
    font-size: 0.9em;
    color: #999999;
}

.quote-author-position::before {
    content: " — ";
}

/* ===================================
   Button / CTA Element
   =================================== */

.button-element {
    margin: 40px 0;
}

.button-element.button-align-left {
    text-align: left;
}

.button-element.button-align-center {
    text-align: center;
}

.button-element.button-align-right {
    text-align: right;
}

.btn {
    display: inline-block;
    padding: 15px 40px;
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 1em;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid #000000;
    border-radius: 4.15rem;
}

.btn-primary {
    background: #000000;
    color: #ffffff;
}

.btn-primary:hover {
    background: #ffffff;
    color: #000000;
}

.btn-secondary {
    background: transparent;
    color: #000000;
}

.btn-secondary:hover {
    background: #000000;
    color: #ffffff;
}

.btn-text {
    background: transparent;
    color: #000000;
    border: none;
    padding: 10px 20px;
    text-decoration: underline;
}

.btn-text:hover {
    opacity: 0.6;
}

/* ===================================
   Icon-Text-Liste
   =================================== */

.icon-text-list {
    margin: 60px 0;
}

.icon-list-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 3.5em;
    font-weight: 500;
    margin-bottom: 20px;
    color: #000000;
    letter-spacing: -0.02em;
}

.icon-list-intro {
    font-size: 1.3em;
    line-height: 1.7;
    color: #555555;
    margin-bottom: 50px;
    max-width: 800px;
}

.icon-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

.icon-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.icon-item-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.icon-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon-item-content {
    flex: 1;
}

.icon-item-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 1.8em;
    font-weight: 500;
    margin-bottom: 15px;
    color: #000000;
}

.icon-item-text {
    font-size: 1.2em;
    line-height: 1.6;
    color: #555555;
}

/* ===================================
   Karten-Grid
   =================================== */

.card-grid-wrapper {
    margin: 60px 0;
}

.card-grid-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 3.5em;
    font-weight: 500;
    margin-bottom: 20px;
    color: #000000;
    letter-spacing: -0.02em;
}

.card-grid-intro {
    font-size: 1.3em;
    line-height: 1.7;
    color: #555555;
    margin-bottom: 50px;
    max-width: 800px;
}

.card-grid {
    display: grid;
    gap: 40px;
}

.card-grid.card-grid-cols-2 {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.card-grid.card-grid-cols-3 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.card-grid.card-grid-cols-4 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card-item {
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.card-item:hover {
    transform: translateY(-5px);
}

.card-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #f5f5f5;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card-item:hover .card-image img {
    transform: scale(1.05);
}

.card-content {
    padding: 30px;
}

.card-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 1.9em;
    font-weight: 500;
    margin-bottom: 15px;
    color: #000000;
}

.card-text {
    font-size: 1.2em;
    line-height: 1.6;
    color: #555555;
    margin-bottom: 20px;
}

.card-link {
    display: inline-block;
    color: #000000;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.card-link:hover {
    opacity: 0.6;
}

/* ===================================
   Separator / Trennlinie
   =================================== */

.separator-element {
    margin: 60px 0;
}

.separator-line {
    border: none;
    border-top: 1px solid #000000;
    margin: 0;
}

.separator-element.separator-dashed .separator-line {
    border-top-style: dashed;
}

.separator-element.separator-dotted .separator-line {
    border-top-style: dotted;
}

.separator-with-text {
    position: relative;
    text-align: center;
    border-top: 1px solid #000000;
}

.separator-element.separator-dashed .separator-with-text {
    border-top-style: dashed;
}

.separator-element.separator-dotted .separator-with-text {
    border-top-style: dotted;
}

.separator-text {
    position: relative;
    display: inline-block;
    background: #ffffff;
    padding: 0 20px;
    top: -12px;
    font-size: 0.95em;
    color: #666666;
}

/* ===================================
   Video Element - Volle Breite
   =================================== */

.video-element-fullwidth {
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.video-header {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px 40px;
}

.video-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 3.5em;
    font-weight: 500;
    margin-bottom: 20px;
    color: #000000;
    letter-spacing: -0.02em;
}

.video-description {
    font-size: 1.3em;
    line-height: 1.7;
    color: #555555;
    max-width: 800px;
}

.video-container-fullwidth {
    position: relative;
    width: 100%;
    background: #000000;
}

.video-embed-fullwidth {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Ratio */
    height: 0;
    overflow: hidden;
}

.video-embed-fullwidth iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-hosted-fullwidth {
    position: relative;
    width: 100%;
}

.video-hosted-fullwidth video {
    width: 100%;
    height: auto;
    display: block;
}

/* ===================================
   Akkordeon / FAQ
   =================================== */

.accordion-element {
    margin: 60px 0;
}

.accordion-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 3.5em;
    font-weight: 500;
    margin-bottom: 40px;
    color: #000000;
    letter-spacing: -0.02em;
}

.accordion-items {
    border-top: 2px solid #000000;
}

.accordion-item {
    border-bottom: 2px solid #000000;
}

.accordion-header {
    width: 100%;
    padding: 25px 80px 25px 0;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    transition: opacity 0.3s ease;
    position: relative;
}

.accordion-header:hover {
    opacity: 0.7;
}

.accordion-item-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 2.2em;
    font-weight: 500;
    color: #000000;
}

.accordion-header::after {
    content: " →";
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: #000000;
    transition: transform 0.3s ease;
    font-size: 2em;
    line-height: 1;
}

.accordion-header:hover::after {
    transform: translateY(-50%) translateX(5px);
}

.accordion-item.is-open .accordion-header::after {
    transform: translateY(-50%) rotate(90deg);
}

.accordion-item.is-open .accordion-header:hover::after {
    transform: translateY(-50%) rotate(90deg) translateX(5px);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-inner {
    padding: 0 0 25px 0;
    font-size: 1.2em;
    line-height: 1.7;
    color: #555555;
}

.accordion-inner ul,
.accordion-inner ol {
    list-style-position: outside;
    padding-left: 1.5em;
    margin: 1em 0;
}

.accordion-inner ul {
    list-style-type: disc;
}

.accordion-inner ol {
    list-style-type: decimal;
}

.accordion-inner li {
    margin: 0.5em 0;
    padding-left: 0.5em;
}

/* ===================================
   Team / Mitarbeiter
   =================================== */

.team-member-element {
    margin: 60px 0;
}

.team-section-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 3.5em;
    font-weight: 500;
    margin-bottom: 50px;
    color: #000000;
    letter-spacing: -0.02em;
}

.team-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 50px;
}

.team-member {
    text-align: center;
}

.team-member-image {
    width: 200px;
    height: 200px;
    margin: 0 auto 25px;
    border-radius: 50%;
    overflow: hidden;
    background: #f5f5f5;
}

.team-member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-member-name {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 1.8em;
    font-weight: 500;
    margin-bottom: 8px;
    color: #000000;
}

.team-member-position {
    font-size: 1.2em;
    color: #666666;
    margin-bottom: 15px;
}

.team-member-bio {
    font-size: 1.1em;
    line-height: 1.6;
    color: #555555;
    margin-bottom: 20px;
}

.team-member-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.team-contact-link {
    color: #000000;
    text-decoration: none;
    font-size: 0.95em;
    transition: opacity 0.3s ease;
}

.team-contact-link:hover {
    opacity: 0.6;
}

/* ===================================
   Kontaktkarte
   =================================== */

.contact-card-element {
    margin: 60px 0;
}

.contact-card-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 3.5em;
    font-weight: 500;
    margin-bottom: 40px;
    color: #000000;
    letter-spacing: -0.02em;
}

.contact-card {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    padding: 40px;
    background: #f9f9f9;
    border-radius: 8px;
}

.contact-card-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #e0e0e0;
}

.contact-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-card-info {
    flex: 1;
}

.contact-name {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 2em;
    font-weight: 500;
    margin-bottom: 8px;
    color: #000000;
}

.contact-position {
    font-size: 1.3em;
    color: #666666;
    margin-bottom: 25px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-detail {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-detail svg {
    flex-shrink: 0;
    color: #000000;
}

.contact-detail a {
    color: #000000;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.contact-detail a:hover {
    opacity: 0.6;
}

/* ===================================
   Zeitstrahl / Timeline
   =================================== */

.timeline-element {
    margin: 60px 0;
}

.timeline-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 3.5em;
    font-weight: 500;
    margin-bottom: 20px;
    color: #000000;
    letter-spacing: -0.02em;
}

.timeline-intro {
    font-size: 1.3em;
    line-height: 1.7;
    color: #555555;
    margin-bottom: 50px;
    max-width: 800px;
}

.timeline-items {
    position: relative;
    padding-left: 40px;
}

.timeline-items::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e0e0e0;
}

.timeline-item {
    position: relative;
    padding-bottom: 50px;
}

.timeline-marker {
    position: absolute;
    left: -47px;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #000000;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 2px #e0e0e0;
}

.timeline-year {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 1em;
    font-weight: 500;
    color: #999999;
    margin-bottom: 8px;
}

.timeline-item-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 1.9em;
    font-weight: 500;
    margin-bottom: 15px;
    color: #000000;
}

.timeline-item-text {
    font-size: 1.2em;
    line-height: 1.7;
    color: #555555;
    margin-bottom: 20px;
}

.timeline-item-image {
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.timeline-item-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===================================
   Footer - Minimalistisches Design
   =================================== */

.site-footer {
    background-color: #ffffff;
    border-top: 2px solid #000000;
    padding: 60px 0 30px;
    margin-top: 60px;
    width: 100%;
}

.footer-container {
    background-color: #ffffff;
    border-top: 2px solid #000000;
    padding: 60px 40px 30px;
    margin-top: 60px;
}

.footer-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 60px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 100px;
    align-items: center;
    justify-content: space-between;
}

/* Linke Seite - Adresse & Kontakt */
.footer-left {
    display: flex;
    flex-direction: column;
    gap: 40px;
    flex-shrink: 0;
}

/* Mitte - Newsletter links, Links rechts */
.footer-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding-left: 0;
    flex-wrap: wrap;
}

/* Footer Adresse */
.footer-address {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-address-name {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 1.1em;
    line-height: 1.4;
    color: #000000;
}

.footer-address-details {
    font-size: 0.95em;
    line-height: 1.6;
    color: #000000;
}

.footer-address-details p {
    margin: 0;
}

/* Newsletter Section - Minimalistisch mit Unterstrich */
.footer-newsletter {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
}

.newsletter-text {
    font-size: 0.95em;
    line-height: 1.7;
    margin-bottom: 25px;
    color: #000000;
    font-family: sans-serif;
}

.newsletter-form {
    position: relative;
}

.newsletter-input-wrapper {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #000000;
    padding-bottom: 8px;
    gap: 10px;
}

.newsletter-input {
    border: none;
    padding: 5px 0;
    flex-grow: 1;
    outline: none;
    background: transparent;
    color: #000000;
    font-family: sans-serif;
    font-size: 0.95em;
}

.newsletter-input::placeholder {
    color: #000000;
    opacity: 1;
}

.newsletter-submit {
    background: transparent;
    color: #000000;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
}

.newsletter-button {
    display: inline-block;
    padding: 12px 30px;
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 0.95em;
    text-decoration: none;
    border-radius: 4.15rem;
    border: 2px solid #000000;
    background: transparent;
    color: #000000;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
    min-height: 48px;
}

.newsletter-button:hover {
    background: #000000;
    color: #ffffff;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.newsletter-submit:hover {
    transform: translateX(3px);
}

/* Footer Contact - Einfach ohne Labels */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.95em;
}

.footer-contact p {
    margin: 0;
    line-height: 1.5;
}

.contact-link {
    color: #000000;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.contact-link:hover {
    opacity: 0.6;
}

/* Footer Social Links */
.footer-social {
    display: flex;
    gap: 20px;
    align-items: center;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #000000;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid #000000;
    border-radius: 50%;
    background: transparent;
}

.social-link:hover {
    background: #000000;
    color: #ffffff;
    transform: translateY(-2px);
}

.social-link svg {
    width: 20px;
    height: 20px;
}

/* Rechte Seite - Illustration & Social Links */
.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 30px;
    flex-shrink: 0;
}

/* Vertriebswerk Logo */
.footer-vw-logo {
    margin-top: 20px;
}

.vw-logo-link {
    display: inline-block;
    text-decoration: none;
}

.vw-logo-link svg {
    width: 50px;
    height: auto;
    display: block;
}

.vw-logo-link .vw-logo-path {
    fill: #000000;
    transition: fill 0.3s ease;
}

.vw-logo-link:hover .vw-logo-path {
    fill: #3e617c;
}

/* Footer Navigation - Vertical */
.footer-center-nav-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 5px;
}

.footer-nav a,
.footer-link {
    color: #000000;
    text-decoration: none;
    font-size: 0.95em;
    transition: opacity 0.3s ease;
    display: inline-block;
}

.footer-nav a:hover,
.footer-link:hover {
    opacity: 0.6;
}

/* Footer Illustration */
.footer-illustration {
    flex-shrink: 0;
    max-width: 400px;
    width: 100%;
}

.footer-illustration img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 400px;
}

.footer-illustration img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===================================
   Responsive Design
   =================================== */

@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .footer-right {
        justify-content: flex-start;
    }
}

@media (max-width: 1024px) {
    .header-container {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .header-left,
    .header-right {
        gap: 15px;
    }
    
    .header-logo-box {
        padding: 6px 10px;
    }
    
    .header-logo-image {
        display: none;
    }
    
    .burger-menu-button {
        width: 36px;
        height: 36px;
    }
    
    .burger-line {
        width: 22px;
        height: 2px;
    }
}

@media (max-width: 768px) {
    .hero-element {
        padding: 60px 20px;
        min-height: 400px;
    }
    
    .hero-element .hero-heading {
        font-size: 2.5em;
    }
    
    .hero-element .hero-subtitle {
        font-size: 1.1em;
    }
    
    .textimage-element {
        padding: 60px 0;
    }
    
    .textimage-element .textimage-content {
        flex-direction: column !important;
        gap: 0;
    }
    
    .textimage-element .textimage-content .textimage-image,
    .textimage-element .textimage-content .textimage-text {
        flex: 0 0 100% !important;
    }
    
    .textimage-element .textimage-content .textimage-text {
        padding: 40px;
    }
    
    h2.large-heading {
        font-size: 2em;
    }
    
    /* Slider responsive */
    .slider-track {
        height: 50vh;
        min-height: 400px;
    }
    
    .slider-caption {
        font-size: 1em;
    }
    
    .slider-indicators {
        bottom: 20px;
        gap: 10px;
    }
    
    /* Video responsive */
    .video-header {
        padding: 40px 20px 30px;
    }
    
    .video-title {
        font-size: 2em;
    }
    
    /* Quote responsive */
    .quote-text {
        font-size: 1.4em;
    }
    
    /* Button responsive */
    .btn {
        padding: 12px 30px;
        font-size: 0.95em;
    }
    
    /* Icon-Text-Liste responsive */
    .icon-items-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* Karten-Grid responsive */
    .card-grid.card-grid-cols-2,
    .card-grid.card-grid-cols-3,
    .card-grid.card-grid-cols-4 {
        grid-template-columns: 1fr;
    }
    
    .card-content {
        padding: 25px;
    }
    
    /* Team responsive */
    .team-members-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* Kontaktkarte responsive */
    .contact-card {
        flex-direction: column;
        gap: 25px;
        padding: 30px;
    }
    
    .contact-card-image {
        width: 120px;
        height: 120px;
        margin: 0 auto;
    }
    
    .contact-card-info {
        text-align: center;
    }
    
    /* Timeline responsive */
    .timeline-items {
        padding-left: 30px;
    }
    
    .timeline-marker {
        left: -37px;
    }
    
    /* Accordion responsive */
    .accordion-item-title {
        font-size: 1.5em;
    }
    
    .accordion-inner {
        font-size: 1em;
    }
    
    .site-footer,
    .footer-container {
        padding: 60px 20px 50px;
        margin-top: 80px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px;
        justify-items: center;
        text-align: center;
    }
    
    .footer-left {
        gap: 30px;
        align-items: center;
        text-align: center;
    }
    
    .footer-center {
        flex-direction: column;
        gap: 40px;
        padding-left: 0;
        justify-content: center;
        align-items: center;
    }
    
    .footer-newsletter {
        width: 100%;
        max-width: 100%;
        order: 2;
    }
    
    .footer-center-nav-wrapper {
        order: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .footer-nav {
        align-items: center;
        text-align: center;
    }
    
    .footer-right {
        align-items: center;
    }
    
    .footer-address-name {
        font-size: 1em;
    }
    
    .footer-address-details {
        font-size: 0.9em;
    }
    
    .footer-social {
        gap: 15px;
    }
    
    .social-link {
        width: 36px;
        height: 36px;
    }
    
    .social-link svg {
        width: 18px;
        height: 18px;
    }
    
    .newsletter-section {
        max-width: 100%;
    }
    
    .footer-illustration {
        max-width: 350px;
    }
    
    .footer-illustration img {
        max-width: 350px;
    }
}

@media (max-width: 480px) {
    .hero-element {
        padding: 50px 15px;
        min-height: 350px;
    }
    
    .hero-element .hero-heading {
        font-size: 2em;
    }
    
    .footer-illustration {
        max-width: 250px;
    }
    
    /* Slider mobile */
    .slider-track {
        height: 60vh;
        min-height: 350px;
    }
    
    .slider-overlay {
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .slider-content {
        padding: 20px 15px;
        max-width: 100%;
    }
    
    .slider-heading {
        font-size: 1.6em;
        margin-bottom: 12px;
        line-height: 1.3;
    }
    
    .slider-caption {
        font-size: 0.95em;
        line-height: 1.4;
        margin-top: 0;
    }
    
    .slider-indicators {
        bottom: 15px;
        gap: 6px;
    }
    
    .slider-indicator {
        width: 6px;
        height: 6px;
    }
    
    .slider-indicator.active {
        width: 18px;
    }
    
    /* Video mobile */
    .video-header {
        padding: 30px 15px 20px;
    }
    
    .video-title {
        font-size: 1.6em;
    }
    
    /* Quote mobile */
    .quote-element {
        padding: 40px 20px;
    }
    
    .quote-text {
        font-size: 1.2em;
    }
    
    /* Button mobile */
    .btn {
        padding: 10px 25px;
        font-size: 0.9em;
    }
    
    /* Card mobile */
    .card-image {
        height: 200px;
    }
    
    .card-content {
        padding: 20px;
    }
    
    /* Contact Card mobile */
    .contact-card {
        padding: 25px;
    }
    
    .contact-card-image {
        width: 100px;
        height: 100px;
    }
    
    /* Timeline mobile */
    .timeline-items {
        padding-left: 25px;
    }
    
    .timeline-marker {
        left: -32px;
        width: 12px;
        height: 12px;
    }
    
    /* Team mobile */
    .team-member-image {
        width: 150px;
        height: 150px;
    }
}

/* ===================================
   News Styles
   =================================== */

/* News List View */
/* ===================================
   NEWS LISTE (wie Zimmer-Liste)
   =================================== */

.news-liste-element {
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 100px 0;
}

.news-liste-wrapper {
    max-width: none;
    width: 100%;
    margin: 0 auto;
    padding: 0 120px;
    box-sizing: border-box;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 50px;
    grid-auto-rows: auto;
    align-items: start;
    max-width: 1800px;
    margin: 0 auto;
}

/* Überschreibe site-main max-width für News-Liste (wie bei Zimmer-Liste) */
.site-main:has(.news-list) {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* News-Grid mit versetzter Anordnung (max 3 Spalten, wie Zimmer-Cards) - volle Bildschirmbreite */
.news-grid-staggered {
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    width: 100%;
    padding: 0 120px;
    box-sizing: border-box;
}

.news-card {
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    break-inside: avoid;
}

/* Versetzte Anordnung für News-Cards (wie Zimmer-Cards) */
/* Muster: 1. oben, 2. unten, 3. oben, 4. unten, 5. oben, 6. unten, etc. */
.news-card-staggered {
    margin-top: 0;
    transition-property: margin-top;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: 0.7s;
    transform: none;
    margin-left: 0;
    margin-right: 0;
}

/* Ungerade Positionen (1, 3, 5, 7, 9, ...) = oben */
.news-card-staggered:nth-child(2n+1) {
    margin-top: 0;
}

/* Gerade Positionen (2, 4, 6, 8, 10, ...) = unten */
.news-card-staggered:nth-child(2n) {
    margin-top: 100px;
}

/* Große Karte (ab Index 4, dann jede 6. Karte) */
.news-card-large {
    grid-column: span 2;
}

/* Hohe Karte (ab Index 5, dann jede 6. Karte) */
.news-card-tall {
    grid-row: span 2;
}

.news-image-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: #f5f5f5;
}

/* Variationen der Bildhöhen für lockeren Look (nur für nicht-versetzte Cards) */
.news-card:not(.news-card-staggered):first-child .news-image-wrapper {
    height: 300px;
}

.news-card:not(.news-card-staggered):nth-child(2) .news-image-wrapper {
    height: 320px;
}

.news-card:not(.news-card-staggered):nth-child(3) .news-image-wrapper {
    height: 280px;
}

.news-card:not(.news-card-staggered):nth-child(4) .news-image-wrapper {
    height: 340px;
}

.news-card:not(.news-card-staggered):nth-child(5n) .news-image-wrapper {
    height: 300px;
}

.news-card:not(.news-card-staggered):nth-child(5n+1) .news-image-wrapper {
    height: 320px;
}

.news-card:not(.news-card-staggered):nth-child(5n+2) .news-image-wrapper {
    height: 280px;
}

.news-card:not(.news-card-staggered):nth-child(5n+3) .news-image-wrapper {
    height: 340px;
}

.news-card:not(.news-card-staggered):nth-child(5n+4) .news-image-wrapper {
    height: 310px;
}

/* Versetzte News-Cards verwenden zimmer-image-wrapper (Hochformat wie Zimmer-Cards) */
.news-card-staggered .zimmer-image-wrapper {
    height: auto;
    aspect-ratio: 3 / 4;
}

.news-card-large .news-image-wrapper {
    height: 420px;
}

.news-card-tall .news-image-wrapper {
    height: 400px;
}

.news-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-content {
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Variationen im Content-Padding */
.news-card-large .news-content {
    padding: 40px;
}

.news-card-tall .news-content {
    padding: 35px;
}

.news-item-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.news-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 2em;
    font-weight: 500;
    margin: 0 0 15px 0;
    color: #000000;
    line-height: 1.2;
}

.news-teaser {
    font-family: 'HALTimezone', serif;
    font-size: 1.1em;
    color: #666666;
    margin: 0 0 20px 0;
    line-height: 1.5;
    flex-grow: 1;
}

.news-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.news-date {
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 0.9em;
    color: #666666;
}

.news-button {
    display: inline-block;
    padding: 12px 30px;
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 0.95em;
    text-decoration: none;
    border-radius: 4.15rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid #000000;
    text-align: center;
    white-space: nowrap;
}

.news-button-secondary {
    background: transparent;
    color: #000000;
}

.news-button-secondary:hover {
    background: #000000;
    color: #ffffff;
}

/* Responsive Design für versetzte News-Grid */
@media (max-width: 1024px) {
    .news-grid-staggered {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 60px;
    }
    
    /* Auf Tablets: 1. oben, 2. unten, 3. oben, 4. unten, etc. */
    .news-card-staggered:nth-child(2n+1) {
        margin-top: 0;
    }
    
    .news-card-staggered:nth-child(2n) {
        margin-top: 100px;
    }
}

@media (max-width: 768px) {
    .news-grid-staggered {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }
    
    /* Auf Mobile: Alle Cards oben, keine Versetzung */
    .news-card-staggered {
        margin-top: 0 !important;
    }
}

/* Fallback, falls alte Klassen noch gerendert werden (news-item, news-item-image, news-item-content) */
.news-item {
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    break-inside: avoid;
}

.news-item:nth-child(4n) { transform: rotate(-1deg); margin-top: 20px; }
.news-item:nth-child(4n+1) { transform: rotate(0.7deg); margin-top: -10px; }
.news-item:nth-child(4n+2) { transform: rotate(-0.5deg); margin-top: 25px; }
.news-item:nth-child(4n+3) { transform: rotate(0.9deg); margin-top: -15px; }
.news-item:nth-child(5n) { margin-left: 15px; }
.news-item:nth-child(5n+2) { margin-right: 15px; }
.news-item:nth-child(6n+3) { margin-top: 30px; }
.news-item:nth-child(7n) { margin-bottom: 20px; }

.news-item .news-item-image {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: #f5f5f5;
}

.news-item:first-child .news-item-image { height: 300px; }
.news-item:nth-child(2) .news-item-image { height: 320px; }
.news-item:nth-child(3) .news-item-image { height: 280px; }
.news-item:nth-child(4) .news-item-image { height: 340px; }
.news-item:nth-child(5n) .news-item-image { height: 300px; }
.news-item:nth-child(5n+1) .news-item-image { height: 320px; }
.news-item:nth-child(5n+2) .news-item-image { height: 280px; }
.news-item:nth-child(5n+3) .news-item-image { height: 340px; }
.news-item:nth-child(5n+4) .news-item-image { height: 310px; }

.news-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-item .news-item-content {
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news-item .news-item-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 2em;
    font-weight: 500;
    margin: 0 0 15px 0;
    color: #000000;
    line-height: 1.2;
}

.news-item .news-item-teaser {
    font-family: 'HALTimezone', serif;
    font-size: 1.1em;
    color: #666666;
    margin: 0 0 20px 0;
    line-height: 1.5;
    flex-grow: 1;
}

.news-item .news-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.news-item .news-item-date {
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 0.9em;
    color: #666666;
}

.news-item .news-item-readmore {
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 0.95em;
    color: #000000;
    font-weight: 500;
    display: inline-block;
}

/* News Detail View */
.news-detail-view {
    max-width: 1200px;
    margin: 0 auto 60px auto;
    background: #ffffff;
}

.news-detail-image {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: 0;
    margin-bottom: 40px;
    overflow: hidden;
    aspect-ratio: 21 / 9;
}

.news-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-detail-header {
    margin-bottom: 15px;
}

.news-detail-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 2.5em;
    font-weight: 500;
    margin-bottom: 0;
    color: #000000;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* E-Mail Autor - größer gemacht */
.news-detail-author-email {
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 1.4em;
    font-weight: 500;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 40px;
    margin-top: 0;
}

/* Name Autor - deutlich größer */
.news-detail-author {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 2.2em;
    font-weight: 500;
    color: #000000;
    letter-spacing: -0.02em;
    margin-top: 40px;
    margin-bottom: 40px;
}

.news-detail-date {
    font-size: 1em;
    color: #666666;
    display: block;
}

.news-detail-teaser {
    font-size: 1.2em;
    line-height: 1.7;
    color: #333333;
    margin-bottom: 30px;
}

.news-detail-body {
    font-size: 1.05em;
    line-height: 1.8;
    color: #333333;
    margin-bottom: 50px;
}

.news-detail-body h2 {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 1.8em;
    font-weight: 500;
    margin: 40px 0 20px;
    color: #000000;
}

.news-detail-body h3 {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 1.4em;
    font-weight: 500;
    margin: 30px 0 15px;
    color: #000000;
}

.news-detail-body p {
    margin-bottom: 20px;
}

.news-detail-body ul,
.news-detail-body ol {
    margin: 20px 0 20px 30px;
}

.news-detail-body li {
    margin-bottom: 10px;
}

.news-detail-back {
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.news-back-link {
    display: inline-block;
    color: #000000;
    text-decoration: none;
    font-size: 1em;
    font-weight: 500;
}

.news-back-link:hover {
    opacity: 0.6;
}

/* Empty State */
.news-list-empty {
    text-align: center;
    padding: 80px 20px;
    color: #666666;
}

.news-list-empty p {
    font-size: 1.2em;
}

/* Pagination */
.news-pagination {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #e0e0e0;
}

.pagination-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination-item {
    margin: 0;
}

.pagination-link {
    display: inline-block;
    padding: 10px 18px;
    border: 2px solid #000000;
    border-radius: 0;
    color: #000000;
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination-link:hover {
    background-color: #000000;
    color: #ffffff;
}

.pagination-link.current {
    background-color: #000000;
    color: #ffffff;
    cursor: default;
}

/* Responsive News Styles */
@media (max-width: 1024px) {
    .news-liste-element {
        padding: 80px 0;
    }
    
    .news-liste-wrapper {
        padding: 0 60px;
    }
    
    .news-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 40px;
    }
    
    .news-card-large {
        grid-column: span 1;
    }
    
    .news-card-tall {
        grid-row: span 1;
    }
}

@media (max-width: 768px) {
    .news-liste-element {
        padding: 60px 0;
    }
    
    .news-liste-wrapper {
        padding: 0 40px;
    }
    
    .news-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .news-card {
        transform: none !important;
        margin: 0 !important;
    }
    
    .news-card-large,
    .news-card-tall {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .news-image-wrapper {
        height: 240px;
    }
    
    .news-content {
        padding: 25px;
    }
    
    .news-title {
        font-size: 1.7em;
    }
    
    .news-detail-view {
        margin: 40px 20px;
    }
    
    .news-detail-title {
        font-size: 2em;
    }
    
    .news-detail-teaser {
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    .news-liste-wrapper {
        padding: 0 20px;
    }
    
    .news-image-wrapper {
        height: 200px;
    }
    
    .news-content {
        padding: 20px;
    }
    
    .news-title {
        font-size: 1.5em;
    }
    
    .news-detail-title {
        font-size: 1.6em;
    }
}

/* ===================================
   Intro Element
   =================================== */

.intro-element {
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.intro-container {
    max-width: none;
    width: 100%;
    margin: 0 auto;
    display: flex;
    gap: 100px;
    align-items: flex-start;
    padding: 0 120px;
    box-sizing: border-box;
}

.intro-left {
    flex: 1 1 auto;
    max-width: 55%;
}

.intro-heading {
    color: #000;
    font-family: "HALTimezone", serif;
    font-size: 7.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 8.4rem;
    margin: 0 0 5px 0;
}

.intro-subheadline {
    color: #000;
    font-family: "HALTimezone", serif;
    font-size: 7.4rem;
    font-style: italic;
    font-weight: 400;
    line-height: 8.4rem;
    margin: 0 0 50px 0;
}

.intro-text {
    color: #000;
    font-family: "HALTimezone", serif;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 3.2rem;
    margin-bottom: 50px;
}

.intro-secondary-image-wrapper {
    margin-top: 0;
    max-width: 650px;
}

.intro-secondary-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16/9;
}

.intro-caption-secondary {
    font-family: 'HALTimezone', serif;
    font-style: italic;
    font-size: 0.95em;
    color: #000000;
    margin-top: 20px;
    line-height: 1.5;
}

.intro-right {
    flex: 0 0 auto;
    width: 40%;
    margin-left: auto;
    max-width: 790px;
    position: relative;
}

.intro-main-image-wrapper {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 40px;
}

.intro-caption-main {
    font-family: 'HALTimezone', serif;
    font-style: italic;
    font-size: 1.15rem;
    color: #000000;
    margin: 0;
    line-height: 1.6;
    width: 220px;
    flex-shrink: 0;
    padding-bottom: 0;
    order: 1;
}

.intro-main-image {
    width: 550px;
    max-width: none;
    height: auto;
    display: block;
    object-fit: cover;
    flex-shrink: 0;
    order: 2;
}

.intro-video-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.intro-main-video {
    width: 550px;
    max-width: none;
    height: auto;
    display: block;
    object-fit: cover;
    flex-shrink: 0;
    order: 2;
}

.intro-secondary-video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16/9;
}

/* Responsive Anpassungen */
@media (max-width: 1600px) {
    .intro-container {
        padding: 0 80px;
        gap: 80px;
    }
}

@media (max-width: 1400px) {
    .intro-container {
        padding: 0 60px;
        gap: 60px;
    }
    
    .intro-heading {
        font-size: 6rem;
        line-height: 6.8rem;
    }
    
    .intro-subheadline {
        font-size: 6rem;
        line-height: 6.8rem;
    }
    
    .intro-main-image-wrapper {
        gap: 30px;
    }
    
    .intro-caption-main {
        max-width: 180px;
    }
}

@media (max-width: 1200px) {
    .intro-main-image-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    
    .intro-caption-main {
        max-width: 100%;
        margin-top: 25px;
        order: 2;
    }
    
    .intro-main-image,
    .intro-main-video {
        order: 1;
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .intro-element {
        padding: 60px 0;
    }
    
    .intro-container {
        flex-direction: column;
        gap: 50px;
        padding: 0 40px;
    }
    
    .intro-left {
        max-width: 100%;
    }
    
    .intro-right {
        width: 100%;
        max-width: 100%;
    }
    
    .intro-main-image-wrapper {
        position: relative;
        top: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    
    .intro-caption-main {
        max-width: 100%;
        margin-top: 25px;
        order: 2;
    }
    
    .intro-main-image,
    .intro-main-video {
        order: 1;
        width: 100%;
    }
    
    .intro-heading {
        font-size: 5rem;
        line-height: 5.7rem;
    }
    
    .intro-subheadline {
        font-size: 5rem;
        line-height: 5.7rem;
    }
    
    .intro-text {
        font-size: 2rem;
        line-height: 2.6rem;
    }
    
    .intro-secondary-image-wrapper {
        max-width: 400px;
    }
    
    .intro-main-image-wrapper {
        position: relative;
        top: 0;
    }
}

@media (max-width: 768px) {
    .intro-element {
        padding: 50px 0;
    }
    
    .intro-container {
        padding: 0 30px;
    }
    
    .intro-container {
        gap: 40px;
    }
    
    .intro-heading {
        font-size: 4rem;
        line-height: 4.5rem;
    }
    
    .intro-subheadline {
        font-size: 4rem;
        line-height: 4.5rem;
    }
    
    .intro-text {
        font-size: 1.8rem;
        line-height: 2.3rem;
    }
    
    .intro-secondary-image-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .intro-element {
        padding: 40px 0;
    }
    
    .intro-container {
        padding: 0 20px;
    }
    
    .intro-container {
        gap: 30px;
    }
    
    .intro-heading {
        font-size: 3rem;
        line-height: 3.4rem;
    }
    
    .intro-subheadline {
        font-size: 3rem;
        line-height: 3.4rem;
    }
    
    .intro-text {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

/* ===================================
   3 Bilder + Illustration Element
   =================================== */

.three-images-illustration-element {
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 100px 0;
}

.three-images-container {
    max-width: none;
    width: 100%;
    margin: 0 auto;
    display: flex;
    gap: 100px;
    align-items: center;
    padding: 0 120px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.three-images-left-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.three-images-right-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    margin-left: auto;
}

.three-images-images-row {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-end;
}


.three-images-top-row {
    display: flex;
    gap: 50px;
    align-items: flex-end;
}

.three-images-item {
    flex-shrink: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.three-images-image-1 {
    width: 450px;
    max-width: 100%;
}

.three-images-image-1 .three-images-image {
    height: 850px;
    object-fit: cover;
}

.three-images-illustration {
    width: 350px;
    max-width: 100%;
    margin-top: 0;
    margin-left: 0;
}

.three-images-text-block {
    width: 1200px;
    max-width: none;
}

.three-images-text-top {
    max-width: 380px;
    margin-bottom: 0;
}

.three-images-text-small {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #000;
    font-family: "HALTimezone", serif;
}

.three-images-image-2 {
    width: 380px;
    max-width: 100%;
}

.three-images-image-2 .three-images-image {
    height: 420px;
    object-fit: cover;
}

.three-images-image-3 {
    width: 480px;
    max-width: 100%;
}

.three-images-image-3 .three-images-image {
    height: 850px;
    object-fit: cover;
}

.three-images-image,
.three-images-illustration-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-width: 100%;
}


.three-images-video-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.three-images-video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.three-images-caption {
    font-family: 'HALTimezone', serif;
    font-style: italic;
    font-size: 0.95em;
    color: #000000;
    margin-top: 15px;
    line-height: 1.5;
}

.three-images-caption-above {
    margin-top: 0;
    margin-bottom: 15px;
}

.three-images-title {
    color: #000;
    font-family: "HALTimezone", serif;
    font-size: 4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 4.5rem;
    margin: 0 0 30px 0;
}

.three-images-text {
    color: #000;
    font-family: "HALTimezone", serif;
    font-size: 1.15rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.8;
}


/* Responsive Anpassungen */
@media (max-width: 1800px) {
    .three-images-container {
        padding: 0 100px;
        gap: 80px;
    }
    
    .three-images-image-1 {
        width: 420px;
    }
    
    .three-images-image-1 .three-images-image {
        height: 780px;
    }
    
    .three-images-illustration {
        width: 330px;
    }
    
    .three-images-text-block {
        width: 900px;
    }
    
    .three-images-image-2 {
        width: 360px;
    }
    
    .three-images-image-2 .three-images-image {
        height: 400px;
    }
    
    .three-images-image-3 {
        width: 460px;
    }
    
    .three-images-image-3 .three-images-image {
        height: 780px;
    }
    
    .three-images-images-row {
        gap: 35px;
    }
}

@media (max-width: 1600px) {
    .three-images-container {
        padding: 0 80px;
        gap: 70px;
    }
    
    .three-images-image-1 {
        width: 380px;
    }
    
    .three-images-image-1 .three-images-image {
        height: 700px;
    }
    
    .three-images-illustration {
        width: 300px;
    }
    
    .three-images-text-block {
        width: 800px;
    }
    
    .three-images-image-2 {
        width: 330px;
    }
    
    .three-images-image-2 .three-images-image {
        height: 370px;
    }
    
    .three-images-image-3 {
        width: 420px;
    }
    
    .three-images-image-3 .three-images-image {
        height: 700px;
    }
    
    .three-images-images-row {
        gap: 30px;
    }
}

@media (min-width: 1351px) and (max-width: 2245px) {
    .three-images-text-block {
        width: 700px;
        max-width: 700px;
    }
}

@media (max-width: 1400px) {
    .three-images-container {
        padding: 0 60px;
        gap: 60px;
    }
    
    .three-images-title {
        font-size: 3.5rem;
        line-height: 4rem;
    }
    
    .three-images-image-1 {
        width: 380px;
    }
    
    .three-images-image-1 .three-images-image {
        height: 650px;
    }
    
    .three-images-illustration {
        width: 300px;
    }
    
    .three-images-text-block {
        width: 750px;
    }
    
    .three-images-image-2 {
        width: 330px;
    }
    
    .three-images-image-2 .three-images-image {
        height: 370px;
    }
    
    .three-images-image-3 {
        width: 420px;
    }
    
    .three-images-image-3 .three-images-image {
        height: 650px;
    }
    
    .three-images-images-row {
        gap: 30px;
    }
}

@media (max-width: 1350px) {
    .three-images-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 50px;
        padding: 0 60px;
        overflow-x: visible;
    }
    
    .three-images-left-section {
        width: 100%;
        max-width: 100%;
    }
    
    .three-images-right-section {
        width: 100%;
        max-width: 100%;
        align-items: flex-start;
        margin-left: 0;
    }
    
    .three-images-images-row {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    
    .three-images-image-1 {
        width: 100%;
        max-width: 450px;
    }
    
    .three-images-image-1 .three-images-image {
        height: 600px;
    }
    
    .three-images-illustration {
        width: 100%;
        max-width: 320px;
    }
    
    .three-images-text-block {
        width: 100%;
        max-width: 900px;
    }
    
    .three-images-image-2 {
        width: 100%;
        max-width: 380px;
        flex: 0 0 auto;
    }
    
    .three-images-image-2 .three-images-image {
        height: 420px;
    }
    
    .three-images-image-3 {
        width: 100%;
        max-width: 480px;
        flex: 0 0 auto;
    }
    
    .three-images-image-3 .three-images-image {
        height: 600px;
    }
    
    .three-images-title {
        font-size: 3rem;
        line-height: 3.5rem;
    }
}

@media (max-width: 1200px) {
    .three-images-container {
        padding: 0 50px;
        gap: 40px;
    }
    
    .three-images-image-1 {
        max-width: 400px;
    }
    
    .three-images-image-1 .three-images-image {
        height: 550px;
    }
    
    .three-images-illustration {
        max-width: 280px;
    }
    
    .three-images-text-block {
        max-width: 800px;
    }
    
    .three-images-image-2 {
        max-width: 340px;
    }
    
    .three-images-image-2 .three-images-image {
        height: 380px;
    }
    
    .three-images-image-3 {
        max-width: 420px;
    }
    
    .three-images-image-3 .three-images-image {
        height: 550px;
    }
}

@media (max-width: 1024px) {
    .three-images-illustration-element {
        padding: 80px 0;
    }
    
    .three-images-container {
        padding: 0 40px;
        gap: 40px;
    }
    
    .three-images-top-row {
        flex-wrap: wrap;
        gap: 30px;
    }
    
    .three-images-images-row {
        flex-wrap: wrap;
        gap: 30px;
    }
    
    .three-images-image-1 {
        max-width: 400px;
    }
    
    .three-images-image-1 .three-images-image {
        height: 550px;
    }
    
    .three-images-illustration {
        max-width: 280px;
    }
    
    .three-images-text-block {
        max-width: 800px;
    }
    
    .three-images-image-2 {
        max-width: 350px;
    }
    
    .three-images-image-2 .three-images-image {
        height: 380px;
    }
    
    .three-images-image-3 {
        max-width: 420px;
    }
    
    .three-images-image-3 .three-images-image {
        height: 550px;
    }
    
    .three-images-title {
        font-size: 2.8rem;
        line-height: 3.2rem;
    }
}

@media (max-width: 768px) {
    .three-images-illustration-element {
        padding: 60px 0;
    }
    
    .three-images-container {
        padding: 0 30px;
        gap: 40px;
    }
    
    .three-images-left-section {
        gap: 40px;
    }
    
    .three-images-top-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .three-images-images-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .three-images-image-1,
    .three-images-image-2,
    .three-images-image-3,
    .three-images-illustration {
        width: 100%;
        max-width: 100%;
    }
    
    .three-images-image-1 .three-images-image,
    .three-images-image-2 .three-images-image,
    .three-images-image-3 .three-images-image {
        height: auto;
        max-height: 500px;
    }
    
    .three-images-text-block {
        max-width: 100%;
    }
    
    .three-images-title {
        font-size: 2.2rem;
        line-height: 2.6rem;
        margin-bottom: 20px;
    }
    
    .three-images-text {
        font-size: 1rem;
    }
    
    .three-images-caption {
        font-size: 0.85em;
        margin-top: 10px;
    }
    
    .three-images-caption-above {
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .three-images-illustration-element {
        padding: 40px 0;
    }
    
    .three-images-container {
        padding: 0 20px;
        gap: 30px;
    }
    
    .three-images-left-section {
        gap: 30px;
    }
    
    .three-images-title {
        font-size: 1.8rem;
        line-height: 2.2rem;
        margin-bottom: 15px;
    }
    
    .three-images-text {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .three-images-image-1 .three-images-image,
    .three-images-image-2 .three-images-image,
    .three-images-image-3 .three-images-image {
        max-height: 400px;
    }
}

/* ===================================
   2 Bilder + Illustration Element
   =================================== */

.two-images-illustration-element {
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 100px 0;
}

.two-images-container {
    max-width: none;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 0 120px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.two-images-top-row {
    display: flex;
    flex-direction: row;
    gap: 100px;
    align-items: flex-end;
    width: 100%;
    margin-bottom: 50px;
}

.two-images-left-column {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 450px;
    max-width: 100%;
}

.two-images-right-section {
    display: flex;
    flex-direction: row;
    gap: 60px;
    align-items: flex-end;
    flex: 1;
    min-width: 0;
}

.two-images-image-2 {
    flex-shrink: 0;
    align-self: flex-end;
}

.two-images-right-content {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.two-images-bottom-text {
    width: 450px;
    max-width: 100%;
}

.two-images-title-text-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 500px;
}

.two-images-text {
    max-width: 100%;
    word-wrap: break-word;
}

.two-images-image-1-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-shrink: 0;
    width: 450px;
    max-width: 100%;
}

.two-images-item {
    flex-shrink: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.two-images-image-1 {
    width: 450px;
    max-width: 100%;
    flex-shrink: 0;
}

.two-images-image-1 .two-images-image {
    height: 850px;
    object-fit: cover;
}


.two-images-illustration {
    width: 350px;
    max-width: 100%;
    margin-top: 0;
}

.two-images-image-2 {
    width: 580px;
    max-width: 100%;
    flex-shrink: 0;
}

.two-images-image-2 .two-images-image {
    height: 950px;
    object-fit: cover;
}

.two-images-image,
.two-images-illustration-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-width: 100%;
}

.two-images-video-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.two-images-video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.two-images-caption {
    font-family: 'HALTimezone', serif;
    font-style: italic;
    font-size: 0.95em;
    color: #000000;
    margin-top: 15px;
    margin-bottom: 0;
    line-height: 1.5;
    max-width: 450px;
}

.two-images-title {
    color: #000;
    font-family: "HALTimezone", serif;
    font-size: 4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 4.5rem;
    margin: 0 0 30px 0;
}

.two-images-text {
    color: #000;
    font-family: "HALTimezone", serif;
    font-size: 1.15rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.8;
}

/* Layout für Illustration: Bottom-aligned mit Bild 1 */
.two-images-left-section {
    position: relative;
}

.two-images-illustration {
    margin-top: auto;
}

/* Responsive Anpassungen für 2 Bilder + Illustration */
@media (max-width: 1800px) {
    .two-images-container {
        padding: 0 100px;
    }
    
    .two-images-top-row {
        gap: 80px;
    }
    
    .two-images-image-1 {
        width: 420px;
    }
    
    .two-images-image-1 .two-images-image {
        height: 780px;
    }
    
    .two-images-image-1-wrapper {
        width: 420px;
    }
    
    .two-images-left-column {
        width: 420px;
    }
    
    .two-images-image-2 {
        width: 520px;
    }
    
    .two-images-image-2 .two-images-image {
        height: 850px;
    }
    
    .two-images-illustration {
        width: 330px;
    }
    
    .two-images-title-text-wrapper {
        max-width: 450px;
    }
    
    .two-images-right-content {
        gap: 35px;
    }
}

@media (max-width: 1600px) {
    .two-images-container {
        padding: 0 80px;
    }
    
    .two-images-top-row {
        gap: 70px;
    }
    
    .two-images-image-1 {
        width: 380px;
    }
    
    .two-images-image-1 .two-images-image {
        height: 700px;
    }
    
    .two-images-image-1-wrapper {
        width: 380px;
    }
    
    .two-images-left-column {
        width: 380px;
    }
    
    .two-images-image-2 {
        width: 480px;
    }
    
    .two-images-image-2 .two-images-image {
        height: 750px;
    }
    
    .two-images-illustration {
        width: 300px;
    }
    
    .two-images-title-text-wrapper {
        max-width: 420px;
    }
    
    .two-images-right-content {
        gap: 30px;
    }
}

@media (max-width: 1400px) {
    .two-images-container {
        padding: 0 60px;
    }
    
    .two-images-top-row {
        gap: 60px;
    }
    
    .two-images-title {
        font-size: 3.5rem;
        line-height: 4rem;
    }
    
    .two-images-image-1 {
        width: 380px;
    }
    
    .two-images-image-1 .two-images-image {
        height: 650px;
    }
    
    .two-images-image-1-wrapper {
        width: 380px;
    }
    
    .two-images-left-column {
        width: 380px;
    }
    
    .two-images-image-2 {
        width: 440px;
    }
    
    .two-images-image-2 .two-images-image {
        height: 680px;
    }
    
    .two-images-illustration {
        width: 300px;
    }
    
    .two-images-title-text-wrapper {
        max-width: 400px;
    }
    
    .two-images-right-content {
        gap: 30px;
    }
}

@media (min-width: 1351px) and (max-width: 2245px) {
    .two-images-title-text-wrapper {
        max-width: 380px;
    }
}

@media (max-width: 1350px) {
    .two-images-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 50px;
        padding: 0 60px;
        overflow-x: visible;
    }
    
    .two-images-top-row {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 50px;
        margin-bottom: 0;
    }
    
    .two-images-left-column {
        width: 100%;
        max-width: 450px;
    }
    
    .two-images-image-1,
    .two-images-image-1-wrapper {
        width: 100%;
        max-width: 450px;
    }
    
    .two-images-image-1 .two-images-image {
        height: 600px;
    }
    
    .two-images-right-section {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        gap: 40px;
        align-items: flex-start;
    }
    
    .two-images-image-2 {
        width: 100%;
        max-width: 580px;
        align-self: flex-start;
    }
    
    .two-images-image-2 .two-images-image {
        height: 600px;
    }
    
    .two-images-right-content {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        gap: 30px;
        align-items: flex-start;
    }
    
    .two-images-title-text-wrapper {
        width: 100%;
        max-width: 900px;
    }
    
    .two-images-illustration {
        width: 100%;
        max-width: 350px;
        align-self: flex-start;
    }
    
    .two-images-title {
        font-size: 3rem;
        line-height: 3.5rem;
    }
}

@media (max-width: 1200px) {
    .two-images-container {
        padding: 0 50px;
        gap: 40px;
    }
    
    .two-images-image-1,
    .two-images-image-1-wrapper {
        max-width: 400px;
    }
    
    .two-images-image-1 .two-images-image {
        height: 550px;
    }
    
    .two-images-left-column {
        max-width: 400px;
    }
    
    .two-images-image-2 {
        max-width: 500px;
    }
    
    .two-images-image-2 .two-images-image {
        height: 550px;
    }
    
    .two-images-illustration {
        max-width: 280px;
    }
    
    .two-images-title-text-wrapper {
        max-width: 800px;
    }
}

@media (max-width: 1024px) {
    .two-images-illustration-element {
        padding: 80px 0;
    }
    
    .two-images-container {
        padding: 0 40px;
        gap: 40px;
    }
    
    .two-images-top-row {
        gap: 40px;
    }
    
    .two-images-right-content {
        flex-wrap: wrap;
        gap: 30px;
    }
    
    .two-images-image-1,
    .two-images-image-1-wrapper {
        max-width: 400px;
    }
    
    .two-images-image-1 .two-images-image {
        height: 550px;
    }
    
    .two-images-left-column {
        max-width: 400px;
    }
    
    .two-images-image-2 {
        max-width: 450px;
    }
    
    .two-images-image-2 .two-images-image {
        height: 550px;
    }
    
    .two-images-illustration {
        max-width: 280px;
    }
    
    .two-images-title-text-wrapper {
        max-width: 800px;
    }
    
    .two-images-title {
        font-size: 2.8rem;
        line-height: 3.2rem;
    }
}

@media (max-width: 768px) {
    .two-images-illustration-element {
        padding: 60px 0;
    }
    
    .two-images-container {
        padding: 0 30px;
        gap: 40px;
    }
    
    .two-images-top-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    
    .two-images-left-column {
        width: 100%;
        max-width: 100%;
    }
    
    .two-images-image-1,
    .two-images-image-1-wrapper {
        width: 100%;
        max-width: 100%;
    }
    
    .two-images-image-1 .two-images-image {
        height: auto;
        max-height: 500px;
    }
    
    .two-images-right-section {
        width: 100%;
        flex-direction: column;
        gap: 30px;
    }
    
    .two-images-image-2 {
        width: 100%;
        max-width: 100%;
        align-self: flex-start;
    }
    
    .two-images-image-2 .two-images-image {
        height: auto;
        max-height: 500px;
    }
    
    .two-images-right-content {
        width: 100%;
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
    
    .two-images-title-text-wrapper {
        width: 100%;
        max-width: 100%;
    }
    
    .two-images-illustration {
        width: 100%;
        max-width: 100%;
        align-self: flex-start;
    }
    
    .two-images-title {
        font-size: 2.2rem;
        line-height: 2.6rem;
        margin-bottom: 20px;
    }
    
    .two-images-text {
        font-size: 1rem;
    }
    
    .two-images-caption {
        font-size: 0.85em;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .two-images-illustration-element {
        padding: 40px 0;
    }
    
    .two-images-container {
        padding: 0 20px;
        gap: 30px;
    }
    
    .two-images-top-row {
        gap: 30px;
    }
    
    .two-images-title {
        font-size: 1.8rem;
        line-height: 2.2rem;
        margin-bottom: 15px;
    }
    
    .two-images-text {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .two-images-image-1 .two-images-image,
    .two-images-image-2 .two-images-image {
        max-height: 400px;
    }
}

/* ===================================
   Text, Bild, Buttons Element
   =================================== */

.text-bild-buttons-element {
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 100px 0;
}

.text-bild-buttons-container {
    display: flex;
    flex-direction: row;
    gap: 80px;
    align-items: stretch;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 120px;
    box-sizing: border-box;
    overflow-x: hidden;
    min-height: 600px;
}

.text-bild-buttons-left {
    flex: 0 0 auto;
    width: 55%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.text-bild-buttons-image-wrapper {
    width: 100%;
    max-width: 100%;
}

.text-bild-buttons-image,
.text-bild-buttons-video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.text-bild-buttons-video-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.text-bild-buttons-text {
    color: #000;
    font-family: "HALTimezone", serif;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 3.2rem;
    margin: 0;
    max-width: 100%;
    word-wrap: break-word;
}

.text-bild-buttons-button-1-wrapper {
    margin-top: auto;
    align-self: flex-start;
}

.text-bild-buttons-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
}

.text-bild-buttons-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    width: 100%;
}

.text-bild-buttons-title {
    color: #000;
    font-family: "HALTimezone", serif;
    font-size: 4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 4.5rem;
    margin: 0;
    text-align: right;
}

.text-bild-buttons-button-2-wrapper {
    align-self: flex-end;
    margin-top: auto;
}

.text-bild-buttons-button {
    display: inline-block;
    padding: 10px 25px;
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 0.95em;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid #000000;
    border-radius: 4.15rem;
    transition: all 0.3s ease;
    text-align: center;
    white-space: nowrap;
}

.text-bild-buttons-button-filled {
    background: #000000;
    color: #ffffff;
}

.text-bild-buttons-button-filled:hover {
    background: #ffffff;
    color: #000000;
}

.text-bild-buttons-button-outlined {
    background: transparent;
    color: #000000;
}

.text-bild-buttons-button-outlined:hover {
    background: #000000;
    color: #ffffff;
}

/* Responsive Anpassungen */
@media (max-width: 1400px) {
    .text-bild-buttons-container {
        padding: 0 80px;
        gap: 60px;
    }
    
    .text-bild-buttons-title {
        font-size: 3.5rem;
        line-height: 4rem;
    }
    
    .text-bild-buttons-text {
        font-size: 2.2rem;
        line-height: 2.8rem;
    }
}

@media (max-width: 1024px) {
    .text-bild-buttons-element {
        padding: 80px 0;
    }
    
    .text-bild-buttons-container {
        flex-direction: column;
        gap: 50px;
        padding: 0 60px;
        min-height: auto;
    }
    
    .text-bild-buttons-left {
        width: 100%;
        display: contents;
    }
    
    .text-bild-buttons-right {
        width: 100%;
        align-items: flex-start;
        display: contents;
    }
    
    .text-bild-buttons-image-wrapper {
        order: 1;
    }
    
    .text-bild-buttons-title-wrapper {
        order: 2;
        justify-content: flex-start;
        margin-bottom: 40px;
        width: 100%;
    }
    
    .text-bild-buttons-text {
        order: 3;
        font-size: 2rem;
        line-height: 2.6rem;
    }
    
    .text-bild-buttons-title {
        font-size: 3rem;
        line-height: 3.5rem;
        text-align: left;
    }
    
    .text-bild-buttons-button-1-wrapper {
        order: 4;
        align-self: flex-start;
        width: 100%;
    }
    
    .text-bild-buttons-button-2-wrapper {
        order: 5;
        align-self: flex-start;
        width: 100%;
    }
    
    .text-bild-buttons-button {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .text-bild-buttons-element {
        padding: 60px 0;
    }
    
    .text-bild-buttons-container {
        padding: 0 40px;
        gap: 40px;
        min-height: auto;
    }
    
    .text-bild-buttons-left {
        display: contents;
    }
    
    .text-bild-buttons-right {
        display: contents;
    }
    
    .text-bild-buttons-image-wrapper {
        order: 1;
    }
    
    .text-bild-buttons-title-wrapper {
        order: 2;
        margin-bottom: 30px;
        width: 100%;
    }
    
    .text-bild-buttons-text {
        order: 3;
        font-size: 1.8rem;
        line-height: 2.4rem;
    }
    
    .text-bild-buttons-title {
        font-size: 2.5rem;
        line-height: 3rem;
    }
    
    .text-bild-buttons-button-1-wrapper {
        order: 4;
        width: 100%;
    }
    
    .text-bild-buttons-button-2-wrapper {
        order: 5;
        width: 100%;
    }
    
    .text-bild-buttons-button {
        font-family: 'HALTimezone', serif;
        font-weight: bold;
        font-style: italic;
        font-size: 0.95em;
        padding: 10px 25px;
    }
}

@media (max-width: 480px) {
    .text-bild-buttons-element {
        padding: 40px 0;
    }
    
    .text-bild-buttons-container {
        padding: 0 30px;
        gap: 30px;
        min-height: auto;
    }
    
    .text-bild-buttons-left {
        display: contents;
    }
    
    .text-bild-buttons-right {
        display: contents;
    }
    
    .text-bild-buttons-image-wrapper {
        order: 1;
    }
    
    .text-bild-buttons-title-wrapper {
        order: 2;
        margin-bottom: 25px;
        width: 100%;
    }
    
    .text-bild-buttons-text {
        order: 3;
        font-size: 1.6rem;
        line-height: 2.2rem;
    }
    
    .text-bild-buttons-title {
        font-size: 2rem;
        line-height: 2.5rem;
    }
    
    .text-bild-buttons-button-1-wrapper {
        order: 4;
        width: 100%;
    }
    
    .text-bild-buttons-button-2-wrapper {
        order: 5;
        width: 100%;
    }
    
    .text-bild-buttons-button {
        font-family: 'HALTimezone', serif;
        font-weight: bold;
        font-style: italic;
        font-size: 0.95em;
        padding: 10px 25px;
    }
}

/* ===================================
   Zimmer-Liste
   =================================== */

.zimmer-liste-element {
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 100px 0;
}

.zimmer-liste-wrapper {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.zimmer-liste-title-wrapper {
    margin-bottom: 50px;
}

.zimmer-liste-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 3.5em;
    font-weight: 500;
    margin-bottom: 20px;
    color: #000000;
    letter-spacing: -0.02em;
}

/* Wrapper für Zimmer-Liste-Anzeigen Element */
.zimmer-liste-anzeigen-element {
    width: 100%;
    margin: 0;
    padding: 0;
}

.zimmer-liste-anzeigen-wrapper {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Überschreibe site-main max-width für Zimmer-Liste */
.site-main:has(.zimmer-liste-anzeigen-element) {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Alternative für Browser ohne :has() Support */
.zimmer-liste-anzeigen-element {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.zimmer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    grid-auto-rows: auto;
    align-items: start;
    width: 100%;
    margin: 0;
    padding: 0 120px;
    box-sizing: border-box;
}

/* Kategorie-Sektionen */
.zimmer-categories-container {
    width: 100%;
}

.zimmer-category-section {
    margin-bottom: 80px;
}

.zimmer-category-section:last-child {
    margin-bottom: 0;
}

/* Kategorie-Header */
.zimmer-category-header {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    padding: 0 120px;
    position: relative;
}

.zimmer-category-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 3.5em;
    font-weight: 500;
    margin: 0;
    color: #000000;
    letter-spacing: -0.02em;
    white-space: nowrap;
    margin-right: 30px;
    flex-shrink: 0;
}

.zimmer-category-header-line {
    flex: 1;
    height: 1px;
    background-color: #000000;
    position: relative;
    margin-right: calc(-120px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.zimmer-category-nav-arrow {
    display: inline-block;
    color: #000000;
    text-decoration: none;
    font-size: 2.5em;
    line-height: 1;
    margin-left: 10px;
    opacity: 1;
    transition: transform 0.3s ease;
    position: relative;
    padding-right: 120px;
    top: 25px;
}

.zimmer-category-nav-arrow::after {
    content: "→";
}

.zimmer-category-nav-arrow:hover {
    transform: translateX(5px);
}

/* Grid für Kategorien (Liste mit Filter) */
.zimmer-category-grid-wrapper {
    padding: 0 80px 0 120px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.zimmer-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 150px;
    width: 100%;
}

/* Slider für Kategorien */
.zimmer-category-slider-wrapper {
    padding: 0 80px 0 120px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

/* Auf großen Bildschirmen: overflow bleibt hidden, damit keine vierte Karte sichtbar ist */

.zimmer-category-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.zimmer-category-slider-track {
    --zimmer-gap: 150px;
    display: flex;
    gap: var(--zimmer-gap);
    width: max-content;
    align-items: flex-start;
    touch-action: pan-x pan-y; /* Erlaube horizontales und vertikales Swipen */
    transform: translate3d(0, 0, 0);
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: 0.7s;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-sizing: content-box;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: pan-y pinch-zoom; /* Erlaubt vertikales Scrollen, blockiert horizontales Panning */
}

.zimmer-category-slider-track:active {
    cursor: grabbing;
}

.zimmer-category-slide {
    flex: 0 0 calc((100vw - 200px - (2 * 150px)) / 3);
    min-width: 0;
    width: auto;
    flex-direction: column;
    display: flex;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    box-sizing: border-box;
}


.zimmer-category-slide.active {
    display: flex;
}


.zimmer-category-slider-track.no-transition {
    transition: none;
}

.zimmer-category-slider-track:active {
    cursor: grabbing;
}

.zimmer-category-slider-arrow {
    display: block !important;
    color: #000000;
    text-decoration: none;
    font-size: 2.5em;
    line-height: 1;
    opacity: 1;
    transition: transform 0.3s ease;
    position: absolute;
    top: 25px;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    z-index: 10;
    visibility: visible;
}

.zimmer-category-slider-arrow:hover {
    transform: translateX(5px);
}

.zimmer-category-slider-arrow-prev {
    /* Position wird per JavaScript dynamisch gesetzt */
    left: auto;
}

.zimmer-category-slider-arrow-prev:hover {
    transform: translateX(-5px);
}

/* Slider-Animation */
/* (Animation läuft über den Track via transform) */

/* Zimmer-Slider Styles */
.zimmer-slider-wrapper {
    position: relative;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 80px;
}

.zimmer-slider {
    position: relative;
    width: 100%;
}

.zimmer-slider-track {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    gap: 50px;
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.zimmer-slider-slide {
    flex: 0 0 calc(50% - 25px);
    min-width: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: none;
}

.zimmer-slider-slide.active {
    display: block;
    opacity: 1;
}

/* Cards im Slider sollen die gleiche Größe haben wie in der Liste */
.zimmer-slider-slide .zimmer-card {
    height: 100%;
    max-width: 100%;
}

/* Navigation-Pfeile */
.zimmer-slider-prev,
.zimmer-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    border: 2px solid #000000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    padding: 0;
    color: #000000;
}

.zimmer-slider-prev:hover,
.zimmer-slider-next:hover {
    background: #000000;
    color: #ffffff;
}

.zimmer-slider-prev:disabled,
.zimmer-slider-next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.zimmer-slider-prev {
    left: -70px;
}

.zimmer-slider-next {
    right: -70px;
}

/* Indikatoren (Dots) */
.zimmer-slider-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    padding: 0;
}

.zimmer-slider-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #000000;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.zimmer-slider-indicator:hover {
    background: #000000;
    opacity: 0.7;
}

.zimmer-slider-indicator.active {
    background: #000000;
}

/* Responsive für Slider */
@media (max-width: 768px) {
    .zimmer-slider-wrapper {
        padding: 0 60px;
        position: relative;
    }
    
    .zimmer-slider {
        position: relative;
    }
    
    .zimmer-slider-prev {
        left: -50px;
    }
    
    .zimmer-slider-next {
        right: -50px;
    }
    
    .zimmer-slider-prev,
    .zimmer-slider-next {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    .zimmer-slider-prev svg,
    .zimmer-slider-next svg {
        width: 20px;
        height: 20px;
    }
    
    /* Auf mobilen Geräten nur 1 Card anzeigen */
    .zimmer-slider-slide {
        flex: 0 0 100%;
    }
}

.zimmer-card {
    background: #ffffff;
    border: none;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    break-inside: avoid;
    transform: none;
    margin: 0;
    width: 100%;
    min-width: 0;
    /* Grid-Position wird per JavaScript gesetzt - keine Standard-Position */
}

/* Versetzte Anordnung der sichtbaren Cards (Positionen im Viewport via JS: pos-0/1/2/3) */
.zimmer-category-slide .zimmer-card {
    margin-top: 0;
    transition-property: margin-top;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: 0.7s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.zimmer-category-slide.pos-0 .zimmer-card,
.zimmer-category-slide.pos-2 .zimmer-card {
    margin-top: 0;
}

.zimmer-category-slide.pos-1 .zimmer-card {
    margin-top: 100px;
}


/* Alle Cards gerade und einheitlich - keine Rotationen oder unterschiedliche Margins */


.zimmer-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #f5f5f5;
    flex-shrink: 0;
    min-height: 0;
}

.zimmer-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: auto; /* Erlaube Pointer Events für Swipe */
}

/* Betriebs-Badge oben rechts im Bild */
.zimmer-betrieb-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #000000;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 4.15rem;
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 0.75em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    z-index: 10;
    display: none; /* Standardmäßig versteckt, wird per JavaScript gesteuert */
    white-space: nowrap;
}

.zimmer-betrieb-badge.show {
    display: block;
}

.zimmer-category-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 16px;
    background: #000000;
    color: #ffffff;
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 0.75em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 4.15rem;
}

.zimmer-content {
    padding: 20px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Einheitliches Padding für alle Cards */
.zimmer-card-large .zimmer-content,
.zimmer-card-tall .zimmer-content {
    padding: 30px;
}

.zimmer-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 3em;
    font-weight: 500;
    margin: 0 0 10px 0;
    color: #000000;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    min-width: 0;
}

.zimmer-title-link {
    text-decoration: none;
}

.zimmer-title-link:hover {
    text-decoration: none;
}

.zimmer-betrieb-text {
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 0.75em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #000000;
}

.zimmer-subtitle {
    font-family: 'HALTimezone', serif;
    font-size: 1.1em;
    color: #666666;
    margin: 0;
    line-height: 1.5;
}

.zimmer-personen,
.zimmer-groesse {
    font-family: 'HALTimezone', serif;
    font-size: 1em;
    color: #000000;
    margin: 5px 0;
    line-height: 1.5;
}

.zimmer-details {
    font-family: 'HALTimezone', serif;
    font-size: 1em;
    color: #000000;
    margin: 5px 0;
    line-height: 1.5;
}

.zimmer-details-separator {
    margin: 0 5px;
}

.zimmer-price {
    font-family: 'HALTimezone', serif;
    font-size: 1em;
    color: #000000;
    margin: 5px 0;
    line-height: 1.5;
}

.zimmer-price-label {
    font-family: 'HALTimezone', serif;
    font-size: 0.9em;
    color: #666666;
    text-transform: lowercase;
}

.zimmer-price-value {
    font-family: 'HALTimezone', serif;
    font-size: 1em;
    color: #000000;
}

.zimmer-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    padding-top: 0;
    flex-wrap: wrap;
}

.zimmer-details-link {
    font-family: 'HALTimezone', serif;
    font-size: 0.95em;
    font-weight: 500;
    text-decoration: none;
    color: #000000;
    transition: opacity 0.3s ease;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
    cursor: pointer;
}

.zimmer-details-link:hover {
    opacity: 0.7;
}

.zimmer-button {
    display: inline-block;
    padding: 12px 30px;
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 0.95em;
    text-decoration: none;
    border-radius: 4.15rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid #000000;
    text-align: center;
    flex: 1;
    min-width: 120px;
    box-sizing: border-box;
}

/* Button-Elemente auch stylen */
button.zimmer-button {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
}

.zimmer-button-primary {
    background: #000000;
    color: #ffffff;
}

.zimmer-button-primary:hover {
    background: #ffffff;
    color: #000000;
}

.zimmer-button-secondary {
    background: transparent;
    color: #000000;
}

.zimmer-button-secondary:hover {
    background: #000000;
    color: #ffffff;
}

/* Filter-Buttons für Zimmer-Liste */
.zimmer-filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 60px;
    justify-content: center;
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
}

.zimmer-filter-button {
    display: inline-block;
    padding: 12px 30px;
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 0.95em;
    text-decoration: none;
    border-radius: 4.15rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid #000000;
    text-align: center;
    background: transparent;
    color: #000000;
}

/* Filter-Button als Link */
a.zimmer-filter-button {
    text-decoration: none;
}

.zimmer-filter-button:hover {
    background: #000000;
    color: #ffffff;
}

.zimmer-filter-button.zimmer-filter-active {
    background: #000000;
    color: #ffffff;
}

.zimmer-filter-button.zimmer-filter-active:hover {
    background: #ffffff;
    color: #000000;
}

/* Vergleichsfunktion - Button auf Karte */
.zimmer-vergleich-button {
    order: -1; /* Erster Button */
}

.zimmer-vergleich-button.active {
    background: #000000;
    color: #ffffff;
}

.zimmer-card.zimmer-in-vergleich {
    border: 2px solid #000000;
}

/* Vergleichs-Banner (Sticky Bottom) */
.zimmer-vergleichs-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 2px solid #000000;
    padding: 20px;
    z-index: 9998;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
}

.vergleich-banner-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.vergleich-banner-items {
    display: flex;
    gap: 15px;
    flex: 1;
    overflow-x: auto;
}

.vergleich-banner-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f5f5f5;
    padding: 8px 12px;
    border-radius: 4.15rem;
    flex-shrink: 0;
    position: relative;
}

.vergleich-banner-image {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
}

.vergleich-banner-title {
    font-family: 'HALTimezone', serif;
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
}

.vergleich-banner-remove {
    background: transparent;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    transition: color 0.3s ease;
}

.vergleich-banner-remove:hover {
    color: #ff0000;
}

.vergleich-banner-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.vergleich-banner-button {
    padding: 12px 30px;
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 0.95em;
    border-radius: 4.15rem;
    border: 2px solid #000000;
    background: #000000;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.vergleich-banner-button:hover {
    background: #ffffff;
    color: #000000;
}

.vergleich-clear-all {
    background: transparent;
    border: none;
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 0.85em;
    color: #666666;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.vergleich-clear-all:hover {
    color: #000000;
}

/* Vergleichs-Modal */
.zimmer-vergleichs-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.zimmer-vergleichs-modal.active {
    opacity: 1;
    visibility: visible;
}

.vergleich-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
}

.vergleich-modal-content {
    position: relative;
    background: #ffffff;
    max-width: 1400px;
    margin: 40px auto;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    border: 2px solid #000000;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.zimmer-vergleichs-modal.active .vergleich-modal-content {
    transform: translateY(0);
}

.vergleich-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    border-bottom: 2px solid #000000;
}

.vergleich-modal-header h2 {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 2em;
    margin: 0;
    color: #000000;
}

.vergleich-modal-close {
    background: transparent;
    border: none;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    transition: color 0.3s ease;
}

.vergleich-modal-close:hover {
    color: #ff0000;
}

.vergleich-modal-body {
    padding: 30px;
    overflow-y: auto;
    flex: 1;
}

.vergleich-table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.vergleich-table-header,
.vergleich-table-row {
    display: grid;
    grid-template-columns: 200px repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
}

.vergleich-table-header {
    border-bottom: 2px solid #000000;
    font-weight: bold;
}

.vergleich-table-cell {
    padding: 10px;
    font-family: 'PPNeueMontreal', sans-serif;
}

.vergleich-table-label {
    font-weight: 500;
    color: #000000;
}

.vergleich-table-zimmer-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.vergleich-table-zimmer-header h3 {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 1.5em;
    margin: 10px 0 0 0;
    color: #000000;
}

.vergleich-modal-remove {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    transition: color 0.3s ease;
}

.vergleich-modal-remove:hover {
    color: #ff0000;
}

.vergleich-images-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vergleich-table-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

/* Zusätzliche Bilder (nicht das erste) */
.vergleich-table-image-additional {
    width: calc(50% - 5px);
    height: 120px;
}

.vergleich-table-ausstattung {
    font-size: 0.9em;
    line-height: 1.6;
    text-align: left;
}

/* Listen-Stil - Überschreibe Detail-Ansicht Styles mit höherer Spezifität */
.zimmer-vergleichs-modal .vergleich-table-ausstattung ul,
.zimmer-vergleichs-modal .vergleich-table-ausstattung ul ul {
    margin: 10px 0 !important;
    padding-left: 25px !important;
    list-style: disc outside !important;
    list-style-type: disc !important;
    list-style-position: outside !important;
    display: block !important;
}

.zimmer-vergleichs-modal .vergleich-table-ausstattung ol,
.zimmer-vergleichs-modal .vergleich-table-ausstattung ol ol {
    margin: 10px 0 !important;
    padding-left: 25px !important;
    list-style: decimal outside !important;
    list-style-type: decimal !important;
    list-style-position: outside !important;
    display: block !important;
}

.zimmer-vergleichs-modal .vergleich-table-ausstattung li,
.zimmer-vergleichs-modal .vergleich-table-ausstattung ul li,
.zimmer-vergleichs-modal .vergleich-table-ausstattung ol li {
    margin: 5px 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: list-item !important;
    list-style-type: inherit !important;
    list-style: inherit !important;
    list-style-position: outside !important;
    position: static !important;
}

/* Entferne Pfeile aus Detail-Ansicht wenn in Vergleich - mit höherer Spezifität */
.zimmer-vergleichs-modal .vergleich-table-ausstattung li:before,
.zimmer-vergleichs-modal .vergleich-table-ausstattung ul li:before,
.zimmer-vergleichs-modal .vergleich-table-ausstattung ol li:before,
.zimmer-vergleichs-modal .vergleich-table-ausstattung p:before {
    display: none !important;
    content: none !important;
}

.zimmer-vergleichs-modal .vergleich-table-ausstattung p {
    margin: 5px 0;
    padding-left: 0 !important;
}

/* Falls Ausstattung als Text ohne Liste kommt */
.vergleich-table-ausstattung > *:first-child {
    margin-top: 0;
}

.vergleich-table-ausstattung > *:last-child {
    margin-bottom: 0;
}

.vergleich-table-price {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 1.3em;
    color: #000000;
}

.vergleich-table-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vergleich-table-actions .zimmer-button {
    width: 100%;
    text-align: center;
}

/* Responsive Design für Zimmer-Liste */
@media (max-width: 1024px) {
    .zimmer-liste-element {
        padding: 80px 0;
    }
    
    .zimmer-liste-wrapper {
        padding: 0;
    }
    
    .zimmer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        padding: 0 60px;
    }
    
    .zimmer-category-header {
        padding: 0 60px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }
    
    .zimmer-category-header-line {
        margin-right: calc(-60px);
    }
    
    .zimmer-category-nav-arrow {
        padding-right: 60px;
    }
    
    .zimmer-category-title {
        font-size: 2.8em;
        margin-right: 0;
        margin-bottom: 0;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .zimmer-category-slider-wrapper {
        padding: 0 60px;
    }
    
    .zimmer-category-grid-wrapper {
        padding: 0 60px;
    }
    
    .zimmer-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    .zimmer-category-slider-track {
        --zimmer-gap: 40px;
    }
    
    .zimmer-category-slide {
        flex: 0 0 calc((100vw - 120px - (2 * var(--zimmer-gap))) / 2);
    }
    
    .zimmer-title {
        font-size: 3em;
    }
    
    /* Pfeile auf Tablet auf einer Höhe mit dem Titel */
    .zimmer-category-slider-arrow {
        position: static !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-left: 12px;
        font-size: 2em;
        vertical-align: middle;
    }
    
    .zimmer-category-slider-arrow-prev,
    .zimmer-category-slider-arrow-next {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 0.5 !important; /* Leicht transparent wenn nicht aktiv */
    }
    
    .zimmer-category-slider-arrow-prev[style*="display: none"],
    .zimmer-category-slider-arrow-next[style*="display: none"] {
        opacity: 0.3 !important; /* Noch transparenter wenn am Anfang/Ende */
        pointer-events: auto !important; /* Aber trotzdem klickbar */
    }
    
    .zimmer-card {
        grid-column: span 1;
    }
    
    .zimmer-image-wrapper {
        aspect-ratio: 3 / 4;
    }
    
    .zimmer-liste-title {
        font-size: 2.8em;
    }
}

@media (max-width: 768px) {
    .zimmer-liste-element {
        padding: 60px 0;
    }
    
    .zimmer-liste-wrapper {
        padding: 0;
    }
    
    .zimmer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 40px;
    }
    
    .zimmer-category-section {
        margin-bottom: 60px;
    }
    
    .zimmer-category-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 40px;
        margin-bottom: 30px;
        position: relative;
    }
    
    .zimmer-category-title {
        font-size: 2.2em;
        margin-right: 0;
        margin-bottom: 0;
        flex: 1;
    }
    
    .zimmer-category-header-line {
        display: none; /* Verstecke die Linie auf mobilen Geräten */
    }
    
    .zimmer-category-nav-arrow {
        display: none; /* Verstecke den ursprünglichen Pfeil */
    }
    
    /* Grid-Layout auf Mobile */
    .zimmer-category-grid-wrapper {
        padding: 0 20px;
    }
    
    .zimmer-category-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* Pfeile auf mobilen Geräten unterhalb des Sliders positionieren */
    .zimmer-category-slider-wrapper {
        padding: 0 20px;
        position: relative !important;
        padding-bottom: 20px !important; /* Platz für Pfeile */
        overflow: visible !important; /* Wichtig: overflow visible für Pfeile */
    }
    
    .zimmer-category-slider {
        position: relative;
        margin-bottom: 20px !important; /* Abstand zwischen Slider und Pfeilen */
        touch-action: pan-x pan-y; /* Erlaube Touch-Gesten */
        overflow: hidden; /* Slider selbst behält overflow: hidden */
    }
    
    .zimmer-category-slider-track {
        --zimmer-gap: 20px;
        touch-action: pan-x pan-y; /* Erlaube horizontales und vertikales Swipen */
        transition-duration: 0.3s !important; /* Schnellere Transition auf Mobile für flüssigeres Swipen */
        transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }
    
    .zimmer-category-slide {
        flex: 0 0 calc(100vw - 40px - (2 * 20px));
    }
    
    /* Pfeile aus dem Header entfernen */
    .zimmer-category-header .zimmer-category-slider-arrow {
        display: none !important;
    }
    
    /* Pfeile unterhalb des Sliders - im normalen Flow, zentriert */
    .zimmer-category-slider-wrapper > .zimmer-category-slider-arrow {
        position: static !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 !important; /* Kein Margin oben, da sie nach dem Slider kommen */
        font-size: 3em !important;
        z-index: 1 !important; /* Niedriger z-index, damit sie nicht über Karten schweben */
        cursor: pointer;
        background: transparent;
        border: none;
        padding: 10px;
        width: auto !important;
        height: auto !important;
        line-height: 1 !important;
        vertical-align: middle;
    }
    
    /* Abstand zwischen den Pfeilen */
    .zimmer-category-slider-wrapper > .zimmer-category-slider-arrow-prev {
        margin-right: 60px !important;
    }
    
    .zimmer-category-slider-wrapper > .zimmer-category-slider-arrow-next {
        margin-left: 0 !important;
    }
    
    /* Zentriere die Pfeile mit text-align */
    .zimmer-category-slider-wrapper {
        text-align: center !important;
    }
    
    /* Opacity für Pfeile */
    .zimmer-category-slider-wrapper > .zimmer-category-slider-arrow-prev,
    .zimmer-category-slider-wrapper > .zimmer-category-slider-arrow-next {
        opacity: 0.5 !important;
        transition: opacity 0.3s ease !important;
    }
    
    .zimmer-category-slider-wrapper > .zimmer-category-slider-arrow-prev:hover,
    .zimmer-category-slider-wrapper > .zimmer-category-slider-arrow-next:hover {
        opacity: 1 !important;
    }
    
    /* Verstecke Pfeile wenn nur eine Karte vorhanden (wird per JS gesteuert) */
    .zimmer-category-slider-wrapper > .zimmer-category-slider-arrow[style*="display: none"] {
        display: none !important;
    }
    
    /* (Mobile Pfeil-Sichtbarkeit wird via JS gesteuert: bei 1 Zimmer keine Pfeile) */
    
    .zimmer-title {
        font-size: 2.5em;
    }
    
    .zimmer-card {
        transform: none !important;
        margin: 0 !important;
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
    
    .zimmer-card-large,
    .zimmer-card-extra-large,
    .zimmer-card-tall,
    .zimmer-card-large-tall {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
    
    .zimmer-liste-title {
        font-size: 2.2em;
    }
    
    .zimmer-image-wrapper {
        aspect-ratio: 3 / 4;
    }
    
    .zimmer-content {
        padding: 25px;
        padding-bottom: 30px !important; /* Extra Abstand unten für Pfeile */
    }
    
    .zimmer-title {
        font-size: 1.7em;
    }
    
    .zimmer-actions {
        flex-direction: column;
        margin-bottom: 0 !important; /* Kein zusätzlicher Margin unten */
    }
    
    .zimmer-button {
        width: 100%;
    }
    
    .zimmer-filter-wrapper {
        gap: 10px;
    }
    
    .zimmer-filter-button {
        padding: 10px 20px;
        font-size: 0.85em;
    }
    
    /* Vergleichsfunktion - Mobile */
    .vergleich-banner-content {
        flex-direction: column;
        gap: 15px;
        padding: 0 10px;
    }
    
    .vergleich-banner-items {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
    }
    
    .vergleich-banner-items::-webkit-scrollbar {
        height: 4px;
    }
    
    .vergleich-banner-items::-webkit-scrollbar-thumb {
        background: #000000;
        border-radius: 2px;
    }
    
    .vergleich-banner-item {
        min-width: 150px;
    }
    
    .vergleich-banner-actions {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }
    
    .vergleich-banner-button,
    .vergleich-clear-all {
        width: 100%;
        text-align: center;
    }
    
    .vergleich-modal-content {
        margin: 0;
        max-height: 100vh;
        border: none;
        border-radius: 0;
    }
    
    .vergleich-modal-header {
        padding: 15px;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 10;
        border-bottom: 2px solid #000000;
    }
    
    .vergleich-modal-header h2 {
        font-size: 1.3em;
    }
    
    .vergleich-modal-body {
        padding: 15px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .vergleich-table {
        min-width: 600px; /* Minimale Breite für Scrollbarkeit */
    }
    
    .vergleich-table-header,
    .vergleich-table-row {
        grid-template-columns: 100px repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
        font-size: 0.85em;
        padding: 10px 0;
    }
    
    .vergleich-table-label {
        font-size: 0.8em;
        padding: 8px 5px;
    }
    
    .vergleich-table-cell {
        padding: 8px 5px;
        font-size: 0.85em;
    }
    
    .vergleich-table-zimmer-header {
        padding: 8px 5px;
    }
    
    .vergleich-table-zimmer-header h3 {
        font-size: 1em;
        margin: 5px 0 0 0;
    }
    
    .vergleich-table-image {
        height: 120px;
    }
    
    .vergleich-table-image-additional {
        height: 80px;
    }
    
    .vergleich-table-ausstattung {
        font-size: 0.8em;
    }
    
    .vergleich-table-ausstattung ul,
    .vergleich-table-ausstattung ol {
        padding-left: 15px;
    }
}

@media (max-width: 480px) {
    .zimmer-liste-wrapper {
        padding: 0 20px;
    }
    
    .zimmer-liste-title {
        font-size: 1.8em;
    }
    
    .zimmer-image-wrapper {
        aspect-ratio: 3 / 4;
    }
    
    /* Vergleichsfunktion - Sehr kleine Bildschirme */
    .vergleich-banner {
        padding: 15px 10px;
    }
    
    .vergleich-banner-content {
        gap: 10px;
    }
    
    .vergleich-banner-item {
        min-width: 120px;
        padding: 6px 10px;
    }
    
    .vergleich-banner-image {
        width: 30px;
        height: 30px;
    }
    
    .vergleich-banner-title {
        font-size: 0.8em;
    }
    
    .vergleich-banner-button {
        padding: 10px 20px;
        font-size: 0.85em;
    }
    
    .vergleich-modal-header {
        padding: 12px;
    }
    
    .vergleich-modal-header h2 {
        font-size: 1.1em;
    }
    
    .vergleich-modal-body {
        padding: 12px;
    }
    
    .vergleich-table {
        min-width: 500px;
    }
    
    .vergleich-table-header,
    .vergleich-table-row {
        grid-template-columns: 80px repeat(auto-fit, minmax(120px, 1fr));
        gap: 5px;
        font-size: 0.75em;
    }
    
    .vergleich-table-label {
        font-size: 0.7em;
        padding: 5px 3px;
    }
    
    .vergleich-table-cell {
        padding: 5px 3px;
        font-size: 0.75em;
    }
    
    .vergleich-table-zimmer-header h3 {
        font-size: 0.9em;
    }
    
    .vergleich-table-image {
        height: 100px;
    }
    
    .vergleich-table-image-additional {
        height: 60px;
    }
    
    .vergleich-table-ausstattung {
        font-size: 0.7em;
    }
    
    .vergleich-table-ausstattung ul,
    .vergleich-table-ausstattung ol {
        padding-left: 12px;
        margin: 8px 0;
    }
    
    .vergleich-table-actions {
        flex-direction: column;
        gap: 5px;
    }
    
    .vergleich-table-actions .zimmer-button {
        padding: 8px 15px;
        font-size: 0.8em;
    }
    
    .zimmer-content {
        padding: 20px;
    }
    
    .zimmer-title {
        font-size: 1.5em;
    }
    
    .zimmer-price-value {
        font-size: 1.5em;
    }
}

/* ===================================
   ZIMMER DETAIL
   =================================== */
.zimmer-detail-element {
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 100px 0;
}

.zimmer-detail-container {
    max-width: none;
    width: 100%;
    margin: 0 auto;
    padding: 0 120px;
    box-sizing: border-box;
}

.zimmer-detail-header {
    margin-bottom: 60px;
    text-align: center;
}

.zimmer-detail-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 4.5em;
    font-weight: 500;
    margin-bottom: 20px;
    color: #000000;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.zimmer-detail-subtitle {
    font-family: 'HALTimezone', serif;
    font-size: 1.5em;
    color: #666666;
    margin: 0;
    font-style: italic;
}

.zimmer-detail-content {
    display: flex;
    gap: 80px;
    align-items: flex-start;
    margin-bottom: 60px;
}

.zimmer-detail-images {
    flex: 0 0 55%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    align-items: start;
}

.zimmer-detail-image-item {
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
    break-inside: avoid;
}

/* Magazin-Look: Asymmetrisches Layout mit Variationen */
.zimmer-detail-image-item:nth-child(1) {
    grid-column: span 2;
    height: 550px;
    transform: rotate(0.3deg);
    margin-bottom: 10px;
}

.zimmer-detail-image-item:nth-child(2) {
    height: 380px;
    transform: rotate(-0.5deg);
    margin-top: 20px;
}

.zimmer-detail-image-item:nth-child(3) {
    height: 320px;
    transform: rotate(0.4deg);
    margin-top: -10px;
}

.zimmer-detail-image-item:nth-child(4) {
    grid-column: span 2;
    height: 450px;
    transform: rotate(-0.2deg);
    margin-top: 15px;
}

.zimmer-detail-image-item:nth-child(5) {
    height: 360px;
    transform: rotate(0.5deg);
    margin-top: -5px;
}

.zimmer-detail-image-item:nth-child(6) {
    height: 340px;
    transform: rotate(-0.3deg);
    margin-top: 25px;
}

.zimmer-detail-image-item:nth-child(7) {
    grid-column: span 2;
    height: 480px;
    transform: rotate(0.2deg);
    margin-top: 10px;
}

.zimmer-detail-image-item:nth-child(8),
.zimmer-detail-image-item:nth-child(9) {
    height: 350px;
}

.zimmer-detail-image-item:nth-child(8) {
    transform: rotate(-0.4deg);
    margin-top: -15px;
}

.zimmer-detail-image-item:nth-child(9) {
    transform: rotate(0.3deg);
    margin-top: 20px;
}

/* Weitere Variationen für mehr Bilder */
.zimmer-detail-image-item:nth-child(10) {
    grid-column: span 2;
    height: 420px;
    transform: rotate(-0.1deg);
}

.zimmer-detail-image-item:nth-child(11),
.zimmer-detail-image-item:nth-child(12) {
    height: 330px;
}

.zimmer-detail-image-item:nth-child(11) {
    transform: rotate(0.4deg);
    margin-top: 15px;
}

.zimmer-detail-image-item:nth-child(12) {
    transform: rotate(-0.2deg);
    margin-top: -10px;
}

.zimmer-detail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zimmer-detail-text-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.zimmer-detail-text {
    font-family: 'HALTimezone', serif;
    font-size: 1.15em;
    line-height: 1.8;
    color: #000000;
}

.zimmer-detail-text p {
    margin-bottom: 1.5em;
}

.zimmer-detail-ausstattung {
    margin: 0;
    padding: 0;
}

.zimmer-detail-ausstattung-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 2em;
    margin-bottom: 20px;
    color: #000000;
}

.zimmer-detail-ausstattung-content {
    font-family: 'HALTimezone', serif;
    font-size: 1.1em;
    line-height: 1.8;
    color: #000000;
}

.zimmer-detail-ausstattung-content ul,
.zimmer-detail-ausstattung-content ol {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 0;
}

.zimmer-detail-ausstattung-content ul li,
.zimmer-detail-ausstattung-content ol li {
    padding-left: 35px;
    position: relative;
    margin-bottom: 12px;
    list-style: none;
}

.zimmer-detail-ausstattung-content ul li:before,
.zimmer-detail-ausstattung-content ol li:before {
    content: "→";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #000000;
    font-weight: bold;
    font-size: 1.3em;
    line-height: 1;
    display: inline-block;
}

/* Für verschachtelte Listen */
.zimmer-detail-ausstattung-content ul ul li:before,
.zimmer-detail-ausstattung-content ol ol li:before {
    content: "→";
}

/* Für p-Tags die wie Listen aussehen sollen */
.zimmer-detail-ausstattung-content p {
    padding-left: 35px;
    position: relative;
    margin-bottom: 12px;
}

.zimmer-detail-ausstattung-content p:before {
    content: "→";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #000000;
    font-weight: bold;
    font-size: 1.3em;
    line-height: 1;
    display: inline-block;
}

.zimmer-detail-actions {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 20px;
}

.zimmer-detail-button {
    display: inline-block;
    padding: 12px 30px;
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 0.95em;
    text-decoration: none;
    border-radius: 4.15rem;
    border: 2px solid #000000;
    text-align: center;
    min-width: 180px;
}

.zimmer-detail-button-primary {
    background: #000000;
    color: #ffffff;
}

.zimmer-detail-button-primary:hover {
    background: #ffffff;
    color: #000000;
}

.zimmer-detail-button-secondary {
    background: transparent;
    color: #000000;
}

.zimmer-detail-button-secondary:hover {
    background: #000000;
    color: #ffffff;
}

.zimmer-detail-price {
    margin-top: 40px;
    margin-bottom: 30px;
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 2.5rem;
    color: #000000;
    line-height: 1.3;
}

/* Responsive Design für Zimmer Detail */
@media (max-width: 1400px) {
    .zimmer-detail-container {
        padding: 0 80px;
    }
    
    .zimmer-detail-content {
        gap: 60px;
    }
}

/* Mobile Swipe-Container (versteckt auf Desktop) */
.zimmer-detail-images-mobile {
    display: none;
}

.zimmer-detail-images-swipe {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.zimmer-detail-swipe-wrapper {
    display: flex;
    transition: transform 0.3s ease;
    will-change: transform;
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
}

.zimmer-detail-swipe-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 400px;
    overflow: hidden;
    background: #f5f5f5;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.zimmer-detail-swipe-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zimmer-detail-swipe-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding: 0 20px;
}

.zimmer-detail-swipe-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cccccc;
    border: 2px solid #000000;
    cursor: pointer;
    transition: all 0.3s ease;
}

.zimmer-detail-swipe-dot.active {
    background: #000000;
}

@media (max-width: 1024px) {
    .zimmer-detail-element {
        padding: 80px 0;
    }
    
    .zimmer-detail-container {
        padding: 0 60px;
    }
    
    .zimmer-detail-title {
        font-size: 3.5em;
    }
    
    .zimmer-detail-content {
        flex-direction: column;
        gap: 50px;
    }
    
    .zimmer-detail-images-desktop {
        display: none;
    }
    
    .zimmer-detail-images-mobile {
        display: block;
    }
    
    .zimmer-detail-images {
        flex: 1;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .zimmer-detail-element {
        padding: 60px 0;
    }
    
    .zimmer-detail-container {
        padding: 0 40px;
    }
    
    .zimmer-detail-title {
        font-size: 2.5em;
    }
    
    .zimmer-detail-subtitle {
        font-size: 1.2em;
    }
    
    .zimmer-detail-images-desktop {
        display: none !important;
    }
    
    .zimmer-detail-images-mobile {
        display: block !important;
    }
    
    .zimmer-detail-swipe-slide {
        height: 350px;
    }
    
    .zimmer-detail-price-value {
        font-size: 2em;
    }
    
    .zimmer-detail-text {
        font-size: 1em;
    }
    
    .zimmer-detail-ausstattung-title {
        font-size: 1.6em;
    }
    
    .zimmer-detail-actions {
        flex-direction: column;
    }
    
    .zimmer-detail-button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .zimmer-detail-container {
        padding: 0 20px;
    }
    
    .zimmer-detail-title {
        font-size: 2em;
    }
    
    .zimmer-detail-swipe-slide {
        height: 300px;
    }
    
    .zimmer-detail-swipe-dots {
        margin-top: 15px;
        gap: 8px;
    }
    
    .zimmer-detail-swipe-dot {
        width: 8px;
        height: 8px;
    }
}

/* ===================================
   POWERMAIL FORMULARE
   =================================== */

/* Verstecke unerwünschte Elemente */
.tx-powermail h3,
.powermail_form h3,
.powermail_multistep_navigation,
.powermail_tab_navigation,
.btn-group.powermail_multistep_navigation,
.powermail_form .btn-group {
    display: none !important;
}

/* Verstecke Pfeile zwischen Seiten */
.powermail_tab_navigation button,
.powermail_fieldwrap.powermail_tab_navigation {
    display: none !important;
}

/* Alle Fieldsets immer sichtbar machen */
.powermail_fieldset,
fieldset.powermail_fieldset {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Verstecke container-fluid Wrapper */
.tx-powermail .container-fluid {
    padding: 0;
    max-width: 100%;
}

.powermail-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 40px;
}

.powermail-form-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 3em;
    color: #000000;
    margin-bottom: 40px;
    letter-spacing: -0.02em;
}

.powermail_form {
    width: 100%;
}

/* Alle Seiten gleichzeitig anzeigen (kein Multistep) */
.powermail_fieldset {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.powermail_fieldset {
    border: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.powermail_legend {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 2em;
    color: #000000;
    margin-bottom: 30px;
    padding: 0;
    border: none;
}

.powermail-fields {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.powermail_fieldwrap {
    width: 100%;
    margin-bottom: 30px;
}

.powermail_fieldwrap:last-child {
    margin-bottom: 0;
}

.powermail-field-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.powermail-label,
.tx-powermail label,
.powermail_fieldwrap label {
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 0.95em;
    font-weight: 500;
    color: #000000;
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.powermail-mandatory {
    color: #000000;
    margin-left: 3px;
}

.powermail_input,
.powermail_textarea,
.powermail_select,
.powermail_password,
.powermail_date,
.powermail_file,
.tx-powermail input[type="text"],
.tx-powermail input[type="email"],
.tx-powermail input[type="date"],
.tx-powermail textarea,
.tx-powermail select {
    width: 100%;
    padding: 14px 20px;
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 1em;
    color: #000000;
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 0;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.powermail_input:focus,
.powermail_textarea:focus,
.powermail_select:focus,
.powermail_password:focus,
.powermail_date:focus,
.powermail_file:focus {
    outline: none;
    background: #f5f5f5;
}

.powermail_file {
    padding: 10px;
    cursor: pointer;
}

.powermail-file-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.powermail-file-item {
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 0.9em;
    color: #000000;
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
}

.powermail_textarea {
    min-height: 120px;
    resize: vertical;
}

.powermail_select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
}

/* Checkbox und Radio */
.powermail-checkbox-wrapper,
.powermail-radio-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.powermail-radio-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.powermail_checkbox,
.powermail_radio {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: #000000;
    border: 2px solid #000000;
}

.powermail-radio-label {
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 1em;
    color: #000000;
    cursor: pointer;
}

/* Buttons */
.powermail-submit-container,
.powermail_fieldwrap_type_submit {
    margin-top: 50px;
    display: flex;
    justify-content: flex-start;
}

.powermail-button,
.powermail-button input[type="submit"],
input[type="submit"].powermail-button,
.powermail-submit {
    display: inline-block;
    padding: 12px 30px;
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 0.95em;
    text-decoration: none;
    border-radius: 4.15rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid #000000;
    text-align: center;
    min-width: 120px;
    box-sizing: border-box;
}

.powermail-button-primary,
.powermail-button-primary input[type="submit"],
input[type="submit"].powermail-button-primary,
.powermail-submit {
    background: #000000;
    color: #ffffff;
}

.powermail-button-primary:hover,
.powermail-button-primary input[type="submit"]:hover,
input[type="submit"].powermail-button-primary:hover,
.powermail-submit:hover {
    background: #ffffff;
    color: #000000;
}

.powermail-button-secondary {
    background: transparent;
    color: #000000;
}

.powermail-button-secondary:hover {
    background: #000000;
    color: #ffffff;
}

.powermail-submit,
.powermail-submit-container input[type="submit"],
.powermail_fieldwrap_type_submit input[type="submit"],
input[type="submit"][class*="powermail"],
input[type="submit"].powermail-button,
.powermail_fieldwrap input[type="submit"] {
    width: 100%;
    max-width: 300px;
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
    padding: 12px 30px !important;
    font-family: 'HALTimezone', serif !important;
    font-weight: bold !important;
    font-style: italic !important;
    font-size: 0.95em !important;
    border-radius: 4.15rem !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-align: center !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    box-shadow: none !important;
}

.powermail-submit:hover,
.powermail-submit-container input[type="submit"]:hover,
.powermail_fieldwrap_type_submit input[type="submit"]:hover,
input[type="submit"][class*="powermail"]:hover,
input[type="submit"].powermail-button:hover,
.powermail_fieldwrap input[type="submit"]:hover {
    background: #ffffff !important;
    color: #000000 !important;
}

/* Multistep Navigation */
.powermail_multistep_navigation {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.powermail-step-button {
    padding: 10px 25px;
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 0.9em;
    font-weight: 500;
    background: transparent;
    color: #000000;
    border: 2px solid #000000;
    border-radius: 4.15rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.powermail-step-button:hover {
    background: #000000;
    color: #ffffff;
}

.powermail-step-button.powermail-step-active {
    background: #000000;
    color: #ffffff;
}

.powermail_tab_navigation {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    justify-content: space-between;
}

/* Text Content */
.powermail-text-container {
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 1em;
    color: #000000;
    line-height: 1.6;
    padding: 20px 0;
}

/* Error Messages */
.powermail_field_error .powermail_input,
.powermail_field_error .powermail_textarea,
.powermail_field_error .powermail_select,
.powermail_field_error .powermail_password,
.powermail_field_error .powermail_date,
.powermail_field_error .powermail_file {
    border-color: #d4372f;
}

.powermail_field_error .powermail-label {
    color: #d4372f;
}

/* Flash Messages */
.powermail_message_error,
.powermail_message_ok,
.powermail_message_warning {
    padding: 15px 20px;
    margin-bottom: 25px;
    border: 2px solid #000000;
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 0.95em;
}

.powermail_message_error {
    background: #fff5f5;
    color: #d4372f;
    border-color: #d4372f;
}

.powermail_message_ok {
    background: #f0f9f0;
    color: #000000;
}

.powermail_message_warning {
    background: #fff9e6;
    color: #000000;
}

/* Responsive Design */
@media (max-width: 768px) {
    .powermail-form-wrapper {
        padding: 40px 20px;
    }
    
    .powermail-form-title {
        font-size: 2.2em;
    }
    
    .powermail_legend {
        font-size: 1.7em;
    }
    
    .powermail_multistep_navigation {
        flex-direction: column;
    }
    
    .powermail-step-button {
        width: 100%;
    }
    
    .powermail_tab_navigation {
        flex-direction: column;
    }
    
    .powermail-button {
        width: 100%;
    }
    
    .powermail-submit {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .powermail-form-title {
        font-size: 1.8em;
    }
    
    .powermail_legend {
        font-size: 1.5em;
    }
}

/* Flatpickr Datepicker Styles - Schwarz-Weiß Design */
.powermail_datepicker {
    position: relative;
    cursor: pointer;
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #000000;
    padding: 8px 12px;
    font-size: 1em;
    font-family: inherit;
    transition: all 0.2s ease;
}

.powermail_datepicker:hover {
    background-color: #f5f5f5;
    border-color: #333333;
}

.powermail_datepicker:focus {
    outline: 2px solid #000000;
    outline-offset: 2px;
    background-color: #ffffff;
    border-color: #000000;
}

/* Flatpickr Kalender-Dropdown - Schwarz-Weiß Design */
.flatpickr-calendar {
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2) !important;
    font-family: inherit !important;
}

.flatpickr-months {
    background: #ffffff !important;
    border-bottom: 1px solid #000000 !important;
    color: #000000 !important;
}

.flatpickr-month {
    color: #000000 !important;
    fill: #000000 !important;
}

.flatpickr-current-month {
    color: #000000 !important;
    font-weight: 600 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    color: #000000 !important;
    fill: #000000 !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: #f5f5f5 !important;
    color: #000000 !important;
    fill: #000000 !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: #000000 !important;
}

.flatpickr-weekdays {
    background: #ffffff !important;
    border-bottom: 1px solid #000000 !important;
}

.flatpickr-weekday {
    color: #000000 !important;
    font-weight: 600 !important;
}

.flatpickr-day {
    color: #000000 !important;
    border: 1px solid transparent !important;
}

.flatpickr-day:hover {
    background: #f5f5f5 !important;
    border-color: #000000 !important;
    color: #000000 !important;
}

.flatpickr-day.today {
    border-color: #000000 !important;
    color: #000000 !important;
    font-weight: 600 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: #333333 !important;
    color: #ffffff !important;
}

.flatpickr-day.inRange {
    background: #f5f5f5 !important;
    color: #000000 !important;
    border-color: #000000 !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #999999 !important;
    opacity: 0.5 !important;
}

.flatpickr-time {
    border-top: 1px solid #000000 !important;
    background: #ffffff !important;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator {
    color: #000000 !important;
}

.flatpickr-time input:hover {
    background: #f5f5f5 !important;
}

.flatpickr-am-pm {
    color: #000000 !important;
}

.flatpickr-am-pm:hover {
    background: #f5f5f5 !important;
}

/* ===================================
   Bildergalerie Element
   =================================== */

.bildergalerie-element {
    margin: 60px 0;
    padding: 0 clamp(16px, 4vw, 60px);
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.bildergalerie-wrapper {
    width: 100%;
}

.bildergalerie-title-wrapper {
    margin-bottom: 30px;
}

.bildergalerie-title {
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 2.5em;
    color: #000000;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.bildergalerie-description {
    font-size: 1.1em;
    line-height: 1.7;
    color: #555555;
    margin-bottom: 40px;
    max-width: 800px;
}

.bildergalerie-filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 60px;
    justify-content: center;
}

.bildergalerie-filter-button {
    display: inline-block;
    padding: 12px 30px;
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 0.95em;
    text-decoration: none;
    border-radius: 4.15rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid #000000;
    text-align: center;
    background: transparent;
    color: #000000;
}

.bildergalerie-filter-button:hover {
    background: #000000;
    color: #ffffff;
}

.bildergalerie-filter-button.bildergalerie-filter-active {
    background: #000000;
    color: #ffffff;
}

.bildergalerie-filter-button.bildergalerie-filter-active:hover {
    background: #ffffff;
    color: #000000;
}

.bildergalerie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 50px;
    grid-auto-rows: auto;
    align-items: start;
    width: 100%;
    margin: 0 auto 40px auto;
}

.bildergalerie-item {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background: #f5f5f5;
    cursor: pointer;
    transition: transform 0.3s ease;
    break-inside: avoid;
}

/* Große Karte (ab Index 4, dann jede 6. Karte) */
.bildergalerie-item:nth-child(4n+4) {
    grid-column: span 2;
}

/* Hohe Karte (ab Index 5, dann jede 6. Karte) */
.bildergalerie-item:nth-child(5n+5) {
    grid-row: span 2;
}

/* Leichte Rotationen für lockeren Zeitschriften-Look */
.bildergalerie-item:nth-child(4n) {
    transform: rotate(-1deg);
    margin-top: 20px;
}

.bildergalerie-item:nth-child(4n+1) {
    transform: rotate(0.7deg);
    margin-top: -10px;
}

.bildergalerie-item:nth-child(4n+2) {
    transform: rotate(-0.5deg);
    margin-top: 25px;
}

.bildergalerie-item:nth-child(4n+3) {
    transform: rotate(0.9deg);
    margin-top: -15px;
}

/* Zusätzliche Variationen für mehr Dynamik */
.bildergalerie-item:nth-child(5n) {
    margin-left: 15px;
}

.bildergalerie-item:nth-child(5n+2) {
    margin-right: 15px;
}

.bildergalerie-item:nth-child(6n+3) {
    margin-top: 30px;
}

.bildergalerie-item:nth-child(7n) {
    margin-bottom: 20px;
}

.bildergalerie-image-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 280px;
    background: #f5f5f5;
}

/* Variationen der Bildhöhen für lockeren Look */
.bildergalerie-item:first-child .bildergalerie-image-wrapper {
    height: 300px;
}

.bildergalerie-item:nth-child(2) .bildergalerie-image-wrapper {
    height: 320px;
}

.bildergalerie-item:nth-child(3) .bildergalerie-image-wrapper {
    height: 280px;
}

.bildergalerie-item:nth-child(4) .bildergalerie-image-wrapper {
    height: 340px;
}

.bildergalerie-item:nth-child(5n) .bildergalerie-image-wrapper {
    height: 300px;
}

.bildergalerie-item:nth-child(5n+1) .bildergalerie-image-wrapper {
    height: 320px;
}

.bildergalerie-item:nth-child(5n+2) .bildergalerie-image-wrapper {
    height: 280px;
}

.bildergalerie-item:nth-child(5n+3) .bildergalerie-image-wrapper {
    height: 340px;
}

.bildergalerie-item:nth-child(5n+4) .bildergalerie-image-wrapper {
    height: 290px;
}

/* Große Karten haben größere Bilder */
.bildergalerie-item:nth-child(4n+4) .bildergalerie-image-wrapper {
    height: 400px;
}

/* Hohe Karten haben höhere Bilder */
.bildergalerie-item:nth-child(5n+5) .bildergalerie-image-wrapper {
    height: 500px;
}

.bildergalerie-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.bildergalerie-item:hover .bildergalerie-image {
    transform: scale(1.1);
}

.bildergalerie-image-caption {
    padding: 15px;
    font-size: 0.9em;
    line-height: 1.5;
    color: #555555;
    background: #f5f5f5;
}

/* Lightbox */
.bildergalerie-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bildergalerie-lightbox.active {
    display: flex;
    opacity: 1;
}

.bildergalerie-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bildergalerie-lightbox-image {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
}

.bildergalerie-lightbox-caption {
    margin-top: 20px;
    color: #ffffff;
    font-size: 1.1em;
    text-align: center;
    max-width: 80vw;
    padding: 0 20px;
}

.bildergalerie-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 3em;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    z-index: 10001;
}

.bildergalerie-lightbox-close:hover {
    transform: rotate(90deg);
}

.bildergalerie-lightbox-prev,
.bildergalerie-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 2.5em;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    z-index: 10001;
    opacity: 0.7;
    font-weight: 300;
    line-height: 1;
}

.bildergalerie-lightbox-prev {
    left: 30px;
}

.bildergalerie-lightbox-next {
    right: 30px;
}

.bildergalerie-lightbox-prev:hover,
.bildergalerie-lightbox-next:hover {
    opacity: 1;
    transform: translateY(-50%);
}

/* Responsive Design für Bildergalerie */
@media (max-width: 1024px) {
    .bildergalerie-element {
        padding: 0 16px;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    
    .bildergalerie-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 30px;
    }
    
    .bildergalerie-title {
        font-size: 2em;
    }
    
    /* Reduziere Rotationen auf mobilen Geräten */
    .bildergalerie-item:nth-child(4n),
    .bildergalerie-item:nth-child(4n+1),
    .bildergalerie-item:nth-child(4n+2),
    .bildergalerie-item:nth-child(4n+3) {
        transform: none;
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .bildergalerie-element {
        padding: 0 12px;
        margin: 40px 0;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    
    .bildergalerie-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 30px;
    }
    
    .bildergalerie-item:nth-child(4n+4) {
        grid-column: span 1;
    }
    
    .bildergalerie-item:nth-child(5n+5) {
        grid-row: span 1;
    }
    
    .bildergalerie-title {
        font-size: 1.8em;
    }
    
    .bildergalerie-filter-wrapper {
        gap: 10px;
        margin-bottom: 40px;
    }
    
    .bildergalerie-filter-button {
        padding: 10px 20px;
        font-size: 0.85em;
    }
    
    .bildergalerie-lightbox-prev,
    .bildergalerie-lightbox-next {
        width: 40px;
        height: 40px;
        font-size: 2em;
    }
    
    .bildergalerie-lightbox-prev {
        left: 15px;
    }
    
    .bildergalerie-lightbox-next {
        right: 15px;
    }
    
    .bildergalerie-lightbox-close {
        top: 10px;
        right: 10px;
        font-size: 2.5em;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .bildergalerie-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .bildergalerie-item:nth-child(4n+4),
    .bildergalerie-item:nth-child(5n+5) {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .bildergalerie-title {
        font-size: 1.5em;
    }
    
    .bildergalerie-filter-button {
        padding: 8px 16px;
        font-size: 0.8em;
    }
    
    .bildergalerie-image-wrapper,
    .bildergalerie-item:first-child .bildergalerie-image-wrapper,
    .bildergalerie-item:nth-child(2) .bildergalerie-image-wrapper,
    .bildergalerie-item:nth-child(3) .bildergalerie-image-wrapper,
    .bildergalerie-item:nth-child(4) .bildergalerie-image-wrapper,
    .bildergalerie-item:nth-child(5n) .bildergalerie-image-wrapper,
    .bildergalerie-item:nth-child(5n+1) .bildergalerie-image-wrapper,
    .bildergalerie-item:nth-child(5n+2) .bildergalerie-image-wrapper,
    .bildergalerie-item:nth-child(5n+3) .bildergalerie-image-wrapper,
    .bildergalerie-item:nth-child(5n+4) .bildergalerie-image-wrapper,
    .bildergalerie-item:nth-child(4n+4) .bildergalerie-image-wrapper,
    .bildergalerie-item:nth-child(5n+5) .bildergalerie-image-wrapper {
        height: 250px;
    }
}

/* ===================================
   Text Content Element
   =================================== */

.text-content-element {
    margin: 60px 0;
    padding: 0 40px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.text-content-size-large.text-content-element {
    max-width: none;
}

.text-content-size-large.text-content-element {
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.text-content-wrapper {
    width: 100%;
}

.text-content-size-large .text-content-wrapper {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 120px;
    box-sizing: border-box;
    display: block;
}

.text-content-size-large .text-content-heading,
.text-content-size-large .text-content-subheading,
.text-content-size-large .text-content-text {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* Ausrichtung */
.text-content-alignment-center {
    text-align: center;
}

.text-content-alignment-center .text-content-button-wrapper {
    justify-content: center;
}

.text-content-alignment-left {
    text-align: left;
}

.text-content-alignment-left .text-content-button-wrapper {
    justify-content: flex-start;
}

.text-content-alignment-right {
    text-align: right;
}

.text-content-alignment-right .text-content-button-wrapper {
    justify-content: flex-end;
}

/* Mobile: Text immer linksbündig */
@media (max-width: 768px) {
    .text-content-element.text-content-alignment-center,
    .text-content-element.text-content-alignment-right {
        text-align: left !important;
    }
    
    .text-content-element.text-content-alignment-center .text-content-button-wrapper,
    .text-content-element.text-content-alignment-right .text-content-button-wrapper {
        justify-content: flex-start !important;
    }
}

/* Überschrift */
.text-content-heading {
    font-family: 'HALTimezone', serif;
    font-weight: 400;
    font-style: normal;
    color: #000000;
    margin-bottom: 20px;
    line-height: 1.2;
    width: 100%;
}

.text-content-heading h1,
.text-content-heading h2,
.text-content-heading h3,
.text-content-heading h4 {
    margin: 0;
    padding: 0;
}

.text-content-size-normal .text-content-heading h1 { font-size: 2.5em; }
.text-content-size-normal .text-content-heading h2 { font-size: 2em; }
.text-content-size-normal .text-content-heading h3 { font-size: 1.75em; }
.text-content-size-normal .text-content-heading h4 { font-size: 1.5em; }

.text-content-size-large .text-content-heading {
    font-size: 7.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 8.4rem;
    margin: 0 0 5px 0;
}

.text-content-size-large .text-content-heading h1,
.text-content-size-large .text-content-heading h2,
.text-content-size-large .text-content-heading h3,
.text-content-size-large .text-content-heading h4 {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    font-style: inherit;
    margin: 0;
}

/* Unterüberschrift */
.text-content-subheading {
    font-family: 'HALTimezone', serif;
    font-weight: normal;
    font-style: italic;
    color: #000000;
    margin-bottom: 30px;
    line-height: 1.3;
    width: 100%;
}

.text-content-subheading h1,
.text-content-subheading h2,
.text-content-subheading h3,
.text-content-subheading h4 {
    margin: 0;
    padding: 0;
}

.text-content-size-normal .text-content-subheading h1 { font-size: 2em; }
.text-content-size-normal .text-content-subheading h2 { font-size: 1.75em; }
.text-content-size-normal .text-content-subheading h3 { font-size: 1.5em; }
.text-content-size-normal .text-content-subheading h4 { font-size: 1.25em; }

.text-content-size-large .text-content-subheading {
    font-size: 7.4rem;
    font-style: italic;
    font-weight: 400;
    line-height: 8.4rem;
    margin: 0 0 50px 0;
}

.text-content-size-large .text-content-subheading h1,
.text-content-size-large .text-content-subheading h2,
.text-content-size-large .text-content-subheading h3,
.text-content-size-large .text-content-subheading h4 {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    font-style: inherit;
    margin: 0;
}

/* Text */
.text-content-text {
    font-family: 'HALTimezone', serif;
    color: #000000;
    line-height: 1.7;
    margin-bottom: 40px;
    width: 100%;
}

.text-content-size-normal .text-content-text {
    font-size: 1.1rem;
    font-weight: 400;
}

.text-content-size-large .text-content-text {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 3.2rem;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

.text-content-text p {
    margin-bottom: 1em;
}

.text-content-text p:last-child {
    margin-bottom: 0;
}

/* Button */
.text-content-button-wrapper {
    display: flex;
    margin-top: 30px;
}

.text-content-button {
    display: inline-block;
    padding: 12px 30px;
    font-family: 'HALTimezone', serif;
    font-weight: bold;
    font-style: italic;
    font-size: 0.95em;
    text-decoration: none;
    border-radius: 4.15rem;
    transition: all 0.3s ease;
    border: 2px solid #000000;
    background: transparent;
    color: #000000;
}

.text-content-button:hover {
    background: #000000;
    color: #ffffff;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .text-content-element {
        padding: 0 30px;
    }
    
    .text-content-size-large.text-content-element {
        padding: 80px 0;
    }
    
    .text-content-size-large .text-content-wrapper {
        padding: 0 60px;
    }
    
    .text-content-size-normal .text-content-heading h1 { font-size: 2em; }
    .text-content-size-normal .text-content-heading h2 { font-size: 1.75em; }
    .text-content-size-normal .text-content-heading h3 { font-size: 1.5em; }
    .text-content-size-normal .text-content-heading h4 { font-size: 1.3em; }
    
    .text-content-size-large .text-content-heading {
        font-size: 6rem;
        line-height: 6.8rem;
    }
    
    .text-content-size-large .text-content-subheading {
        font-size: 6rem;
        line-height: 6.8rem;
    }
    
    .text-content-size-large .text-content-text {
        font-size: 2rem;
        line-height: 2.6rem;
    }
}

@media (max-width: 768px) {
    .text-content-element {
        padding: 0 20px;
        margin: 40px 0;
    }
    
    .text-content-size-large.text-content-element {
        padding: 60px 0;
    }
    
    .text-content-size-large .text-content-wrapper {
        padding: 0 40px;
    }
    
    .text-content-size-normal .text-content-heading h1 { font-size: 1.8em; }
    .text-content-size-normal .text-content-heading h2 { font-size: 1.6em; }
    .text-content-size-normal .text-content-heading h3 { font-size: 1.4em; }
    .text-content-size-normal .text-content-heading h4 { font-size: 1.2em; }
    
    .text-content-size-large .text-content-heading {
        font-size: 5rem;
        line-height: 5.7rem;
    }
    
    .text-content-size-large .text-content-subheading {
        font-size: 5rem;
        line-height: 5.7rem;
    }
    
    .text-content-size-large .text-content-text {
        font-size: 1.8rem;
        line-height: 2.4rem;
    }
    
    .text-content-button {
        padding: 10px 25px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .text-content-size-large.text-content-element {
        padding: 40px 0;
    }
    
    .text-content-size-large .text-content-wrapper {
        padding: 0 20px;
    }
    
    .text-content-size-normal .text-content-heading h1 { font-size: 1.5em; }
    .text-content-size-normal .text-content-heading h2 { font-size: 1.3em; }
    .text-content-size-normal .text-content-heading h3 { font-size: 1.2em; }
    .text-content-size-normal .text-content-heading h4 { font-size: 1.1em; }
    
    .text-content-size-large .text-content-heading {
        font-size: 4rem;
        line-height: 4.5rem;
    }
    
    .text-content-size-large .text-content-subheading {
        font-size: 4rem;
        line-height: 4.5rem;
    }
    
    .text-content-size-large .text-content-text {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    
    .text-content-button {
        padding: 8px 20px;
        font-size: 0.85em;
    }
}

/* ===================================
   TEASER ELEMENT
   =================================== */
.teaser-element {
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 80px 0;
}

.teaser-container {
    max-width: none;
    width: 100%;
    margin: 0 auto;
    padding: 0 120px;
    box-sizing: border-box;
}

.teaser-content-wrapper {
    display: flex;
    flex-direction: row;
    gap: 80px;
    align-items: flex-start;
    width: 100%;
}

.teaser-image-wrapper {
    flex: 0 0 auto;
    width: 450px;
    max-width: 100%;
}

.teaser-image {
    width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;
}

.teaser-video-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.teaser-video {
    width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;
}

.teaser-text-content {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.teaser-title-text-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 500px;
}

.teaser-title {
    color: #000;
    font-family: "PP Neue Montreal";
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 4rem;
    margin: 0;
}

.teaser-text {
    color: #000;
    font-family: "HALTimezone", serif;
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.8;
    max-width: 100%;
    word-wrap: break-word;
}

.teaser-button-wrapper {
    margin-top: 10px;
}

.teaser-button {
    display: inline-block;
    padding: 12px 30px;
    font-family: 'PPNeueMontreal', sans-serif;
    font-size: 1em;
    font-weight: 500;
    text-decoration: none;
    border: 2px solid #000000;
    border-radius: 4.15rem;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
}

.teaser-button-filled {
    background: #000000;
    color: #ffffff;
}

.teaser-button-filled:hover {
    background: #ffffff;
    color: #000000;
}

.teaser-button-outlined {
    background: transparent;
    color: #000000;
}

.teaser-button-outlined:hover {
    background: #000000;
    color: #ffffff;
}

.teaser-illustration-wrapper {
    flex: 0 0 auto;
    width: 300px;
    max-width: 100%;
}

.teaser-illustration {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Responsive Anpassungen für Teaser */
@media (max-width: 1800px) {
    .teaser-container {
        padding: 0 100px;
    }
    
    .teaser-content-wrapper {
        gap: 70px;
    }
    
    .teaser-image-wrapper {
        width: 420px;
    }
    
    .teaser-image,
    .teaser-video {
        height: 550px;
    }
    
    .teaser-illustration-wrapper {
        width: 280px;
    }
    
    .teaser-title-text-wrapper {
        max-width: 450px;
    }
    
    .teaser-text-content {
        gap: 35px;
    }
}

@media (max-width: 1600px) {
    .teaser-container {
        padding: 0 80px;
    }
    
    .teaser-content-wrapper {
        gap: 60px;
    }
    
    .teaser-image-wrapper {
        width: 400px;
    }
    
    .teaser-image,
    .teaser-video {
        height: 500px;
    }
    
    .teaser-illustration-wrapper {
        width: 260px;
    }
    
    .teaser-title-text-wrapper {
        max-width: 420px;
    }
    
    .teaser-title {
        font-size: 3rem;
        line-height: 3.5rem;
    }
    
    .teaser-text-content {
        gap: 30px;
    }
}

@media (max-width: 1400px) {
    .teaser-container {
        padding: 0 60px;
    }
    
    .teaser-content-wrapper {
        gap: 50px;
    }
    
    .teaser-image-wrapper {
        width: 380px;
    }
    
    .teaser-image,
    .teaser-video {
        height: 480px;
    }
    
    .teaser-title {
        font-size: 2.8rem;
        line-height: 3.2rem;
    }
    
    .teaser-illustration-wrapper {
        width: 240px;
    }
    
    .teaser-title-text-wrapper {
        max-width: 400px;
    }
}

@media (max-width: 1350px) {
    .teaser-element {
        padding: 60px 0;
    }
    
    .teaser-container {
        padding: 0 60px;
    }
    
    .teaser-content-wrapper {
        flex-direction: column;
        gap: 40px;
        align-items: flex-start;
    }
    
    .teaser-image-wrapper {
        width: 100%;
        max-width: 500px;
    }
    
    .teaser-image,
    .teaser-video {
        height: 500px;
    }
    
    .teaser-text-content {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        gap: 30px;
        align-items: flex-start;
    }
    
    .teaser-title-text-wrapper {
        width: 100%;
        max-width: 100%;
    }
    
    .teaser-illustration-wrapper {
        width: 100%;
        max-width: 300px;
        align-self: flex-start;
    }
    
    .teaser-title {
        font-size: 2.5rem;
        line-height: 3rem;
    }
}

@media (max-width: 1200px) {
    .teaser-container {
        padding: 0 50px;
    }
    
    .teaser-image-wrapper {
        max-width: 450px;
    }
    
    .teaser-image,
    .teaser-video {
        height: 450px;
    }
    
    .teaser-illustration-wrapper {
        max-width: 250px;
    }
}

@media (max-width: 768px) {
    .teaser-element {
        padding: 50px 0;
    }
    
    .teaser-container {
        padding: 0 30px;
    }
    
    .teaser-content-wrapper {
        gap: 35px;
    }
    
    .teaser-image-wrapper {
        max-width: 100%;
    }
    
    .teaser-image,
    .teaser-video {
        height: 400px;
    }
    
    .teaser-text-content {
        gap: 25px;
    }
    
    .teaser-title {
        font-size: 2rem;
        line-height: 2.4rem;
    }
    
    .teaser-text {
        font-size: 1rem;
        line-height: 1.7;
    }
    
    .teaser-illustration-wrapper {
        max-width: 200px;
    }
    
    .teaser-button {
        padding: 10px 25px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .teaser-element {
        padding: 40px 0;
    }
    
    .teaser-container {
        padding: 0 20px;
    }
    
    .teaser-content-wrapper {
        gap: 30px;
    }
    
    .teaser-image,
    .teaser-video {
        height: 350px;
    }
    
    .teaser-title {
        font-size: 1.8rem;
        line-height: 2.2rem;
    }
    
    .teaser-text {
        font-size: 0.95rem;
    }
    
    .teaser-illustration-wrapper {
        max-width: 180px;
    }
    
    .teaser-button {
        padding: 8px 20px;
        font-size: 0.85em;
    }
}

/* ===================================
   SIDE SCROLLER
   =================================== */
.side-scroller {
    position: absolute;
    left: 0;
    top: 0;
    width: 0.8rem;
    height: 100%;
    z-index: 999;
    pointer-events: none;
    background-image: url('/fileadmin/user_upload/scroller.svg');
    background-repeat: repeat-y;
    background-position: top left;
    background-size: 0.8rem auto;
}

/* ===================================
   LANGUAGE SWITCH
   =================================== */
.language-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.language-switch-item {
    color: #000000;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.language-switch-item:hover {
    opacity: 0.7;
}

.language-switch-item-active {
    font-weight: bold;
    color: #000000;
    cursor: default;
}

.language-switch-separator {
    color: #000000;
    opacity: 0.5;
}

/* Language Switch im Nav Overlay */
.nav-language-switch {
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 10;
}

/* Language Switch im Footer */
.footer-language-switch {
    margin-top: 20px;
}

/* Mobile Ausrichtung für Language Switch */
@media (max-width: 768px) {
    .nav-language-switch {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        right: auto;
    }
    
    .footer-language-switch {
        margin-top: 20px;
        text-align: center;
    }
    
    .footer-center {
        text-align: center;
    }
}

/* ===================================
   MOBILE STICKY CTA BAR
   =================================== */
.mobile-cta-bar {
    display: none;
}

@media (max-width: 768px) {
    .mobile-cta-bar {
        display: flex !important;
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: transparent;
        border-top: none;
        z-index: 10001 !important;
        box-shadow: none;
        padding: 10px 20px;
        gap: 10px;
    }
    
    .mobile-cta-button {
        flex: 1;
        width: calc(50% - 5px);
        padding: 14px 20px;
        font-family: 'HALTimezone', serif;
        font-weight: bold;
        font-style: italic;
        font-size: 0.9em;
        text-decoration: none;
        text-align: center;
        border: 2px solid #000000;
        border-radius: 4.15rem;
        transition: all 0.3s ease;
        display: block;
    }
    
    .mobile-cta-anfrage {
        background: #ffffff;
        color: #000000;
    }
    
    .mobile-cta-anfrage:hover,
    .mobile-cta-anfrage:active {
        background: #000000;
        color: #ffffff;
    }
    
    .mobile-cta-buchen {
        background: #000000;
        color: #ffffff !important;
    }
    
    .mobile-cta-buchen:hover,
    .mobile-cta-buchen:active {
        background: #ffffff;
        color: #000000 !important;
    }
    
    /* Padding für Body, damit Content nicht unter CTA-Bar versteckt wird */
    body {
        padding-bottom: 60px !important;
    }
    
    /* Sicherstellen, dass Header-Buttons auf Mobile komplett versteckt sind */
    .header-right .header-buchen-button,
    .header-right .header-anfrage-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Reduzierte Bewegung für Nutzer, die Animationen bevorzugen */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal-text {
        color: rgba(0, 0, 0, 1) !important; /* Sofort schwarz */
        transition: none;
    }
}

/* ===================================
   SCROLL REVEAL - GRAU ZU SCHWARZ ANIMATION
   =================================== */

/* Basis-Stil für Texte mit Scroll-Reveal - zuerst grau */
/* WICHTIG: Inline-Styles im JavaScript haben höhere Priorität, 
   aber diese CSS-Regeln dienen als Fallback */
.scroll-reveal-text {
    color: rgba(0, 0, 0, 0.25) !important; /* Sehr helles Grau - deutlicher Unterschied */
    transition: color 1.8s ease-in-out !important;
}

/* Spezifischere Selektoren für verschiedene Element-Typen */
/* Überschreibe alle anderen Farb-Regeln */
h1.scroll-reveal-text,
h2.scroll-reveal-text,
h3.scroll-reveal-text,
h4.scroll-reveal-text,
h5.scroll-reveal-text,
h6.scroll-reveal-text,
p.scroll-reveal-text,
.hero-heading.scroll-reveal-text,
.hero-subtitle.scroll-reveal-text,
.text-main-heading.scroll-reveal-text,
.text-subheading.scroll-reveal-text,
.text-content.scroll-reveal-text,
.intro-heading.scroll-reveal-text,
.intro-subheadline.scroll-reveal-text {
    color: rgba(0, 0, 0, 0.25) !important; /* Sehr helles Grau - deutlicher Unterschied */
    transition: color 1.8s ease-in-out !important;
}

/* Wenn Text in Viewport kommt - wird er schwarz */
.scroll-reveal-text.revealed {
    color: rgba(0, 0, 0, 1) !important; /* Vollständig schwarz */
}

/* Spezifischere Selektoren für revealed Elemente */
h1.scroll-reveal-text.revealed,
h2.scroll-reveal-text.revealed,
h3.scroll-reveal-text.revealed,
h4.scroll-reveal-text.revealed,
h5.scroll-reveal-text.revealed,
h6.scroll-reveal-text.revealed,
p.scroll-reveal-text.revealed,
.hero-heading.scroll-reveal-text.revealed,
.hero-subtitle.scroll-reveal-text.revealed,
.text-main-heading.scroll-reveal-text.revealed,
.text-subheading.scroll-reveal-text.revealed,
.text-content.scroll-reveal-text.revealed,
.intro-heading.scroll-reveal-text.revealed,
.intro-subheadline.scroll-reveal-text.revealed {
    color: rgba(0, 0, 0, 1) !important; /* Vollständig schwarz */
}

/* Bilder sind immer sichtbar - keine Animation */
img,
picture,
video,
.image,
.img,
.picture {
    opacity: 1 !important;
    color: inherit !important;
}

/* Reduzierte Bewegung für Nutzer, die Animationen bevorzugen */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal-text {
        color: rgba(0, 0, 0, 1) !important; /* Sofort schwarz */
        transition: none !important;
    }
}

/* ===================================
   TYPO3 Frame Spacing (Abstand davor/danach)
   =================================== */

/* Basis-Frame */
.frame {
    width: 100%;
}

/* Abstand DAVOR (Space Before) */
.frame-space-before-extra-small {
    margin-top: 20px;
}

.frame-space-before-small {
    margin-top: 40px;
}

.frame-space-before-medium {
    margin-top: 60px;
}

.frame-space-before-large {
    margin-top: 80px;
}

.frame-space-before-extra-large {
    margin-top: 120px;
}

/* Abstand DANACH (Space After) */
.frame-space-after-extra-small {
    margin-bottom: 20px;
}

.frame-space-after-small {
    margin-bottom: 40px;
}

.frame-space-after-medium {
    margin-bottom: 60px;
}

.frame-space-after-large {
    margin-bottom: 80px;
}

.frame-space-after-extra-large {
    margin-bottom: 120px;
}

/* Responsive Anpassungen für Mobile */
@media (max-width: 768px) {
    .frame-space-before-extra-small {
        margin-top: 15px;
    }
    
    .frame-space-before-small {
        margin-top: 30px;
    }
    
    .frame-space-before-medium {
        margin-top: 45px;
    }
    
    .frame-space-before-large {
        margin-top: 60px;
    }
    
    .frame-space-before-extra-large {
        margin-top: 90px;
    }
    
    .frame-space-after-extra-small {
        margin-bottom: 15px;
    }
    
    .frame-space-after-small {
        margin-bottom: 30px;
    }
    
    .frame-space-after-medium {
        margin-bottom: 45px;
    }
    
    .frame-space-after-large {
        margin-bottom: 60px;
    }
    
    .frame-space-after-extra-large {
        margin-bottom: 90px;
    }
}