* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Montserrat', serif;
   overflow-x: hidden;
   color: #333;
}

body{
  padding-top: 0;
}


html{
  background-color: #F4EFE8;
  background-image: url("paper-texture.jpg");
  background-repeat: repeat;
  background-size: 600px;
}

body{
  background: transparent;
}

body{
  padding-bottom: env(safe-area-inset-bottom);
}


/* Desktop darf fixed – Mobile lieber nicht */
@media (hover: hover) and (pointer: fine){
  html{ background-attachment: fixed; }
}
@media (hover: none) and (pointer: coarse){
  html{ background-attachment: scroll; }
}

:root{
  --nav-h: 62px;
  --nav-bg: rgba(246,233,228,0.96);
  --nav-border: rgba(0,0,0,0.08);
  --nav-accent: #b88a72;
  --nav-text: #333;
}

/* Sticky */
.top-nav{
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);

  /* Android smoothness */
  transform: translateZ(0);
  will-change: transform;
}

/* Swipebar */
.top-nav-inner{
  display: flex;
  align-items: center;
  gap: 10px;

  min-height: var(--nav-h);
  padding: 10px 18px 10px 14px;
  box-sizing: border-box;

  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;

  /* KEIN snap -> verhindert Springen */
  scroll-snap-type: none;

  scrollbar-width: none;
}
.top-nav-inner::-webkit-scrollbar{ height: 0; }

/* optionaler Fade rechts */
.top-nav::after{
  content:"";
  position:absolute;
  top:0; right:0;
  height:100%;
  width:34px;
  pointer-events:none;
  background: linear-gradient(to left, rgba(246,233,228,0.98), rgba(246,233,228,0));
}

/* Links */
.top-nav .nav-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;
  border-radius: 999px;

  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--nav-text);
  text-decoration: none;

  border: 1px solid rgba(0,0,0,0.02);
  background: rgba(246,233,228,0.35);
  transition: background 150ms ease, border-color 150ms ease;
}

.top-nav .nav-link.is-active{
  border-color: var(--nav-accent);
  background: rgba(184,138,114,0.18);
  color: #222;
}

/* saubere Klick-Offsets (Anker nicht unter Navi) */
html{
  scroll-padding-top: calc(var(--nav-h) + 12px);
  scroll-behavior: smooth;
}
section{
  scroll-margin-top: calc(var(--nav-h) + 12px);
}

/* Desktop: zentrieren, kein Fade */
@media (min-width: 1024px){
  .top-nav-inner{
    justify-content: center;
    /*padding-left: 24px;
    padding-right: 24px;*/

        padding-left: 5rem;
        padding-right: 1rem;
  }
  .top-nav::after{ display:none; }
}



/* =======================================================
   MODUL: Einladung
   ======================================================= */

.floral-corner-left{
  position: relative;
  overflow: hidden; /* wichtig, damit nichts übersteht */
}

/* EINZIGE Blume unten links */
.floral-corner-left::before{
  content: "";
  position: absolute;
  left: -60px;     /* leicht außerhalb starten lassen */
  bottom: -80px;
  width: 300px;    /* Größe anpassen falls nötig */
  height: 300px;

  background-image: url("floral-corner2.png"); /* dein vorhandenes Bild */
  background-size: contain;
  background-repeat: no-repeat;

  opacity: 0.22;   /* sehr wichtig – zart halten */
  pointer-events: none;
  z-index: 0;
}

/* Inhalt über der Blume */
.floral-corner-left > *{
  position: relative;
  z-index: 1;
}



.split-container {
  display: flex;
  flex-direction: row;
  height: 85vh; /* lässt Platz unten sichtbar */
 /*background-color: #e4dad7;*/
 /*background-color: #EFD9D1;*/
  /*background-color: #f6e9e4;*/
}

/* Linke Seite */
.left {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.image-overlay {
  position: relative;
  height: 100%;
}

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


.names-mobile {
  position: absolute;
  top: 20px;
  width: 100%;
  text-align: center;
  font-size: 1rem;
  color: #333;
  z-index: 2;
  font-family: "Amatic SC", sans-serif;
}

/* Rechte Seite */
.right {
  flex: 1;
  /*background-color: #e4dad7;*/
 /*background-color: #EFD9D1;*/
/*background-color: #f6e9e4;*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  text-align: center;
  /*padding: 2rem;*/
  padding:2rem;
  color: #333;
}

/*.names-desktop {
  text-align:center;
  top:20px;
  font-size: 1.5rem;
  color:black;
  font-family: "Amatic SC", sans-serif;
  margin-bottom: 2rem;
  display: none;
  
  }*/


.headline-teil1{
  font-family: 'Snell Roundhand';
  font-weight:100;
  color: #333;
}

/*.headline-script{
  display:block;
  font-family: "Allura", "Dancing Script", cursive;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.headline-teil2{
  display:block;
  font-family: "Playfair Display", serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--accent-rose);
}*/

.headline-teil2{
  font-family: 'Allura', cursive;
  color: #333;
}




.date {
  /*font-size: 1rem;*/
  font-size:2rem;
  /*margin-bottom: 1.5rem;*/
  margin-bottom:1.5rem;
  font-family: 'Amatic SC', serif;
  font-weight:bold;
  color: #333;
}

/*.main-text {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-family: 'Amatic SC', serif;
  font-weight: bold;


}*/

.sub-text {
  font-size: 0.95rem;
  max-width: 350px;
  margin: 0 auto 1.5rem;
  line-height: 1.5;
  font-family: 'Montserrat', serif;
  color: #333;
}


.invite-signature {
  font-size: 0.95rem;
  max-width: 350px;
  margin: 0 auto 1.5rem;
  line-height: 1.5;
  font-family: 'Montserrat', serif;
  color: #333;
}


.signature {
  text-align: center;
  font-size: 1.5rem;
  color: #333;
  font-family: "Amatic SC", sans-serif;
  margin-top:1rem;
}

/*.cta-button {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 14px 26px;
  background-color: #b88a72;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;

}

.cta-button:hover {
  opacity: 0.9;
}*/

.cta-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 0.9rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;

  background: linear-gradient(180deg, rgba(184,138,114,0.95), rgba(184,138,114,0.85));
  color: #fff;

  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
}

/* dezenter Siegel-Glanz */
.cta-button::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 45%);
  transform: rotate(15deg);
  opacity: .65;
}

/* kleiner Siegelpunkt links (Grün) */
/*.cta-button::after{
  content:"";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-sage);
  box-shadow: 0 0 0 4px rgba(127,156,122,0.15);
}*/
.cta-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.14);
}


.rsvp-note {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  line-height:1.5rem;
  color: #333;
  max-width: 350px;

  font-family: 'Montserrat', serif;

}


.heart {
  font-size: 1.5rem;
}


#herzsymbol {
  color: #b88a72;
  font-size:1.5rem; 
  margin-top:2rem
 

}

/* =======================================================
   MODUL: Kategorien
   ======================================================= */

.category-section{
  padding: 2rem; /*3rem 2rem*/
  /*background-color:#EFD9D1;*/
  /*background-color:#f6e9e4;*/
   /*background-color:#9CAF8820;*/

}

/* Header */
.category-header{
  display: flex;
  align-items: center;
  justify-content: left; /*center*/
  gap: 12px;
  margin-bottom: 1.7rem;
}

.category-header-icon{
  color: #b88a72;
  font-size: 2rem; /*1.2rem*/
}



.category-title{
  font-family: "Amatic SC", sans-serif;
  font-size: 2.5rem;
  letter-spacing: 1px;
  margin: 0;
}


.category-grid{
  max-width: 1000px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1rem;
  text-align: center;
}

.category-item{
  text-decoration: none;
  color: #333;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-bottom:0.5rem;
}

.category-circle{
  width: 120px;
  height: 120px;
  border-radius: 50%;
  /*background: #ffffff;*/

  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: solid #b88a72;
}

.category-circle i{
  font-size: 2.8rem;
  color: #b88a72;
}

.category-item span{
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
}

/* Hover nur dezent */
.category-item:hover .category-circle{
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}


/* Desktop: alles in einer Reihe (6 Spalten) */
@media (min-width: 1024px){
  .category-grid{
    grid-template-columns: repeat(6, 1fr);
    gap: 2.5rem 1.6rem;
  }
}

/* Tablet */
@media (max-width: 480px){
  .category-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 480px){
  /*.category-grid{
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }*/

  .category-circle{
    width: 100px;
    height: 100px;
  }

  .category-circle i{
    font-size: 2.4rem;
  }
}

/* Sehr kleine Screens: Kreise etwas kleiner */
@media (max-width: 390px){
  .category-circle{
    width: 80px;
    height: 80px;
  }
  .category-circle i{
    font-size: 2rem;
  }
  .category-item span{
    font-size: 1.0rem;
  }
}

/* Mobile */
@media (max-width: 480px){

  .category-title{
    font-size: 2.2rem;
  }

  .category-icon-img{
    width: 38px;
    height: 38px;
    
  }

  .category-header-icon{
    display:none;
    
  }



}



/* =======================================================
   MODUL: TAGESABLAUF / TIMELINE (NEU, CLEAN, DURCHGEHEND)
   Voraussetzung im HTML:
   - <section class="timeline-section" id="schedule">
   - .timeline-wrap, .timeline-header, .timeline
   - Items: .timeline-item + .timeline-icon + .timeline-line + .timeline-content
   - Dot: <span class="timeline-dot"></span>
   - Icon als Bild: <img class="timeline-icon-img" ...>
   ======================================================= */

/* Section */
.timeline-section{
  padding: 2rem; /*3.5rem 1.5rem*/
  /*background: #fff; /* später leicht tauschbar */
  color: #333;
}

.timeline-wrap{
  max-width: 760px; /*900px*/
  margin: 0 auto;
}

/* Header */
.timeline-header{
  display: flex;
  align-items: center;
  justify-content: left; /*center*/
  gap: 12px;
  margin-bottom: 1.7rem;
  color: #333;
}

.timeline-header-icon{
  color: #b88a72;
  font-size: 2rem; /*1.2rem*/
}

.timeline-title{
  font-family: "Amatic SC", sans-serif;
  font-size: 2.5rem;
  letter-spacing: 1px;
  margin: 0;
  color: #333;
}

/* Timeline Grid + “echte” durchgehende Linie */
.timeline{
  /* Diese Variablen steuern alles – auch die Linienposition */
  --icon-col: 92px;
  --line-col: 26px;
  --gap-col: 18px;

  position: relative;
  display: grid;
  gap: 26px;
  margin-top: 1rem;
}

/* Eine einzige Linie für die gesamte Timeline */
.timeline::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  /* Linie sitzt genau in der Mitte der "line-col" Spalte */
  left: calc(var(--icon-col) + var(--gap-col) + (var(--line-col) / 2));
  transform: translateX(-50%);

  width: 2px;
  background:#333 ; /*rgba(0,0,0,0.32)*/
  border-radius: 2px;
}

/* Item Layout */
.timeline-item{
  display: grid;
  grid-template-columns: var(--icon-col) var(--line-col) 1fr;
  column-gap: var(--gap-col);
  align-items: start;
}

/* Icon (Bild) */
.timeline-icon{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 2px;
}

.timeline-icon-img{
  width: 44px;   /* größer wie gewünscht */
  height: 44px;
  object-fit: contain;
  display: block;
}

/* Line-Spalte: nur für den Punkt (keine eigene Linie mehr!) */
.timeline-line{
  position: relative;
  min-height: 22px; /* reicht, weil die Linie global ist */

}

.timeline-dot{
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);

  width: 11px;
  height: 11px;
  background: #fff;
  border: 2px solid #333;
  border-radius: 50%;
  z-index: 2;
}

/* Text */
.timeline-content{
  text-align: left;
}

.timeline-time{
  font-family: "Montserrat", sans-serif;
  font-size: 0.875rem;
  margin-bottom: 4px;
  color: #222;
}

.timeline-heading{
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 3px;
  color: #333;
}

.timeline-sub{
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333;
}

/* Kleiner Divider unten (optional) */
/*.timeline-divider{
  margin-top: 2.6rem;
  display: flex;
  justify-content: center;
}

.timeline-divider span{
  width: 180px;
  height: 2px;
  border-radius: 2px;
  background: rgba(184,138,114,0.55);
}*/

/* Mobile */
@media (max-width: 480px){
  .timeline{
    --icon-col: 74px;
    --line-col: 22px;
    --gap-col: 14px;
    gap: 22px;
  }

  .timeline-title{
    font-size: 2.2rem;
  }

  .timeline-icon-img{
    width: 38px;
    height: 38px;
  }

  .timeline-heading{
    font-size: 1rem;
  }
}





/* =======================================================
    Trenner
   ======================================================= */

.section-separator{
  background: transparent;   /* oder #fff, je nach Section */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Abstand drastisch runter */
  /*padding: 8px 0 12px;*/
  margin: 0;
}

.section-separator img{
  /* deutlich größer */
  width: min(620px, 88vw);
  height: auto;
  display: block;
  padding:2px;
}

.section-divider {
  margin: 3rem 0;
}

.section-divider svg {
  width: 100%;
  height: 60px;
}




/* =======================================================
   MODUL: Location
   ======================================================= */


.floral-corners{
  position: relative;
  overflow: hidden;
}

/* Du brauchst 1 florales PNG/SVG (transparent), z.B. floral-corner.png */
.floral-corners::before,
.floral-corners::after{
  content:"";
  position:absolute;
  width: 320px;
  height: 320px;
  background-image: url("floral-corner.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.22;
  pointer-events: none;
  filter: saturate(0.9);
}

.floral-corners::before{
  left: -90px;
  bottom: -110px;
  transform: rotate(-6deg);
}

.floral-corners::after{
  right: -110px;
  top: -120px;
  transform: scaleX(-1) rotate(8deg);
}



/* Header */
.location-header{
  display: flex;
  align-items: center;
  justify-content: left; /*center*/
  gap: 12px;
  margin-bottom: 1.7rem;
  color: #333;
}

.location-header-icon{
  color: #b88a72;
  font-size: 2rem; /*1.2rem*/
}

.location-title{
  font-family: "Amatic SC", sans-serif;
  font-size: 2.5rem;
  letter-spacing: 1px;
  margin: 0;
}

.location-image {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  text-align:left;
}

.location-address {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.875rem;
  color: #333;
  margin-bottom: 1.7rem;
  text-align:left;
  opacity: 0.8rem;
 
}

.location-section {
  /*background-color: #ffffff;*/
  /*padding: 4rem 1.5rem;*/
  padding: 2rem;
  /*text-align: center;*/
  color: #333;
}

.location-content {
  max-width: 1000px;
  margin: 0 auto;
}

.location-icon svg {
  margin-bottom: 1rem;

}

.location-title {
  font-family: 'Amatic SC', sans-serif;
  font-size: 2.5rem;
  color: #333;
  /*margin-bottom: 1rem;*/
}

.location-text,
.location-note {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #333;
  margin-bottom: 1rem;
  line-height: 1.5;
  text-align:left;
}


.location-card {
  font-size:1rem;
  color: #333;
}

.flower-image {
  text-align:center;
}

.flower-image img {
  max-width: 180px;
  /*margin-bottom:2rem;*/
  max-height: 100px;
  text-align:center;
}


/* Mobile */
@media (max-width: 480px){

  .location-title{
    font-size: 2.2rem;
  }

  .location-icon-img{
    width: 38px;
    height: 38px;
  }

}




.location-card {
  text-align: center;
  padding: 2rem;
  border: 1px solid #e1d6cd;
  border-radius: 12px;
  line-height:1.5rem;
}
.location-card i {
  font-size: 2rem;
  color: #b88a72;
  margin-bottom: 0.5rem;
}


/* =======================================================
   MODUL: Unterkunft
   ======================================================= */


.accommodation-section {
 /*background-color: #e4dad7;*/
 /*background-color: #EFD9D1;*/
  /*background-color: #f6e9e4;*/
  /*padding: 4rem 1.5rem;*/
  padding:2rem;
  color: #333;
  
}

.accommodation-content {
  max-width: 1000px;
  margin: 0 auto;
  color: #333;

}

.accommodation-icon {
  margin-bottom: 1rem;
  text-align: center;
}

.section-title {
  font-family: 'Amatic SC', sans-serif;
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;

  }

.section-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #333;
  margin-bottom: 1.7rem;
  line-height: 1.5;
  text-align:left;
  /*text-align:center;*/


}

.section-text2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #333;
  line-height: 1.5;
  text-align:left;
  /*text-align:center;*/


}




.hotel-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: #333;
  /*margin-top: 2rem;*/
  /*margin-top: 3rem;*/
  margin-bottom: 1rem;
  text-align:left;

 
}

.hotel-image {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  text-align:left;
}

.hotel-address {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.875rem;
  color: #333;
  margin-bottom: 1.7rem;
  text-align:left;
  opacity: 0.8rem;
 
}




.info-reservierung-hotel {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    margin-top: 1rem;
    margin-bottom: 3rem;
    color: #333;
  }

  .info-reservierung-hotel li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 1rem;
    color: #333;
  }

  .info-reservierung-hotel i {
    flex-shrink: 0;
    color: #333;
    margin-top: 4px;
    font-size: 1rem;
    width: 22px;
    text-align: center;
  }

  .info-reservierung-hotel .text-block {
    flex: 1;
    line-height: 1.5;
  }

  .info-reservierung-hotel a {
    color: inherit;
    text-decoration: none;
  }


/* Header */
.accommodation-header{
  display: flex;
  align-items: center;
  justify-content: left; /*center*/
  gap: 12px;
  margin-bottom: 1.7rem;
  color: #333;
}

.accommodation-header-icon{
  color: #b88a72;
  font-size: 2rem; /*1.2rem*/
}

.accommodation-title{
  font-family: "Amatic SC", sans-serif;
  font-size: 2.8rem;
  letter-spacing: 1px;
  margin: 0;
  color: #333;
}

/* Mobile */
@media (max-width: 480px){

  .accommodation-title{
    font-size: 2.2rem;
  }

  .accommodation-header-icon{
    width: 38px;
    height: 38px;
  }

}

 @media (max-width: 480px) {
    .info-reservierung-hotel li {
      font-size:1rem;
    }

    .info-reservierung-hotel i {
      font-size: 1rem;
      width: 18px;
      margin-top: 5px;
    }
  }



/* =======================================================
   MODUL: Shuttle
   ======================================================= */

/* Header */
.shuttle-header{
  display: flex;
  align-items: center;
  justify-content: left; /*center*/
  gap: 12px;
  margin-bottom: 1.7rem;
  color: #333;
}

.shuttle-header-icon{
  color: #b88a72;
  font-size: 2rem; /*1.2rem*/
}

.shuttle-title{
  font-family: "Amatic SC", sans-serif;
  font-size: 2.8rem;
  letter-spacing: 1px;
  margin: 0;
  color: #333;
}



.shuttle-section {
  /*background-color: #ffffff;*/
  /*padding: 4rem 1.5rem;*/
  padding: 2rem;
  text-align: center;
  color: #333;
}

.shuttle-content {
  max-width: 1000px;
  margin: 0 auto;
  color: #333;
}


.shuttle-text,
.shuttle-note {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #333;
  /*margin-bottom: 1rem;*/
  line-height: 1.5;
  text-align:left;
}

@media (max-width: 480px){

  .shuttle-title{
    font-size: 2.2rem;
  }

  .shuttle-header-icon{
    width: 38px;
    height: 38px;
  }

}


/* =======================================================
   MODUL: FAQ
   ======================================================= */

/* FAQ Section */
.faq-section{
  /*background-color: #EFD9D1;*/
  padding: 2rem; /* überall 3rem */
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  color: #333;
}

.faq-wrap{
  max-width: 1000px;
  margin: 0 auto;
}

/* Subtitle */
.faq-subtitle{
  margin: -1.2rem 0 1.2rem; /* etwas näher an den Header */
  /*opacity: 0.8;*/
  line-height: 1.5;
  margin-bottom: 1.7rem;
  color: #333;
}

/* FAQ List */
.faq-list{
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  color: #333;
}

/* FAQ Item */
.faq-item{
  /*background: #fff;*/
  border-radius: 12px;
  border: 1px solid #b88a72;
  overflow: hidden;
  color: #333;
}

/* Hidden extras by default */
.faq-extra{
  display: none;
}

.faq-item summary{
  cursor: pointer;
  padding: 0.95rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  font-weight: 600;
  line-height: 1.5;
  color: #333;
}

.faq-item summary::-webkit-details-marker{
  display: none;
}

/* Chevron */
.faq-chevron{
  width: 16px;
  height: 16px;
  position: relative;
  flex: 0 0 16px;
  margin-left: 10px;
}

.faq-chevron::before,
.faq-chevron::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 2px;
  background: #b88a72;
  border-radius: 2px;
}

.faq-chevron::before{
  left: 0;
  transform: translateY(-50%) rotate(45deg);
}

.faq-chevron::after{
  right: 0;
  transform: translateY(-50%) rotate(-45deg);
}

.faq-item[open] summary{
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.faq-item[open] .faq-chevron{
  transform: rotate(180deg);
}

/* Answer */
.faq-answer{
  padding: 1rem 1rem 1rem;
  line-height: 1.6;
  font-size: 1rem;
  color: #333;
}

/* Toggle Button */
.faq-toggle{
  margin: 1rem auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.1rem;
  border-radius: 999px;
  border: 1px solid #b88a72;
  background: #f6e9e4;
  color: #333;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
 }

/*.faq-toggle:hover{
  background: #b88a72;
}*/

/* Back to top */
.faq-top{
  display: block;
  text-align: center;
  margin-top: 1.2rem;
  color: #b88a72;
  text-decoration: none;
  font-weight: 600;
}

.faq-top:hover{
  text-decoration: underline;
}


.faq-links{


}

/* Mobile */
@media (max-width: 480px){
  .shuttle-title{
    font-size: 2.2rem;
  }

  .shuttle-header-icon{
    width: 38px;
    height: 38px;
  }

  .faq-wrap{
    max-width: 560px;
  }
}

/* =======================================================
    Modul: Kontakte
   ======================================================= */

/* Section */
.contacts-section{
  padding: 2rem;
  /*max-width: 1000px;
  margin: 0 auto;*/
  color: #333;
}

.contacts-wrap{
  max-width: 1000px;
  margin: 0 auto;
}

/* Header (wie bei dir) */
.contacts-header{
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 12px;
  margin-bottom: 1.7rem;
  color: #333;
}

.contacts-header-icon{
  color: #b88a72;
  font-size: 2rem;
}

.contacts-title{
  font-family: "Amatic SC", sans-serif;
  font-size: 2.5rem;
  letter-spacing: 1px;
  margin: 0;
  color: #333;
}

/* Block-Überschriften */
.contacts-subtitle{
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin: 2.0rem 0 1.2rem;
}

/* Grid: Desktop 2 Spalten, Mobile 1 Spalte */
.contacts-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 3.2rem;
  margin-bottom: 1.2rem;
}

/* Einzelner Kontakt */
.contact-compact{
  padding: 0.2rem 0;
}

/* Name (Amatic) */
.contact-name{
  font-family: "Amatic SC", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: #333;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Rolle (Montserrat) */
.contact-role{
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  color: #333;
  margin: 0.2rem 0 0.55rem;
}

/* Kompakte Kontaktzeile (eine Zeile statt 2-3 Zeilen) */
.contact-line{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;

  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  color: #444;
}

.contact-line i{
  color: #b88a72;
  font-size: 1rem;
}

.contact-line a{
  color: #b88a72;
  text-decoration: underline;
  white-space: nowrap;
}

.contact-line .dot{
  color: #b88a72;
  margin: 0 4px;
}



/* Mobile */
@media (max-width: 480px){
  .contacts-title{
    font-size: 2.2rem;
  }

  .contacts-header-icon{
     width: 38px;
    height: 38px;
    /*font-size: 1.8rem;*/
  }

  .contacts-subtitle{
    font-size: 1.25rem;     /* kleiner */
    margin: 1.6rem 0 0.8rem; /* weniger Abstand */
  }


.contacts-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* <<< 2 pro Zeile */
    gap: 1.0rem 1.2rem;     /* kompakter */
    margin-bottom: 0.6rem;
  }

  .contact-compact{
    padding: 0;             /* weniger Luft */
  }

  .contact-name{
    font-size: 1.25rem;     /* kleiner */
    letter-spacing: 0.3px;
  }

  .contact-role{
    font-size: 0.92rem;
    margin: 0.15rem 0 0.35rem;
  }

  .contact-line{
    font-size: 0.85rem;
    gap: 5px;
  }

  .contact-line i{
    font-size: 0.85rem;
  }

  .contact-line a{
    white-space: normal;    /* erlaubt Umbruch, falls Nummer lang ist */
  }
}

/* Sehr kleine Screens: wieder 1 Spalte, damit nichts gequetscht wirkt 
@media (max-width: 360px){
  .contacts-grid{
    grid-template-columns: 1fr;
  }
}*/

/* =======================================================
    Modul: Closing Section
   ======================================================= */


.closing-section {
  /*background-color: #ffffff;*/
  /*padding: 3rem 1.5rem;*/
  padding:2rem;
  text-align: center;
  color: #333;
}

.closing-text .montserrat {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  margin-top: 2rem;
  margin-bottom: 1.2rem;
  color: #333;
}

.closing-text .amatic {
  font-family: 'Amatic SC', sans-serif;
  font-size: 2rem;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
  position: relative;
  color: #333;
}

.heart-icon {
  /*margin-top: 1rem;*/
  /*margin-top: 3rem;*/
}

/* Back to top */
.einladung-top{
  display: block;
  text-align: center;
  margin-top: 1.2rem;
  color: #b88a72;
  text-decoration: none;
  font-weight: 600;
}

.einladung-top:hover{
  text-decoration: underline;
}


/* =======================================================
    Flower Corner Right
   ======================================================= */

.floral-corner-right{
  position: relative;
  overflow: hidden;
}

/* EINZIGE Blume unten rechts */
.floral-corner-right::after{
  content: "";
  position: absolute;
  right: -60px;      /* leicht außerhalb starten lassen */
  bottom: -80px;
  width: 200px;
  height: 200px;

  background-image: url("floral-corner2.png"); /* gleiches Bild */
  background-size: contain;
  background-repeat: no-repeat;

 transform: scaleX(-1); /* spiegelt die Blume */
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}

/* Inhalt über der Blume */
.floral-corner-right > *{
  position: relative;
  z-index: 1;
}



/* =======================================================
    Schriftarten
   ======================================================= */

.amatic-sc-regular {
  font-family: "Amatic SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.amatic-sc-bold {
  font-family: "Amatic SC", sans-serif;
  font-weight: 700;
  font-style: normal;
}


.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.hurricane-regular {
  font-family: "Hurricane", cursive;
  font-weight: 400;
  font-style: normal;
}


.playfair-display-<uniquifier> {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


.allura-regular {
  font-family: "Allura", cursive;
  font-weight: 400;
  font-style: normal;
}






/* =======================================================
    Mobileoptimierung
   ======================================================= */
@media (max-width: 767px) {
  .split-container {
    flex-direction: column;
    height: auto;
    /*background-color:#fff;*/
  }

  .left, .right {
    width: 100%;
    height: auto;
    /*background-color:#fff; */
  }

  /*.image-overlay img {

    height: 430px;
  }*/

  .names-mobile {
    /*font-size: 1.5rem;*/
    font-size: 1.8rem;
    top: 15px;
  }

  .names-desktop {
    display:none;
  }


  .headline {
      margin-bottom: 1.2rem;
      font-size:2.8rem;
  }


  #rsvp-note-desktop {
    display:none;
 }

 .category-section{
  padding: 2rem; /*3rem 2rem*/
  /*background-color:#EFD9D1;*/
  /*background-color:#f6e9e450;*/
  /* background-color:#9CAF8820;*/

}



}

/*kleinere Bildschirme*/
@media (max-width: 450px) {

 .category-section{
 
  background-color:#f6e9e450;
  /* background-color:#9CAF8820;*/

}

 }


@media (max-width: 540px) {


.category-section{
  background-color:#f6e9e450;
}


.category-header-icon{
  display:none;
}



 }



/*kleinere Bildschirme*/
@media (max-width: 412px) {


   .faq-answer {
   font-size:0.9rem;
 }



 }


/*kleinere Bildschirme*/
@media (max-width: 393px) {


  .headline {
    font-size: 2.5rem;

    } 

    #rsvp-note-desktop {
    display:none;
 }

   .faq-answer {
   font-size:0.9rem;
 }



 }


/*kleinere Bildschirme*/
@media (max-width: 360px) {

  .headline {
    font-size: 2rem;
    margin-bottom: 1rem;

    } 


 .sub-text {
    font-size: 0.85rem;
    margin:0 auto 1rem;
    } 


 .date {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    } 

 .invite-signature{
    font-size: 0.85rem;

    } 

    .signature{
    font-size: 1.3rem;

    } 

     .rsvp-note{
    font-size: 0.85rem;

    } 


 .cta-button {
    font-size: 0.8rem;

    } 



  .category-title {
    font-size: 2rem;

    } 

 .category-item span{
    font-size: 0.85rem;

    } 

     .timeline-title {
    font-size: 2rem;

    } 

 .timeline-heading{
    font-size: 0.85rem;

    } 

    .timeline-time{
    font-size: 0.75rem;

    } 

     .timeline-sub{
    font-size: 0.8rem;

    } 

    .timeline-header-icon {
    color: #b88a72;
    font-size: 1.9rem;
}

        .location-title {
    font-size: 2rem;

    } 


    .location-text {
    font-size: 0.85rem;

    } 

     .location-card {
    font-size: 0.85rem;

    } 


     .location-address {
    font-size: 0.75rem;

    } 

    .location-header-icon {
    color: #b88a72;
    font-size: 1.9rem;
    }


    .accommodation-header-icon {
    color: #b88a72;
    font-size: 1.9rem;
  }

      .accommodation-title {
        font-size: 2rem;
    }

    .section-text {
    
    font-size: 0.85rem;
    
}

.hotel-address {
    
    font-size: 0.75rem;
  
}

.section-text2 {
    
    font-size: 0.85rem;
  
}

    .info-reservierung-hotel li {
        font-size: 0.85rem;
    }


.hotel-name {
    
    font-weight: 600;
    font-size: 1rem;
    
}

    .shuttle-header-icon {
        font-size:1.9rem;
    }

    .shuttle-title {
        font-size: 2rem;
    }

    .shuttle-text, .shuttle-note {
    font-size: 0.85rem;
  

 }

.faq-subtitle {
    font-size:0.85rem;
}

.faq-item {
    font-size:0.85rem;
}

.faq-answer {
    font-size:0.8rem;
}

 .contacts-header-icon {
        font-size:1.9rem;
    }

  .contacts-title {
        font-size: 2rem;
    }

  .contacts-subtitle {
    font-size:1rem;
}

    .contact-name {
        font-size: 1.25rem;
        
    }
    .contact-role {
        font-size: 0.75rem;
       
    }

        .contact-line {
        font-size: 0.8rem;
        
    }



 }

 /*kleinere Bildschirme*/
@media (max-width: 375px) {


   .faq-answer {
   font-size:0.85rem;
 }



 }


/*kleinere Bildschirme*/
@media (max-width: 344px) {

    .headline {
    font-size: 1.8rem;
    margin-bottom: 1rem;

    } 


 .sub-text {
    font-size: 0.8rem;
    margin:0 auto 1rem;
    } 


 .date {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    } 

 .invite-signature{
    font-size: 0.8rem;

    } 

    .signature{
    font-size: 1rem;

    } 

     .rsvp-note{
    font-size: 0.8rem;

    } 


 .cta-button {
    font-size: 0.75rem;

    } 


   } 


/*kleinere Bildschirme*/
@media (max-width: 320px) {

    .headline {
    font-size: 1.8rem;
    margin-bottom: 1rem;

    } 


 .sub-text {
    font-size: 0.8rem;
    margin:0 auto 1rem;
    } 


 .date {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    } 

 .invite-signature{
    font-size: 0.8rem;

    } 

    .signature{
    font-size: 1rem;

    } 

     .rsvp-note{
    font-size: 0.8rem;

    } 


 .cta-button {
    font-size: 0.75rem;

    } 



  .category-title {
    font-size: 1.7rem;

    } 

 .category-item span{
    font-size: 0.80rem;

    } 

     .timeline-title {
    font-size: 1.7rem;

    } 

 .timeline-heading{
    font-size: 0.80rem;

    } 

    .timeline-time{
    font-size: 0.7rem;

    } 

     .timeline-sub{
    font-size: 0.75rem;

    } 

    .timeline-header-icon {
    color: #b88a72;
    font-size: 1.9rem;
}

        .location-title {
    font-size: 1.7rem;

    } 


    .location-text {
    font-size: 0.8rem;

    } 

     .location-card {
    font-size: 0.8rem;

    } 


     .location-address {
    font-size: 0.7rem;

    } 

    .location-header-icon {
    color: #b88a72;
    font-size: 1.9rem;
    }


    .accommodation-header-icon {
    color: #b88a72;
    font-size: 1.9rem;
  }

      .accommodation-title {
        font-size: 1.7rem;
    }

    .section-text {
    
    font-size: 0.8rem;
    
}

.hotel-address {
    
    font-size: 0.7rem;
  
}

.section-text2 {
    
    font-size: 0.8rem;
  
}

    .info-reservierung-hotel li {
        font-size: 0.8rem;
    }


.hotel-name {
    
    font-weight: 600;
    font-size: 0.9rem;
    
}

    .shuttle-header-icon {
        font-size:1.9rem;
    }

    .shuttle-title {
        font-size: 1.7rem;
    }

    .shuttle-text, .shuttle-note {
    font-size: 0.8rem;
  

 }

.faq-subtitle {
    font-size:0.8rem;
}

.faq-item {
    font-size:0.8rem;
}

.faq-answer {
    font-size:0.8rem;
}

 .contacts-header-icon {
        font-size:1.9rem;
    }

  .contacts-title {
        font-size: 1.7rem;
    }

  .contacts-subtitle {
    font-size:0.9rem;
}

    .contact-name {
        font-size: 1rem;
        
    }
    .contact-role {
        font-size: 0.7rem;
       
    }

        .contact-line {
        font-size: 0.7rem;
        
    }



 }












/* =======================================================
    Desktopoptimierung
   ======================================================= */



@media (min-width: 768px) {


.split-container {
  display: flex;
  flex-direction: row;
  height: 85vh; /* lässt Platz unten sichtbar */
 /*background-color: #e4dad7;*/
 /*background-color: #EFD9D1;*/
  background-color: #f6e9e4;
}


   #rsvp-note-mobile {
    display:none;
 }


 .names-mobile {
    display:none;
  }


 .names-desktop{
    display:none;
  }

  .headline {
    font-size: 2.9rem;
    margin-bottom:1.5rem;

    } 



.category-section{
  /*background-color:#fff;*/
 } 


  .category-title {
    font-size: 2.8rem;
  }

.category-circle{
  border: solid #b88a72;

 }  

    .timeline-wrap{
  /*margin-left:40.5%;*/
  max-width: 1000px;
}

  .timeline-title {
    font-size: 2.8rem;
  }

  .location-title {
    font-size: 2.8rem;
  }

  .location-text,
  .location-note {
    font-size: 1.125rem;
  }

  .location-image img {
    max-width: 250px;
  }

  .accommodation-title {
    font-size: 2.8rem;
  }

.section-title {
    font-size: 3.5rem;
  }

  .section-text {
    font-size: 1.125rem;
  }

  .hotel-name {
    font-size: 1.5rem;
  }

  .hotel-address {
    font-size: 1rem;
  }

  .hotel-image {
    max-width: 600px;
  }

   .location-address {
    font-size: 1rem;
  }

  .location-image {
    max-width: 600px;
  }


  .shuttle-title {
    font-size: 2.8rem;
  }

 .contacts-title {
    font-size: 2.8rem;
  }


.closing-section {
    padding: 4rem 2rem;
  }

  .flower-image img {
    max-width: 220px;
    margin-bottom: 2.5rem;
    max-height: 150px;
  }

  .closing-text .montserrat {
    font-size: 1.4rem;
  }

  .closing-text .amatic {
    font-size: 2.5rem;
  }

  .heart-icon svg {
    width: 40px;
    height: 40px;
  }

.timeline-title{
  font-size: 2.8rem;
 
}

.floral-corner-right::after{
  height: 300px;
  width:300px;

  }


}


@media (min-width: 853px) {


.split-container {
  height: 85vh; /* lässt Platz unten sichtbar */
}


}

@media (width: 844px) {


.split-container {
  height: 190vh; /* lässt Platz unten sichtbar */
}

.headline {
  margin-top: 0;
}

.sub-text {
  font-size:0.95rem;
}

.date {
  margin-bottom: 1rem;
}


.signature {
  font-size: 1.5rem;
}


#rsvp-note-desktop{
  font-size:0.95rem;
}

}

@media (width: 882px) {


.split-container {
  height: 200vh; /* lässt Platz unten sichtbar */
}

.headline {
  margin-top: 0;
}

.sub-text {
  font-size:0.95rem;
}

.date {
  margin-bottom: 1rem;
}


.signature {
  font-size: 1.5rem;
}


#rsvp-note-desktop{
  font-size:0.95rem;
}

}

@media (width: 896px) {


.split-container {
  height: 190vh; /* lässt Platz unten sichtbar */
}

.headline {
  margin-top: 0;
}

.sub-text {
  font-size:0.95rem;
}

.date {
  margin-bottom: 1rem;
}


.signature {
  font-size: 1.5rem;
}


#rsvp-note-desktop{
  font-size:0.95rem;
}

}

@media (width: 914px) {


.split-container {
  height: 190vh; /* lässt Platz unten sichtbar */
}

.headline {
  margin-top: 0;
}

.sub-text {
  font-size:0.95rem;
}

.date {
  margin-bottom: 1rem;
}


.signature {
  font-size: 1.5rem;
}


#rsvp-note-desktop{
  font-size:0.95rem;
}

}

@media (width: 915px) {


.split-container {
  height: 190vh; /* lässt Platz unten sichtbar */
}

.headline {
  margin-top: 0;
}

.sub-text {
  font-size:0.95rem;
}

.date {
  margin-bottom: 1rem;
}


.signature {
  font-size: 1.5rem;
}


#rsvp-note-desktop{
  font-size:0.95rem;
}

}


@media (width: 932px) {


.split-container {
  height: 190vh; /* lässt Platz unten sichtbar */
}

.headline {
  margin-top: 0;
}

.sub-text {
  font-size:0.95rem;
}

.date {
  margin-bottom: 1rem;
}


.signature {
  font-size: 1.5rem;
}


#rsvp-note-desktop{
  font-size:0.95rem;
}

}

@media (min-width: 1000px) {


.split-container {
  height: 80vh; /* lässt Platz unten sichtbar */
}

.headline {
  margin-top: 0;
}

.sub-text {
  font-size:0.95rem;
  max-width: 500px;
}

.date {
  margin-bottom: 1rem;
}


.signature {
  font-size: 1.5rem;
}


#rsvp-note-desktop{
  font-size:0.95rem;
  max-width: 500px;
}

}


@media (min-width: 1024px) {


.split-container {
  height: 85vh; /* lässt Platz unten sichtbar */
}

#herzsymbol {
  margin-top: 1rem;
}

.headline{
  margin-bottom:0.5rem;

}

.sub-text {
  font-size:0.9rem;
  max-width: 500px;
}

.date {
  margin-bottom: 1rem;
}


.signature {
  font-size: 1.5rem;
}


#rsvp-note-desktop{
  font-size:0.9rem;
  max-width: 500px;
}

}


@media (min-width: 1114px) {


.split-container {
  height: 90vh; /* lässt Platz unten sichtbar */
}

#herzsymbol {
  margin-top: 0.5rem;
}

.headline{
  margin-bottom:0rem;

}


.sub-text {
  font-size:0.9rem;
}

#rsvp-note-desktop{
  font-size:0.9rem;

}
}





@media (min-width: 1366px) {


.split-container {
  height: 75vh; /* lässt Platz unten sichtbar */
}


}