/*Font/Schrift*/
@font-face {
    font-family: 'Britannic'; /*Hauptschrift*/
    src: url('font/Britannic Bold Regular.ttf') format('truetype');
    }
    @font-face {
      font-family: 'Cambay-Regular'; /*Zwischenschrift*/
      src: url('font/Cambay-Regular.ttf') format('truetype');
      }
    @font-face {
      font-family: 'Cambay-Bold';
      src: url('font/Cambay-Bold.ttf') format('truetype');
         }
    @font-face {
      font-family: 'Poppins-Light'; /*Paragraphs*/
      src: url('font/Poppins/Poppins-Light.ttf') format('truetype');
      }
  :root {
    --braun: #2A2725;
    --beige: #AE8F60;
    --creme: #EAE2D3;
  }
  
  body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: var(--braun);
    font-family: 'Poppins-Light', sans-serif;
    font-size: 18px;
  }
  
  h1 {
    font-size: 48px;
    font-family:'Britannic' ;
    margin: 0;
  }
  h2 {
    font-family:'Britannic' ;
    font-size: 40px;
    margin: 0;
  }

  h3 {
  font-family: 'Cambay-Regular';
  text-shadow: 0 0 10px #ffffff
  }
  
  /* HERO */
  .hero {
    position: relative;
    height: 500px;
  }
  
  .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.3);
  }
  
  .hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    text-align: center;
  }
  
  .hero-content h1 {
    font-size: 56px;
    margin-bottom: 20px;
  }
  
  .hero-content p {
    font-size: 18px;
    margin-bottom: 60px;
  }
  
  .hero-button {
    background: var(--beige);
    padding: 12px 40px;
    border-radius: 30px;
    text-decoration: none;
    color: black;
    font-size:20px;
    font-family: 'Poppins-Light';
    transition: all 0.25s ease;
  }
  .hero-button:hover {
    color: #2A2725;             /* etwas dunkler */
    background: #EAE2D3;
    transform: translateY(-2px);      /* leichtes Anheben */
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  }
  /* ABOUT */
  /*.about-section {
    background: var(--creme);
    display: flex;
    justify-content: space-between;
    padding: 50px 10%;
    gap: 60px;
  } */
  .destination-section {
    max-width: none; 
    margin-top: 0px; /* Abstand oben/unten + links/rechts */
    font-size: 18px;
  }
  
  
  .flex-section {
    display: flex;
    align-items: flex-start; /* Text und Bild oben ausrichten */
    justify-content: space-between;
    gap: 40px;               /* Abstand zwischen Text und Bild */
    max-width: 100%;       /* Gesamtbreite der Section */
    margin: 0 auto;          /* zentrieren */
    padding: 40px 4%;
  }

  .text-content {
    flex: 1;                 /* Text nimmt verfügbaren Platz ein */
    margin-left:100px;
  }

  .image-content {
    flex: 1;
    display: flex;
    justify-content: center; /* bleibt mittig */
    align-items: flex-start;
  }
  
  .image-content img {
    max-width: 270px;
    height: auto;
    transform: translateX(40px); /* 🔥 schiebt es leicht nach rechts */
  }

  .colored-section {
    background-color:#EAE2D3 ;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    /*padding-top: 60px;
    padding-bottom: 60px;*/
  }


  .about-text {
    max-width: 700px;
  }
  
  .about-icon img {
    width: 120px;
  }
  
  /* WIE */
  .wie-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 120px;
    padding: 70px 10%;
    background-color: white;
  }
  
  .example-box {
    flex: 1;
    margin-left: 70px;
    margin-top: 25px;
  }
  
  .example-box p {
    font-family: 'Poppins-Light', sans-serif;
    font-size: 18px;
    color: var(--braun);
    margin: 0;
  }
  
  .example-buttons {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 28px;
  }
  
  .example-buttons span {
    background-color: var(--beige);
    color: white;
    font-family: 'Poppins-Light', sans-serif;
    font-size: 18px;
    padding: 22px 36px;
    border-radius: 35px;
  }
  
  .example-buttons p {
    margin: 0;
  }
  
  .wie-text {
    flex: 1;
    max-width: 560px;
    padding: 0;
  }
  
  .wie-text h2 {
    font-family: 'Britannic';
    font-size: 38px;
    color: var(--braun);
    margin-bottom: 25px;
  }
  
  .wie-text p {
    font-family: 'Poppins-Light', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--braun);
    margin-bottom: 28px;
  }
  
  /* DESTINATION IMAGE */
  .destinations-section {
    padding: 50px 10%;
  }
  
  .bilderkasten {
    margin-top: 40px;
    display: flex;
    justify-content: center;
  }
  
  .bilderkasten img {
    width: 100%;
    max-width: 1800px;
    height: auto;
    border-radius: 25px;
  }
  
  /* CTA */
  .cta-section {
    margin: 50px 10%;
    background: var(--beige);
    border-radius: 30px;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .cta-text h2 {
    color: white;
    max-width: 800px;
    padding-bottom: 25px;
    padding-left: 35px;

  }
  
  .cta-text a {
    color: white;
    font-family: 'Cambay-Regular';
    padding-left: 35px;
    font-size: 35px;
    text-decoration: none;
    transition: all 0.25s ease;
  }
  .cta-text a:hover {
    color: #000000;              /* etwas heller */
    transform: translateX(5px);  /* kleiner Bewegungseffekt */
  }
  
  .cta-image img {
    width: 420px;
    border-radius: 20px;
  }
  
  /* FOOTER */
  footer {
    background: var(--creme);
    padding: 30px;
  }
  /* Footer */
.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6%;
}
.footer-left {
  color: #aaa;
  font-size: 14px;
  font-family: 'Poppins-Light';
  margin-left: 9%;
}
.footer-right {
  display: flex;
  gap: 15px;
  padding-right: 190px;
}
.footer-right a {
  color: #aaa;
  font-size: 14px;
  font-family: 'Poppins-Light';
}
.footer-right a:hover {
  color: #fff;
} 



          @media (max-width: 834px) {

          
            /* ===== TEXT ===== */
            .destination-section h2 {
              font-size: 36px;
            }
          
            .destination-section p {
              font-size: 15px;
            }
          
            /* ===== FLEX SECTIONS ===== */
            .flex-section {
              flex-direction: row;
              gap: 20px;
              position: relative;       /* wichtig für Hintergrundbild */
              overflow: hidden;
            }
          
            .text-content {
              position: relative;
              margin-left: 2px;
              z-index: 1;
              flex: 1;
              max-width: 100%;
            }
          
            .image-content img {
              max-width: 100%;
            }
          
            /* ===== DUBLIN BACKGROUND IMAGE ===== */
            .image-content {
              position: absolute;
              inset: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              z-index: 0;
            }
          
            .image-content img {
              max-width: 70%;
              opacity: 0.15;
              filter: grayscale(100%);
              transform: translateX(20%);
            }

              body {
                font-size: 15px;
              }
            
              h1 {
                font-size: 38px;
              }
            
              h2 {
                font-size: 32px;
              }
            
              /* HERO */
              .hero {
                height: 420px;
              }
            
              .hero-content {
                padding: 0 8%;
              }
            
              .hero-content h1 {
                font-size: 42px;
              }
            
              .hero-content p {
                font-size: 15px;
                margin-bottom: 40px;
              }
            
              .hero-button {
                font-size: 16px;
                padding: 10px 34px;
              }
            
              /* INTRO / COLORED SECTION */
              .flex-section {
                gap: 25px;
                padding: 35px 8%;
              }
            
              .destination-section {
                font-size: 15px;
              }
            
              .image-content img {
                max-width: 70%;
              }
            
              /* WIE SECTION */
              .wie-section {
                flex-direction: column;
                gap: 35px;
                padding: 45px 8%;
              }
            
              .example-box {
                width: 100%;
                flex: none;
                margin-left: 0;
                margin-top: 0;
              }
            
              .example-box p {
                font-size: 15px;
              }
            
              .example-buttons {
                gap: 14px;
                margin-top: 20px;
                flex-wrap: nowrap;
              }
            
              .example-buttons span {
                font-size: 14px;
                padding: 16px 24px;
                border-radius: 30px;
              }
            
              .example-buttons p {
                font-size: 14px;
              }
            
              .wie-text {
                width: 100%;
                max-width: 100%;
              }
            
              .wie-text h2 {
                font-size: 32px;
                margin-bottom: 18px;
              }
            
              .wie-text p {
                font-size: 15px;
                line-height: 1.6;
                margin-bottom: 22px;
              }
            
              /* DESTINATIONS */
              .destinations-section {
                padding: 40px 4%;
              }
            
              .bilderkasten {
                margin-top: 28px;
              }
            
              .bilderkasten img {
                width: 100%;
                max-width: 100%;
                border-radius: 18px;
              }
            
              /* CTA */
              .cta-section {
                margin: 40px 8%;
                padding: 28px 24px;
                flex-direction: column;
                align-items: flex-start;
                gap: 24px;
              }
            
              .cta-text h2 {
                font-size: 30px;
                max-width: 100%;
                padding-left: 0;
                padding-bottom: 20px;
              }
            
              .cta-text a {
                font-size: 28px;
                padding-left: 0;
              }
            
              .cta-image {
                width: 100%;
              }
            
              .cta-image img {
                width: 100%;
                max-width: 100%;
                height: auto;
                border-radius: 18px;
                display: block;
              }
            
              /* FOOTER */
              .footer-content {
                margin-top: 0;
                gap: 20px;
              }
            
              .footer-left {
                margin-left: 0;
                font-size: 12px;

              }
            
              .footer-right {
                padding-right: 0;
                font-size: 12px;
              }
            }