/* overflow: hidden entfernt, damit man scrollen kann */
    body, html { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; background-color: #dfd9c9; }

    /* #region ERSTER BEREICH (Landing Page) */
        .hero-container {
            background-image: url('images/Grotta1.jpeg');
            height: 100vh;
            background-size: cover;
            background-position: center;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
        }

        .hero-container::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.3);
            z-index: 1;
        }

        .content { 
            position: relative; 
            z-index: 2; 
            color: white; 
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1 {
            font-family: 'Playfair Display', serif;
            font-weight: 100;
            font-size: 5.5rem;
            margin-bottom: 20px;
            letter-spacing: 3px;
        }

        .sonderzeichen {
            font-family: 'Playfair Display', serif;
            font-size: 7rem; 
            font-weight: 100; /* Filigran */
            font-style: italic;
            margin: 0 10px;
            line-height: 1;
        }

        .zwischentext {
            font-family: 'Playfair Display', serif;
            font-size: 3rem;
            margin: 5px 0;
            line-height: 1;
        }

        .special-font {
            font-family: 'Ballet', cursive !important; 
            font-size: 6rem; 
            margin-top: -50px;
            margin-left: 10px;
            text-transform: none;
            line-height: 1;
            display: inline-block; /* Damit der negative Margin wirkt */
        }

        .footer-text {
            position: absolute;
            bottom: 50px;
            width: 100%;
            z-index: 2;
            color: white;
            letter-spacing: 6px;
            text-transform: uppercase;
            font-size: 1.5rem;
        }

        /* Countdown Integration */
        #countdown-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 50px; /* Abstand zum Text darüber */
            color: #f1f1e6;
            gap: 15px;
        }

        .cd-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 60px;
        }

        .cd-item span {
            font-family: 'Playfair Display', serif;
            font-size: 2.2rem; /* Etwas kleiner als die H1, um die Hierarchie zu wahren */
            font-weight: 300;
        }

        .cd-item label {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-top: 5px;
            opacity: 0.7;
        }

        .cd-divider {
            font-family: 'Playfair Display', serif;
            font-size: 1.5rem;
            padding-bottom: 20px; /* Schiebt den Doppelpunkt optisch auf die Mitte der Zahlen */
            opacity: 0.4;
        }

    /* #endregion */

    /* #region ZWEITER BEREICH (Beiger Hintergrund) */
        .split-section {
            background-color: #dfd9c9;
            height: 70vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #482117;
        }

        .split-text {
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            font-weight: 200;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.4;
        }
    /* #endregion */

    /* #region DRITTER BEREICH (Anmeldung) */
        .registration-section {
        background-color: #1d2507; /* Ein schönes, mattes Olivgrün */
        min-height: 80vh;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #dfd9c9;
        }
        
        .registration-container {
        max-width: 1000px;
        width: 100%;
        }

        .reg-intro {
        font-family: 'Montserrat', serif;
        font-size: 1.5rem;
        margin: 0;
        font-weight: 100;
        letter-spacing: 1.2px;
        color: #dfd9c9; /* Helles Cremeweiß der vorherigen sektion auf Grün */
        text-align: center;
        hyphens: auto; /* Verbessert den Blocksatz durch Silbentrennung */
        margin-bottom: 60px;
        }

        .reg-intro-strong {
        font-weight: 1000;
        }

        .reg-title {
        font-family: 'Belleza', serif;
        font-size: 5rem;
        text-transform: uppercase;
        color: #dfd9c9; /* Helles Cremeweiß der vorherigen sektion auf Grün */
        font-weight: 100;
        display: block;
        line-height: 2;
        margin-top: -50px;
        }

        /* Formular-Styling */
        .rsvp-form {
            display: flex;
            flex-direction: column;
            gap: 25px;
            text-align: left;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .form-group label {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #dfd9c9; /* Helles Cremeweiß der vorherigen sektion auf Grün */
        }

        .rsvp-form input {
            background: transparent;
            border: none;
            border-bottom: 1px solid rgba(241, 241, 230, 0.5);
            padding: 10px 0;
            color: #dfd9c9; /* Helles Cremeweiß der vorherigen sektion auf Grün */
            font-family: 'Playfair Display', serif;
            letter-spacing: 1.5px;
            font-size: 1.2rem;
            outline: none;
            transition: border-bottom 0.3s;
        }

        .rsvp-form input:focus {
            border-bottom: 1px solid #f1f1e6;
        }

        /* Styling für Dropdown-Menüs (Select) */
        .rsvp-form select {
            background: transparent;
            border: none;
            border-bottom: 1px solid rgba(241, 241, 230, 0.5);
            padding: 10px 0;
            color: #dfd9c9;
            font-family: 'Playfair Display', serif;
            letter-spacing: 1.5px;
            font-size: 1.2rem;
            outline: none;
            cursor: pointer;
            appearance: none; /* Entfernt den Standard-Pfeil des Browsers */
            -webkit-appearance: none;
            -moz-appearance: none;
            /* Optional: Ein dezenter eigener Pfeil als Hintergrundbild */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23dfd9c9' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right center;
            transition: border-bottom 0.3s;
        }

        .rsvp-form select:focus {
            border-bottom: 1px solid #f1f1e6;
        }

        /* Wichtig: Styling der Optionen (das Menü das aufklappt) */
        .rsvp-form option {
            background-color: #6b705c; /* Muss die Hintergrundfarbe deiner Sektion haben */
            color: #dfd9c9;
            font-family: sans-serif; /* Playfair funktioniert in Dropdown-Listen oft nicht */
            padding: 10px;
        }
        
        /* Anreise/Abreise nebeneinander */
        .form-row {
            display: flex;
            gap: 70px;
        }

        .form-row .form-group {
            flex: 1;
        }

        /* Button */
        .submit-button {
            margin-top: 30px;
            background-color: transparent;
            border: 1px solid #f1f1e6;
            color: #f1f1e6;
            padding: 15px;
            font-family: 'Montserrat', sans-serif;
            text-transform: uppercase;
            letter-spacing: 2px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .submit-button:hover {
            background-color: #f1f1e6;
            color: #6b705c;
        }
    /* #endregion */

    /* #region VIERTER & SIEBTER BEREICH (Oliven / Grottammare Bild) */
        .image-section-simple {
        width: 100%;
        background-color: #dfd9c9; /* Falls das Bild lädt oder Ränder entstehen */
      }

        .image-section-simple img {
        width: 100%;     /* Bild nutzt die komplette Breite */
        height: auto;    /* Höhe passt sich automatisch an, kein Zoom/Schnitt */
        display: block;  /* Verhindert einen kleinen weißen Spalt unter dem Bild */
      }
    /* #endregion */
      
    /* #region FÜNFTER BEREICH (Details) */
        .details-section {
          display: flex;
          flex-wrap: nowrap; /* Ermöglicht Umbruch bei kleinen Bildschirmen */
          width: 100%;
          height: 100vh;
          background-color: #dfd9c9;
        }

        /* Linke Seite Sektion 4 */
        .details-image {
          flex: 1;
          width: 50%;
          overflow: hidden;
          min-width: 500px; /* Mindestbreite für kleine Bildschirme */
        }

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

        /* Rechte Seite Sektion 4 */
        .details-text {
          flex: 1;
          width: 50%;
          min-width: 500px;
          padding: 60px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-color: #dfd9c9;
          text-align: center;
          box-sizing: border-box;
        }
        
        .details-text h2 {
          font-family: 'Ballet', serif;
          font-size: 4.5rem;
          margin: 0 0 20px 0;
          color: #482117;
          font-weight: 200;
          line-height: 1.5;
          margin-left: 0px;
        }

        .h3 {
          font-family: 'Belleza', serif;
          font-size: 5rem;
          text-transform: uppercase;
          color: #482117;
          font-weight: 100;
          display: block;
          line-height: 1;
          margin-top: -15px;
          margin-left: 0px;
        }

        .absatz {
          margin-bottom: 30px;
        }

        .absatz h4 {
          font-family: 'Playfair Display', serif;
          font-size: 1.7rem;
          letter-spacing: 1px;
          margin-bottom: 10px;
          color: #482117;
        }

        .absatz p {
          font-family: 'Playfair Display', serif;
          font-size: 1.5rem;
          line-height: 1.6;
          color: #482117;
          margin: 0;
        }
    /* #endregion */

    /* #region SECHSTER BEREICH (Unterkunft) */
        .accommodation-section {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        min-height: 60vh; /* Etwas niedriger als die Hauptsektionen */
        background-color: #1d2507; /* Ein schönes, mattes Olivgrün */
        }

        /* Linke Seite (Titel) */
        .acc-left {
        flex: 1;
        min-width: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        }

        .acc-left h5 {
          text-align: center;
          font-family: 'Ballet', serif;
          font-size: 4.5rem;
          margin: 0 0 20px 0;
          color: #dfd9c9;
          font-weight: 200;
          line-height: 1.3;
          margin-left: 0px;
        }

        .acc-title {
        font-family: 'Belleza', serif;
        font-size: 5rem;
        text-transform: uppercase;
        color: #dfd9c9; /* Helles Cremeweiß der vorherigen sektion auf Grün */
        font-weight: 100;
        display: block;
        line-height: 1;
        margin-top: -15px;
        margin-left: 0px;
        }

        /* Rechte Seite (Text) */
        .acc-right {
        flex: 1;
        min-width: 400px;
        padding: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        }

        .acc-content {
        max-width: 800px;
        text-align: left;
        }

        .acc-content p {
        font-family: 'Playfair Display', serif;
        font-size: 1.4rem;
        line-height: 1.8;
        color: #dfd9c9;
        margin-bottom: 25px;
        text-align: justify;
        hyphens: auto; /* Verbessert den Blocksatz durch Silbentrennung */
        }

        .icon-link {
        display: inline-flex;
        align-items: center;    /* Zentriert Icon und Text vertikal */
        gap: 8px;               /* Abstand zwischen Icon und Text */
        color: #f1f1e6;
        text-decoration: none;
        font-family: 'Playfair Display', serif;
        font-size: 1.2rem;
        transition: all 0.3s ease;
        border-bottom: 1px solid rgba(241, 241, 230, 0.3); /* Dezente Linie unter dem Link */
        padding-bottom: 2px;
        }

        .icon-link:hover {
            border-bottom: 1px solid rgba(241, 241, 230, 1); /* Linie wird beim Hover deutlicher */
            opacity: 0.8;
        }

        /* Styling für das Icon selbst */
        .material-symbols-outlined {
            font-size: 1.4rem;      /* Größe des Icons */
            font-variation-settings: 'wght' 200; /* Macht das Icon extra dünn und edel */
        }
    /* #endregion */

    /* #region ACHTTER BEREICH (Anreise) */
        .travel-section {
        background-color: #dfd9c9; /* Helles Cremeweiß der vorherigen sektion auf Grün */
        min-height: 80vh;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #dfd9c9;
        }
        
        .travel-container {
        max-width: 1000px;
        width: 100%;
        }

        .trav-intro {
        font-family: 'Montserrat', serif;
        font-size: 1.5rem;
        margin: 0;
        font-weight: 100;
        letter-spacing: 1.2px;
        color: #482117;
        text-align: center;
        hyphens: auto; /* Verbessert den Blocksatz durch Silbentrennung */
        margin-bottom: 60px;
        }

        .trav-title {
        font-family: 'Belleza', serif;
        font-size: 5rem;
        text-transform: uppercase;
        color: #482117;
        font-weight: 100;
        display: block;
        line-height: 2;
        margin-top: 50px;
        }

    /* #endregion */

    /* #region Mobile Optimierung */
        @media (max-width: 768px) {
            h1 { font-size: 2.5rem; }
            .sonderzeichen { font-size: 3.5rem; }
            .zwischentext { font-size: 1.5rem; }
            .special-font { font-size: 3.5rem; margin-top: -20px; }
            .footer-text { font-size: 0.8rem; bottom: 30px; letter-spacing: 3px; }
            .details-text { font-size: 1.5rem; }
            .details-image, .details-text {
              flex: 1 0 100%;
              min-width: 100%;
            }
            .details-text {
              padding: 50px 30px;
            }
            .details-text h2 {
              font-size: 2.5rem;
            }
            .acc-left, .acc-right {
              flex: 1 0 100%;
              min-width: 100%;
            }
            .acc-title { font-size: 3rem; padding: 40px 0; }
            .acc-right { padding: 40px 20px; }

            .acc-content p {
            text-align: left; /* Auf dem Handy ist Blocksatz oft schwer lesbar */
            }

            .form-row { flex-direction: column; gap: 25px; }
            .reg-title { font-size: 4rem; margin-top: -20px; }
        }
    /* #endregion */