@font-face {
            font-family: 'Noto';
            src: url('fonts/Noto-Sans-regular.woff') format('woff');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'Inter';
            src: url('fonts/Inter-Medium.woff2') format('woff2');
            font-weight: 500;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'Bodoni';
            src: url('fonts/LibreBodoniItalic.woff2') format('woff2');
            font-weight: 200;
            font-style: italic;
            font-display: swap;
        }
        body {
            background-color: #f2f1ec;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            overflow-x: hidden;
            font-family: 'Noto', sans-serif;
            color: #918b82;
            font-size: clamp(14px, 1.1vw, 20px);
            line-height: 1.7;
        }
        .site-wrapper {
            position: relative;
            max-width: 1600px;
            margin: 0 auto;
            padding: 104px clamp(20px, 5vw, 80px) 0;
        }
        .site-wrapper-2 {
            position: relative;
            max-width: 1600px;
            margin: 0 auto;
            padding: 60px clamp(20px, 5vw, 80px) 0;
        }
        p {
            font-size: 1rem;
            margin: 0;
        }
        h1 {
            font-family: 'Inter', sans-serif;
            font-size: clamp(2.2rem, 2.96vw, 2.96rem);
            line-height: 1.6;
            color: #918b82;
        }
        h2 {
            font-family: 'Bodoni', serif;
            font-size: clamp(1.6rem, 2.8vw, 1.96rem);
            line-height: 0.8;
            color: #918b82;   
        }
        h3 {
            font-family: 'Inter', sans-serif;
            font-size: clamp(1.1rem, 2.2vw, 1.6rem);
            line-height: 1.3;
            color: #918b82;   
        }
        .nav {
            background-color: #f2f1ec;
            position: fixed;
            z-index: 1000; 
            display: flex;
            align-items: center; 
            width: 100%; 
            box-sizing: border-box;
            gap: clamp(15px, 2.5vw, 40px); 
            margin: 0 auto;
            padding: 25px clamp(20px, 5vw, 80px) 23px;
            font-size: clamp(14px, 1.2vw, 20px);
        }
        .nav a,
        .social-icons a {
            font-family: 'Noto', sans-serif;
            font-size: clamp(11px, 1.2vw, 20px);
            color: #918b82;
            text-decoration: none;
            margin-right: 0;
        }
      
        .contact-button {
            margin-left: auto;
            font-size: clamp(8px, 1.2vw, 20px);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: clamp(4px, 0.4vw, 8px) clamp(4px, 2.5vw, 24px);
            border: 1px solid #918b82;
            border-radius: 999px;
            transition: background-color 0.2s ease, color 0.2s ease;
            color: #918b82;
            text-decoration: none;
        }
        .contact-button:hover {
            background-color: #f2f1ec;
            color: #f2f1ec;
        }
        .content2_1text .contact-button {
            margin-top: 24px;
        }
        .nav a:hover,
        .social-icons a:hover {
            color: #000;
        }
        .social-icons a {
            display: inline-flex;
        }
        .social-icons img {
            display: block;
        }
        .logo {
           position: absolute;
           top: clamp(80px, 8vw, 120px);
           width: clamp(120px, 16vw, 260px);
           height: auto;
           z-index: 500; 
        }
        .willkommen {
            position: absolute;
            top: clamp(190px, 14vw, 280px);
            left: 50%;
            transform: translateX(-50%);
            width: min(900px, calc(100vw - 40px));
            text-align: center;
            z-index: 40;
        }
        .willkommen p {
            margin: 0 auto;
            display: inline-block;
        }
        .abstand {
            padding-top: clamp(150px, 10vw, 200px);
        }
        .social-icons {
            display: flex;
            align-items: center;
            gap: clamp(10px, 1.2vw, 15px);
            margin-left: auto; 
        }
        .footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: clamp(50px, 6vw, 140px) 0px clamp(40px, 3vw, 60px) 0px;
            font-size: clamp(11px, 1.2vw, 20px);
            color: #918b82;
            width: 100%; 
        }
        
        .footer p {
            margin: 0;
            font-size: clamp(11px, 1.2vw, 20px);
        }
        
        .video-header {
            position: relative;
            margin-top: 180px !important;
            width: 100vw;
            margin-left: calc(-50vw + 50%);
            max-width: none;
            background-color: #f2f1ec; 
            aspect-ratio: 16 / 9; 
        }
        .video-header video {
            display: none; 
        }
        .video-header canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
            opacity: 0; 
            transition: opacity 0.4s ease-in-out; 
        }
        .content {
            display: flex;
            flex-wrap: nowrap;
            align-items: flex-start;
            gap: clamp(40px, 6vw, 100px);
            margin: clamp(80px, 6vw, 100px) auto 0 auto;
            max-width: calc(100vw - clamp(40px, 10vw, 160px));
        }
        .content img {
            flex: 0 0 clamp(260px, 22vw, 400px);
            max-width: clamp(260px, 22vw, 350px);
            height: auto;
            display: block;
            border-radius: 0px;
        }
        .content_text {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(40px, 5vw, 80px);
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        .content_text h1 {
            font-family: 'Inter', sans-serif;
            grid-column: 1 / -1;
            margin: clamp(30px, 3vw, 40px) 0 clamp(20px, 2vw, 20px) 0;
            font-size: clamp(1.4rem, 4vw, 2rem);
            line-height: 1.1;
            color: #918b82;
        }
        .content_text p {
            font-family: 'Noto', sans-serif;
            margin: 0;
            font-size: clamp(16px, 1.1vw, 20px);
            line-height: 1.7;
            color: #918b82;
            text-align: justify;
            -webkit-hyphens: auto;
            hyphens: auto;
        }
        .content2area {
            position: relative;
            margin: clamp(80px, 6vw, 100px) auto 0 auto;
            width: min(1000px, 70vw);
            max-width: 1000px;
            padding: 0 clamp(20px, 5vw, 80px);
        }
        .content2video {
            width: clamp(420px, 46vw, 640px);
            margin: 0 auto;
            position: relative;
            left: 0;
        }
        .content2video video {
            padding-left: 8%;
            width: 70%;
            height: auto;
            display: block;
        }
        .content2text {
            position: absolute;
            top: 18%;
            left: calc(clamp(20px, 4vw, 40px) - 10%);
            transform: none;
            width: min(520px, 90%);
            max-width: 520px; 
            text-align: left;
            white-space: pre-line;
        }
        .content2text h2 {
            margin: 0;
            font-family: 'Bodoni', serif;  
            font-style: italic;
            font-weight: 200;
            font-size: clamp(1rem, 2.2vw, 1.7rem);
            color: #000;
            line-height: 0.8;
        }
        .content2_1text {
            position: absolute;
            top: 64%;
            left: 53%;    
            transform: translateY(-20%);
            width: clamp(350px, 40vw, 700px);
        }
        .content2_1text p {
            margin-left: clamp(60px, 14vw, 220px); 
            margin-top: 0;
            margin-bottom: 0;
            margin-right: 0;
            font-family: 'Noto', sans-serif;
            font-style: normal;
            font-weight: 400;
            font-size: clamp(16px, 1.1vw, 20px);
            line-height: 1.7;
            text-align: left;
            white-space: normal;
            text-align: justify;
            -webkit-hyphens: auto;
            hyphens: auto;
        }
        .content2_1text .contact-button {
            display: inline-flex;
            margin: clamp(24px, 3vw, 32px) 0 0 auto;
            margin-left: clamp(180px, 14vw, 220px);
            margin-top: clamp(60px, 8vw, 100px);
            border: 1px solid #f2f1ec;
            color:#f2f1ec;
            background-color: black;
            transition: background-color 0.2s ease, color 0.2s ease;
            font-size: clamp(16px, 1.1vw, 20px);
            text-transform: lowercase;
            align-content: center;
            justify-content: center;
            padding: clamp(4px, 2vw, 8px) clamp(25px, 4vw, 30px);
            border-radius: 999px;
        }
        .content2_1text .contact-button:hover {
            background-color: #f2f1ec;
            border: 1px solid black;
            color: #000000;
        }
        .contactbutton {
            color: black;
            background-color: #918b82;
            text-decoration: none;
            font-family: 'Noto', sans-serif;
            font-size: clamp(16px, 1.1vw, 20px);
            padding: clamp(18px, 2vw, 20px) clamp(30px, 4vw, 40px);
            border-radius: 999px;
            display: inline-block;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        @media (min-width: 1600px) {
            .video-header {
                margin-top: calc(140px + 6.5vw) !important;
            }
            .willkommen {
                top: calc(200px + 2vw) !important;
            }
        }

        @media (max-width: 860px) {
            .content {
                gap: clamp(20px, 5vw, 40px);
                flex-wrap: wrap;
            }
            .content img {
                flex: 0 0 clamp(200px, 35vw, 320px);
                max-width: clamp(200px, 35vw, 320px);
            }
            .content_text {
                grid-template-columns: 1fr;
                gap: clamp(20px, 4vw, 40px);
            }
            .content2area {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: clamp(20px, 4vw, 40px);
                width: min(100vw, 100%);
                padding: 0;
                position: relative;
                margin-top: 30%;
            }
            .content2video {
                order: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                margin: 0 auto;
                left: auto;
                position: relative;
            }
            .content2video video {
                padding-left: 0;
                width: 75%;
                max-width: clamp(320px, 45vw, 550px);
                height: auto;
                display: block;
            }
            .content2text {
                order: 2;
                position: absolute;
                top: -11%;
                left: 0;
                transform: none;
                width: 100%;
                z-index: 10;
                font-style: italic;
                font-weight: bold !important;
            }
            .content2_1text {
                order: 3;
                position: relative;
                top: 0;
                left: -5%;
                transform: none;
                width: 100%;
                margin-top: 1rem;
                min-width: auto;
            }
            .content2_1text p {
                margin: 0 0 0 clamp(60px, 14vw, 220px);
                font-family: 'Noto', sans-serif;
                font-style: normal;
                font-weight: 400;
                font-size: clamp(16px, 1.1vw, 20px);
                line-height: 1.7;
                text-align: left;
                white-space: normal;
                padding-right: clamp(20px, 5vw, 50px); 
            }
            .content2_1text .contact-button {
                display: flex; 
                margin-left: auto;  
                margin-right: 0;    
                width: fit-content; 
                margin-top: clamp(24px, 5vw, 40px); 
                border: 1px solid #f2f1ec;
                color: #f2f1ec;
                background-color: black;
                transition: background-color 0.2s ease, color 0.2s ease;
                font-size: clamp(16px, 1.1vw, 20px);
                text-transform: lowercase;
                padding: clamp(4px, 2vw, 8px) clamp(25px, 4vw, 30px);
                border-radius: 999px;
            }
            .logo {
                left: 50%;
                transform: translateX(-50%);
                width: clamp(175px, 30vw, 180px);
            }
            .willkommen {
                position: absolute;
                top: clamp(230px, 15vw, 240px);
                left: 50%;
                transform: translateX(-50%);
                width: min(900px, calc(100vw - 40px));
                text-align: center;
            }
            .abstand {
                padding-top: clamp(80px, 24vw, 90px);
            }
        }

        @media (max-width: 640px) {
            .content img {
                display: none;
            }
            .video-header {
                height: 55vh !important;
                overflow: hidden;
                margin-top: 200px !important;
                aspect-ratio: auto; 
            }
            .video-header canvas {
                width: 100% !important;
                height: 100% !important;
            }
        }

        .leere-zeile {
            height: 2rem; 
        }
        .maps-container {
            width: 100%;
            display: block;
        }
        .datenschutz{
            font-size: clamp(11px, 1.2vw, 20px);
            display: flex;
            justify-content: start;
            margin: clamp(5px, 5vw, 10px) clamp(20px, 5vw, 80px) clamp(40px, 3vw, 60px) 0px;
        }
        .datenschutz a {
            color: #0866ff;
            margin-right: clamp(20px, 5vw, 40px);
        }
        .datenschutz a:hover {    
            color: #000;
        }
        .gallery-grid {
            display:flex;
            flex-direction: row;
            justify-content: center;
            gap: 10px;
            width: 100%;
            max-width: 2000px;
            margin: 0 auto;
            padding: 10px 0; 
        }
        .gallery-column {
            display: flex;
            flex-direction: column;  
            flex: 1;                 
            gap: 10px;               
        }
        .gallery-item {
            background: #f2f1ec;
            padding: 1px;
            
            box-sizing: border-box;
            text-align: center;
        }
        .gallery-item img {
            width: 100%;
            height: auto;
            
            display: block;
        }
        .gallery-item p {
            margin: 1px;
            display: flex;
            justify-content: end;
            font-size: 12px;
            color: #918b82;
        }
        @view-transition{
            navigation: auto;
        }
        ::view-transition-group(root){
            animation-duration: 1s;
            animation-timing-function: ease;
        }
        ::view-transition-old(root){
            animation-name: slide-out;
        }
        ::view-transition-new(root){
            animation-name: slide-in;
        }
        /* 1. Die Navigation aus der Standard-Root-Animation herauslösen */
        .nav {
         view-transition-name: main-navigation;
        }

        /* 2. Definieren, dass die Navigation während des Übergangs einfach starr an Ort und Stelle bleibt */
        ::view-transition-group(main-navigation) {
    animation: none;
    mix-blend-mode: normal;
        }
        
        @keyframes slide-out {
            to{ translate: -100vw; }
        }
        @keyframes slide-in {
            from{ translate: 100vw; }
        }
        .clip-word {
            display: inline-block;
            overflow: hidden;
            vertical-align: bottom;
        }
        #welcome-text {
            font-size: 1.2rem; 
            line-height: 1.3;  
        }