/* Variablen */
:root {
  --background-color-01: white;
  --background-color-02: rgba(250, 245, 234, 1);
  --background-color-03: rgba(250, 245, 234, 0.8);

  --section-without-wave-top-padding: 4svh; /*Ohne Welle oben*/
  --section-without-wave-bottom-padding: 4svh; /*Ohne Welle unten*/
  --section-without-wave-right-padding: 6svh; /*Ohne Welle rechts*/
  --section-without-wave-left-padding: 6svh; /*Ohne Welle links*/
  /* Zur Info: 4svh ist die Wellenhöhe, also 2svh bis zur Hälfte*/
  --section-with-wave-top-padding: 8svh; /*Mit Welle oben*/
  --section-with-wave-bottom-padding: 8svh; /*Mit Welle unten*/
  --section-with-wave-right-padding: 6svh; /*Mit Welle rechts*/
  --section-with-wave-left-padding: 6svh; /*Mit Welle links*/

  --font-size-h1: clamp(2.5rem, 7svw, 10rem); /*H1 Schriftgröße*/
  --font-size-h2: clamp(1.5rem, 3svw, 10rem); /*H2 Schriftgröße*/
  --font-size-h3: clamp(1rem, 7svw, 10rem); /*H3 Schriftgröße*/
  --font-size-bigger: clamp(1rem, 5svw, 10rem); /*Sehr große Schriftgröße z.B. H2 wenn oben*/
  --font-size-big: clamp(1.5rem, 3svw, 10rem); /*Große Schriftgröße z.B. H3 wenn unten*/
  --font-size-medium: clamp(1rem, 2svw, 10rem); /*Mittlere Schriftgröße z.B. H2 im Text*/
  --font-size-small: clamp(1rem, 1.5svw, 10rem); /*Kleine Schriftgröße z.B. normae p Text*/
  --font-size-smaller: clamp(0.7rem, 1.3svw, 10rem); /*Kleinere Schriftgröße*/
  --font-size-mini: clamp(0.7rem, 1svw, 10rem); /*Mini Schriftgröße*/
  --font-size-nav: clamp(0.7rem, 1.3svw, 10rem); /* Nav Leiste */

  --font-color-01: black; /*rgb(127, 68, 45, 1); /*Schriftfarbe, war davor #7f442d bzw. rgb(127, 68, 45, 1)*/
  --font-color-02: white; /*Schriftfarbe*/

  --wave-height: 64px; /*Höhe der Welle*/
  --wave-width: calc(139% + 1.3px); /*Breite der Welle*/
}

/* Schriftarten */
/*Schriftart 1 einbinden aus Ordner font*/
@font-face {
  font-family: headlineFontCurved;
  src: url(font/Bellarina.otf);
}

/*Schriftart 2 einbinden aus Ordner font*/
@font-face {
  font-family: headlineFontStraight;
  src: url(font/Gemola-wooyn.ttf);
}

/*Schriftart 3 einbinden aus Ordner font*/
@font-face {
  font-family: mainFont;
  src: url(font/Calibrilight.ttf);
  font-weight: 300; /* LIGHT */
}

/*Schriftart 4 einbinden aus Ordner font*/
@font-face {
  font-family: mainFont;
  src: url(font/Calibri.ttf);
  font-weight: 400; /* REGULAR */
}

/*Schriftart 5 einbinden aus Ordner font*/
@font-face {
  font-family: mainFont;
  src: url(font/Calibribold.ttf);
  font-weight: 700; /* BOLD */
}

/*Schriftart 6 einbinden aus Ordner font*/
@font-face {
  font-family: backupFont;
  src: url(font/calibril.ttf);
}

/* Allgemeines */

/* REM */
html {
  font-size: 16px;
}

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

p {
  font-size: var(--font-size-small);
  font-weight: 300;
  text-align: justify;
}

label {
  width: 100%;
  font-size: var(--font-size-small);
  font-weight: 300;
  /*text-align: justify;*/
}

body {
  width: 100%;
  font-family: mainFont, backupFont, Calibri;
  color: var(--font-color-01);
}

/* Alle Sektionen */
section {
  position: relative;
  width: 100%;
}

/* Überschriften */
.sectionHeadline {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

h1 {
  font-family: headlineFontStraight;
  font-weight: 400;
  color: var(--font-color-02);
  font-size: var(--font-size-h1);
  text-align: center;
}

h2 {
  font-family: headlineFontStraight;
  letter-spacing: 0.5rem;
  font-weight: 400;
  font-size: var(--font-size-h2);
  margin-right: 0.2em;
}

h3 {
  font-family: headlineFontCurved;
  font-weight: 400;
  font-size: var(--font-size-h3);
  margin-left: 0.1em;
  margin-right: 0.3em;
  margin-top: -0.25em;
  margin-bottom: -0.5em;
}

/*Untere Welle konstruiert und kopiert von https://www.shapedivider.app/ */
.custom-shape-divider-bottom-1756306854 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  z-index: 100;
}

.custom-shape-divider-bottom-1756306854 svg {
  position: relative;
  display: block;
  width: var(--wave-width);
  height: var(--wave-height);
  z-index: 100;
}

.home .custom-shape-divider-bottom-1756306854 .shape-fill {
  fill: var(--background-color-01);
  z-index: 100;
}

.location .custom-shape-divider-bottom-1756306854 .shape-fill {
  fill: var(--background-color-02);
  z-index: 100;
}

.schedule .custom-shape-divider-bottom-1756306854 .shape-fill {
  fill: var(--background-color-02);
  z-index: 100;
}

.transition .custom-shape-divider-bottom-1756306854 .shape-fill {
  fill: var(--background-color-01);
  z-index: 100;
}

.custom-shape-divider-bottom-1756306854 .shape-fill {
  fill: var(--background-color-02);
  z-index: 100;
}

/*Obere Welle konstruiert und kopiert von https://www.shapedivider.app/ */
.custom-shape-divider-top-1760892870 {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 100;
}

.custom-shape-divider-top-1760892870 svg {
  position: relative;
  display: block;
  width: var(--wave-width);
  height: var(--wave-height);
  z-index: 100;
}

.video .custom-shape-divider-top-1760892870 .shape-fill {
    fill: var(--background-color-01);
    z-index: 100;
}

.schedule .custom-shape-divider-top-1760892870 .shape-fill {
    fill: var(--background-color-02);
    z-index: 100;
}

.end-img .custom-shape-divider-top-1760892870 .shape-fill {
    fill: var(--background-color-01);
    z-index: 100;
}

.custom-shape-divider-top-1760892870 .shape-fill {
    fill: var(--background-color-02);
    z-index: 100;
}


/* === Fix gegen Aufblitzen des Section Backgrounds am Anfang jeder Section === */
.custom-shape-divider-top-1760892870 {
  top: -1px;
}

/* === Fix gegen Aufblitzen des Section Backgrounds am Ende jeder Section === */
.custom-shape-divider-bottom-1756306854 {
  bottom: -1px;
}


/* Navigationsleiste*/
.nav {
  z-index: 1000;
  height: clamp(3rem, 5svw, 10rem);
  width: 100%;
  padding: 0rem 1.2rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: var(--background-color-03);
  opacity: 1;
  position: fixed;
  top: 0;
  font-size: var(--font-size-nav);
}

.nav-element {
  z-index: 1000;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.nav-element a {
  z-index: 1000;
  height: 100%;
  padding: 1rem;
  text-decoration: none;
  font-family: mainFont, backupFont, Calibri;
  color: var(--font-color-01);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.nav-element a:hover{
  z-index: 1000;
  background-color: rgb(127, 68, 45, 0.2);
}

#nav-element-logo-con {
  z-index: 1000;
  margin-right: auto;
  width: clamp(2.2rem, 4svw, 10rem);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#nav-element-logo-con a {
  z-index: 1000;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-element-logo {
  z-index: 1000;
  display: flex;
  object-fit: contain;
  max-width: 100%;
  width: 100%;
  height: 100%;
}

#open-sidebar-button{
  z-index: 1000;
  display: none;
  background: none;
  border: none;
  padding: 0em;
  margin-left: auto;
}
#close-sidebar-button{
  z-index: 1000;
  display: none;
  background: none;
  border: none;
  padding: 1rem;
  cursor: pointer;
}
#overlay{
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
}

.nav-smartphone {
  z-index: 1000;
  display: none;
}

#nav-element-logo-con-smartphone {
  z-index: 1000;
  display: none;
}

#nav-element-logo-con-smartphone a {
  z-index: 1000;
  display: none;
}

.nav-element-logo-smartphone {
  z-index: 1000;
  display: none;
}

/* Startseite */
.home {
  padding: var(--section-with-wave-right-padding) var(--section-with-wave-right-padding) var(--section-with-wave-bottom-padding) var(--section-with-wave-left-padding);
  height: 107svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: url(img/IMG_1282.jpg);
  background-position: center;
  background-size: cover;
}

.home p {
  font-size: var(--font-size-big);
  color: var(--font-color-02);
  margin-bottom: 2svh;
}

/* Countdown */
.countdown {
  padding: var(--section-without-wave-top-padding) var(--section-without-wave-right-padding) var(--section-without-wave-bottom-padding) var(--section-without-wave-left-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--section-without-wave-top-padding);
  background-color: var(--background-color-01);
}

.line-with-text {
  position: relative; /* Erforderlich, um absolute Positionierung zu ermöglichen */
  width: 100%;
  text-align: center; /* Zentriert den Text */
}

.text {
  display: inline-block; /* Erlaubt Padding und Margin */
  padding: 0 1em; /* Abstand zwischen Text und Linie */
  background-color: var(--background-color-01); /* Hintergrundfarbe, um die Linie zu unterbrechen */
  position: relative;
  z-index: 1;
  font-size: var(--font-size-big);
}

.line-with-text::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px; /* Die Dicke der Linie */
  border-top: 2px solid var(--font-color-01); /* Die durchgezogene Linie */
  z-index: 0; /* Stellt sicher, dass die Linie hinter dem Text liegt */
}

.countdownAll {
  width: 70%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  font-family: headlineFontStraight;
}

.countdownPart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.countdownNumber {
  font-size: var(--font-size-bigger); /*clamp(1rem, 5svw, 10rem); Sehr große Schriftgröße z.B. H2 wenn oben*/
}

.countdownUnit {
  font-size: var(--font-size-small);
}

/* Video Hornisgrinde */
.video {
  /*padding: var(--section-with-wave-top-padding) var(--section-with-wave-right-padding) var(--section-with-wave-bottom-padding) var(--section-with-wave-left-padding);
  */
  padding: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*overflow: hidden;*/
}

.video-con {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.video-con video {
  display: flex;
  object-fit: cover;
  min-width: 100%;
  min-height: 100%;
}

/*
.video video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
*/

/* Verlobungspart */
.engagement {
  padding: var(--section-without-wave-top-padding) var(--section-without-wave-right-padding) var(--section-without-wave-bottom-padding) var(--section-without-wave-left-padding);
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background-color: var(--background-color-02);
}

.con-pic {
  position: relative;
  top: 0;
  left: 0;
  width: 25%;
  height: 100%;
}

.con-text {
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

#img-eng {
  position: absolute;
  display: flex;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  height: auto;
  width: 100%;
  border-radius: 20px;
}

#img-eng-smartphone {
  display: none;
}

/* An- und Abreise */
.location {
  padding: /*oben*/0svh /*rechts*/0svw /*unten*/0svh /*links*/0svw;
  height: 107svh;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background: url(img/reblaus.jpg);
  background-position: center;
  background-size: cover;
}

#headline-location {
  display: flex;
  flex-direction: column;
}

#headline-location h3 {
  font-size: clamp(1rem, 5svw, 10rem);
  margin-bottom: calc(-2rem + -0.5em);
  margin-top: -0.7em;
}

#headline-location h2 {
  font-size: var(--font-size-bigger);
}

.location-left-side {  
  padding: var(--section-with-wave-top-padding) var(--section-with-wave-right-padding) var(--section-with-wave-bottom-padding) var(--section-with-wave-left-padding); /*padding: 4% 5%;*/
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
  background-color: rgba(250, 245, 234, 0.7);
}

.buttons-route { 
  height: 15svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.location-left-side a {
  text-decoration: none;
  align-items: center;
  appearance: none;
  background-color: var(--background-color-02);
  color: var(--font-color-01);
  border-radius: 10px;
  border-style: none;
  box-shadow: rgba(0, 0, 0, 0.2) 0 3px 5px -1px,
    rgba(0, 0, 0, 0.14) 0 6px 10px 0, rgba(0, 0, 0, 0.12) 0 1px 18px 0;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  fill: currentcolor;
  /*font-family: "Google Sans", Roboto, Arial, sans-serif;*/
  font-size: var(--font-size-mini);
  font-weight: 400;
  height: 48px;
  justify-content: center;
  letter-spacing: 0.25px;
  line-height: normal;
  max-width: 100%;
  overflow: visible;
  padding: 2px 24px;
  position: relative;
  text-align: center;
  text-transform: none;
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
  will-change: transform, opacity;
  z-index: 0;
}
.location-left-side a:hover {
  background: var(--background-color-01);
  color: #174ea6;
}

/*
iframe {
  width: 75%;
  height: 40svh;
  border: 0;
  border-radius: 5%;
}
*/

/* Unterkünfte */
.accomodation {
  padding: var(--section-without-wave-top-padding) var(--section-without-wave-right-padding) var(--section-without-wave-bottom-padding) var(--section-without-wave-left-padding);
  display: flex;
  flex-direction: column;
  background-color: var(--background-color-02);
  gap: 2rem;
}

#headline-accomodation {
  display: flex;
  flex-direction: column;
}

#headline-accomodation h3 {
  font-size: clamp(1rem, 5svw, 10rem);
  margin-bottom: calc(-1rem + -0.5em);
  margin-top: -0.7em;
}

#headline-accomodation h2 {
  font-size: var(--font-size-bigger);
}

.hotels {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.hotel {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem
}

.hotel-img {
  aspect-ratio: 16 / 9; /*3 / 4; */
  height: auto;
  width: 100%;
  object-fit: cover;
  max-width: 100%;
  border-radius: 20px;
}

.hotel-address {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem
}

.hotel h2{
  font-size: var(--font-size-smaller);
  font-weight: 700;
  text-align: center;
}

.hotel p{
  text-align: center;
}

.accomodation a {
  text-decoration: none;
  align-items: center;
  appearance: none;
  background-color: var(--background-color-02);
  color: var(--font-color-01);
  border-radius: 10px;
  border-style: none;
  box-shadow: rgba(0, 0, 0, 0.2) 0 3px 5px -1px,
    rgba(0, 0, 0, 0.14) 0 6px 10px 0, rgba(0, 0, 0, 0.12) 0 1px 18px 0;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  fill: currentcolor;
  /*font-family: "Google Sans", Roboto, Arial, sans-serif;*/
  font-size: var(--font-size-mini);
  font-weight: 500;
  height: 48px;
  justify-content: center;
  letter-spacing: 0.25px;
  line-height: normal;
  max-width: 100%;
  overflow: visible;
  padding: 2px 24px;
  position: relative;
  text-align: center;
  text-transform: none;
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
  will-change: transform, opacity;
  z-index: 0;
}
.accomodation a:hover {
  background: var(--background-color-01);
  color: #174ea6;
}

/* Zeitplan */
.schedule {
  padding: 12svh var(--section-with-wave-right-padding) 12svh var(--section-with-wave-left-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--background-color-01);
  gap: 2rem;
}

.schedule h2 {
  font-size: var(--font-size-bigger);
}

.img-schedule {
  display: flex;
  width: 85%;
}

.img-schedule-smartphone {
  display: none;
}

/* Rückmeldung */
.rsvp {
  padding: var(--section-without-wave-top-padding) var(--section-without-wave-right-padding) var(--section-without-wave-bottom-padding) var(--section-without-wave-left-padding);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: var(--background-color-02);
  gap: var(--section-without-wave-right-padding);
}

#headline-rsvp {
  display: flex;
  flex-direction: column;
}

#headline-rsvp h3 {
  font-size: clamp(1rem, 5svw, 10rem);
  margin-bottom: calc(-1.5rem + -0.5em);
  margin-top: -0.4em;
}

#headline-rsvp h2 {
  font-size: var(--font-size-bigger);
  letter-spacing: 1.5rem;
}

.rsvp-left {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.rsvp-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.whole-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#contact-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-question {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-answers {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.form-answer {
  width: 33%;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.label-attendance {
  font-family: headlineFontCurved;
  font-weight: 700;
  font-size: var(--font-size-big);
  margin-left: calc(1rem + 0.1em);
  margin-top: -0.35em;
  margin-bottom: -0.4em;
}

input[type="text"] {
  font-size: var(--font-size-small);
  padding: 0.5rem;
  border: 2px solid var(--font-color-01);
  border-radius: 7px;
}

input[type="text"]:focus {
  background-color: rgb(127, 68, 45, 0.1);
}

/* Radio Button - Grundzustand */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;

  /* Safari-Fix */
  aspect-ratio: 1 / 1;
  transform: translateZ(0);
  line-height: 0;

  box-sizing: border-box;
  border: 2px solid var(--font-color-01);
  border-radius: 5px; /* Falls du eckige Kästchen willst */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  background-color: transparent;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: 0; /* verhindert ungleiche Vertikalhöhe */
}

/* Radio Button - Wenn ausgewählt */
input[type="radio"]:checked::before {
  content: "✓";
  color: var(--font-color-01);
  font-size: 20px;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#message {
  width: 100%; 
  font-size: var(--font-size-small);
  padding: 5px;
  border: 2px solid var(--font-color-01);
  border-radius: 7px;
  resize: vertical;
  max-width: 100%;
  max-height: 20svh;
}

#message:focus {
  background-color: rgb(127, 68, 45, 0.1);
}

button[type="submit"] {
  width: 100%;
  font-size: var(--font-size-small);
  padding: 5px;
  border: 2px solid var(--font-color-01);
  border-radius: 7px;
  cursor: pointer;
  background: rgb(127, 68, 45,0.05);
  color: var(--font-color-01);
}
button[type="submit"]:hover {
  background: rgb(127, 68, 45,0.7);
  color: var(--font-color-02);
}

#response-message {
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: var(--font-size-smaller);
}

.rsvp-right {
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
}

.rsvp-img {
  aspect-ratio: 3 / 4; /*9 / 16;*/
  height: auto;
  width: 100%;
  object-fit: cover;
  max-width: 100%;
  border-radius: 20px;
}

.rsvp-img-for-smartphone {
  display: none;
}

/* Zwischenwelle */
.transition {
  position: relative;
  padding: 0;
  height: 70svh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(img/IMG_1282.jpg);
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

/* Blur Layer nur fürs Hintergrundbild */
.transition::before {
  content: "";
  position: absolute;
  top: -40px;
  left: -80px;
  width: 109%;
  height: 109%;
  background: inherit; /* das gleiche Hintergrundbild */
  filter: blur(10px); /* Stärke des Blur */
  z-index: 0; /* ganz nach unten */
}

/* Save the date video */
.transition-video-con {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.transition-video-con video {
  position: static;
  display: flex;
  z-index: 1; /* über dem Blur */
  object-fit: cover;
  min-width: 100%;
  min-height: 100%;
  transform: none;
}

/* Sonstiges */
.faq {
  padding: var(--section-without-wave-top-padding) var(--section-without-wave-right-padding) var(--section-without-wave-bottom-padding) var(--section-without-wave-left-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background-color: var(--background-color-01);
}

.faq-questions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 4rem;
  gap: 2rem;
}

.sectionHeadlineBeneath {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.sectionHeadlineBeneath h2 {
  font-size: var(--font-size-bigger);
  margin-right: -0.5rem;
}

.sectionHeadlineBeneath h3 {
  font-size: var(--font-size-big);
}

.faq-questions h2 {
  font-size: var(--font-size-medium);
  font-weight: 700;
}

.faq-question {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Abschlussbild */
.end-img {
  padding: var(--section-with-wave-top-padding) var(--section-with-wave-right-padding) var(--section-without-wave-bottom-padding) var(--section-with-wave-left-padding);
  height: 90svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: url(img/IMG_1363.jpg);
  background-position: center;
  background-size: cover;
}

/* Footer */
.footer {
  padding: 1rem 2rem;
  width: 100%;
  height: clamp(6rem, 10svw, 20rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: var(--background-color-02);
}

.footer-logo-con {
  width: clamp(4rem, 7svw, 10rem);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.footer-logo-con a {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-logo {
  display: flex;
  object-fit: contain;
  max-width: 100%;
  width: 100%;
  height: 100%;
}

.contacts {
  height: 100%;
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
}

.contacts h2 {
  font-size: var(--font-size-smaller);
  font-weight: 700;
}

.contacts p {
  font-size: var(--font-size-mini);
}

.contacts-details {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem
}

.contacts-details-lines {
  display: flex;
  flex-direction: column;
  gap: clamp(0.01rem, 0.2svw, 3rem);
}

/* Bilder Collage */
/*
.pictures {
  height: 70svh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 0% 5%;
  background-color: var(--background-color-02);
}

.pictures img {
  width: 15%;
}

.pic-top {
  margin-top: -50px;
}

.pic-bottom {
  margin-bottom: -50px;
}
  */





/* Testsection stylen*/
.test-section {
  display: flex;
}

.test-section-left {
  display: flex;
  width: 70%;
  border: 1px solid black;
}

.test-section-right {
  display: flex;
  width: 30%;
  border: 1px solid black;
}



/* Foto Gallery*/
#gallery_img {
  position: fixed;
  bottom: 50px;
  right: 50px;
  width: 50px;
  z-index: 1000000;
}














/* Responsive Design */
/* Small devices like smartphones*/
@media (max-width: 600px) {
  /*Variablen*/
  :root {
    /* !!! noch abzuändern in REM !!! */
    --section-without-wave-top-padding: 2rem; /*Ohne Welle oben*/
    --section-without-wave-bottom-padding: 2rem; /*Ohne Welle unten*/
    --section-without-wave-right-padding: 3rem; /*Ohne Welle rechts*/
    --section-without-wave-left-padding: 3rem; /*Ohne Welle links*/
    /* Zur Info: 4svh ist die Wellenhöhe, also 2svh bis zur Hälfte*/
    --section-with-wave-top-padding: 4rem; /*Mit Welle oben*/
    --section-with-wave-bottom-padding: 4rem; /*Mit Welle unten*/
    --section-with-wave-right-padding: 3rem; /*Mit Welle rechts*/
    --section-with-wave-left-padding: 3rem; /*Mit Welle links*/
    
    --font-size-h1: 3.5rem; /*H1 Schriftgröße*/
    --font-size-h2: 2.5rem; /*H2 Schriftgröße*/
    --font-size-h3: 4rem; /*H3 Schriftgröße*/
    --font-size-bigger: 3.5rem; /*Sehr große Schriftgröße z.B. H2 = typische überschrift strait*/
    --font-size-big: 2rem; /*Große Schriftgröße z.B. H3 wenn unten*/
    --font-size-medium: 1.5rem; /*Mittlere Schriftgröße z.B. H2 im Text*/
    --font-size-small: 1.5rem; /*Kleine Schriftgröße z.B. normae p Text*/
    --font-size-smaller: 1rem; /*Kleinere Schriftgröße*/
    --font-size-mini: 1rem; /*Mini Schriftgröße*/
    --font-size-nav: 2rem; /* Nav Leiste */

    --wave-height: 30px; /*Höhe der Welle*/
    --wave-width: calc(139% + 1.3px); /*Breite der Welle*/
  }
  
  /* REM */
  html {
    font-size: 10px;
  }

  /* Jump Points für die Section Links */
  #home {
    scroll-margin-top: 0rem;
  }
  #location {
    scroll-margin-top: 0rem;
  }
  #accomodation {
    scroll-margin-top: 5rem;
  }
  #schedule {
    scroll-margin-top: 0rem;
  }
  #rsvp {
    scroll-margin-top: 5rem;
  }
  #faq {
    scroll-margin-top: 5rem;
  }
  
  /* Navigationsleiste */
  .nav {
    z-index: 1000;
    top: -100%;
    height: 70svh;
    flex-direction: column;
    padding: 0rem;
    transition: top 100ms ease-out;
  }

  #nav-element-logo-con {
    z-index: 1000;
    display: none;
  }

  #nav-element-logo-con a {
    z-index: 1000;
    display: none;
  }

  .nav-element-logo {
    z-index: 1000;
    display: none;
  }

  .nav.show{
    z-index: 1000;
    top: 0;
  }

  nav.show ~ #overlay{
    z-index: 999;
    display: block;
  }

  .nav-element {
    z-index: 1000;
    width: 100%;
  }

  .nav-element a {
    z-index: 1000;
    width: 100%;
  }

  .nav-element a:hover{
    z-index: 1000;
    background-color: rgb(127, 68, 45, 0.2);
  }

  .nav-smartphone {
    z-index: 1000;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5rem;
    padding: 0.5rem 0.5rem 0.5rem 1.2rem;
    background-color: var(--background-color-03);
    opacity: 1;
    position: fixed;
    top: 0;
    /*font-size: clamp(0.7rem, 1.3svw, 10rem);*/
  }

  #nav-element-logo-con-smartphone {
    z-index: 1000;
    /*height: 2.7rem;*/
    width: 4rem;
    height: auto;
    /*calc(height*1.4485); /* width = height mal 1.4485 z.B. 1.7382rem*/
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  #nav-element-logo-con-smartphone a {
    z-index: 1000;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nav-element-logo-smartphone {
    z-index: 1000;
    display: flex;
    object-fit: contain;
    max-width: 100%;
    width: 100%;
    height: 100%;
  }

  #open-sidebar-button, #close-sidebar-button{
    z-index: 1000;
    display: block;
  }

  #open-sidebar-button{
    z-index: 1000;
    height: 0.7rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Startseite */
  .home {
    height: calc(100svh + 3rem);
  }
  
  .home p {
    font-size: var(--font-size-big);
    margin-bottom: 10rem;
  }

  /* Countdown*/
  .countdownAll {
    width: 80%;
    justify-content: space-around;
  }

  .countdownNumber {
    font-size: 3rem;
  }

  .countdownUnit {
    font-size: 1rem;
  }

  /* Verlobungspart */
  .engagement {
    height: auto;
  }
  
  .con-pic {
    display: none;
  }

  .con-text {
    width: 100%;
    align-items: center;
    gap: 2rem;
  }

  #img-eng {
    display: none;
  }

  #img-eng-smartphone {
    width: 100%;
    display: flex;
    border-radius: 20px;
  }

  /* Video Hornisgrinde */
  /*
  .video {
    height: 80svh;
  }
  */

  /* An- und Abreise */
  .location {
    height: calc(100svh + 3rem);
  }

  .location-left-side {  
    padding: 4rem var(--section-with-wave-right-padding) 4rem var(--section-with-wave-left-padding);
    width: 100%;
  }

  .buttons-route {
    height: 12rem;
  }

  #headline-location h3 {
    font-size: 3rem;
    margin-bottom: calc(-1rem + -0.5em);
    margin-top: -0.7em;
  }

  #headline-location h2 {
    font-size: var(--font-size-bigger);
  }

  /* Unterkünfte */

  #headline-accomodation h3 {
    font-size: 3rem;
    margin-bottom: calc(-0.5rem + -0.5em);
    margin-top: -0.7em;
  }

  #headline-accomodation h2 {
    font-size: var(--font-size-bigger);
    line-height: 1em;
  }

  .hotels {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .hotel {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }

  .hotel-img {
    aspect-ratio: 3 / 4;
    width: 20%;
    border-radius: 10px;
  }

  .hotel-address {
    width: 60%;
    gap: 1rem;
  }

  .accomodation a {
    width: 20%;
    padding: 1px 4px;
  }

  /* Zeitplan */
  .img-schedule {
    display: none;
  }

  .img-schedule-smartphone {
    display: flex;
    width: 70%;
  }

  /* Rückmeldung */
  #headline-rsvp h3 {
    font-size: 3rem;
    margin-bottom: calc(-1rem + -0.5em);
    margin-top: -0.4em;
  }

  #headline-rsvp h2 {
    font-size: var(--font-size-bigger);
    letter-spacing: 1.5rem;
  }
  
  .rsvp-left {
    width: 100%;
  }

  .rsvp-right {
    display: none;
  }

  .form-answers {
    gap: 2rem;
  }

  .form-answer {
    gap: 0.5rem;
    width: 25%;
  }

  #form-answer-childYesMultiple, #form-answer-veggie {
    width: 40%;
  }

  #form-answer-childNo, #form-answer-vegan {
    width: 25%;
  }

  

  /* Radio Button - Grundzustand */
  input[type="radio"] {
    width: 24px;/*30px;*/
    height: 24px;/*22px;*/
    min-width: 24px;
    min-height: 24px;

    /* Safari-Fix */
    aspect-ratio: 1 / 1;
    transform: translateZ(0);
    line-height: 0;
  }

  /* Radio Button - Wenn ausgewählt */
  input[type="radio"]:checked::before {
    content: "✓";
    color: var(--font-color-01);
    font-size: 20px;
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .rsvp-img-for-smartphone {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .rsvp-img {
    aspect-ratio: 3 / 4; /*9 / 16;*/
    width: 20%;
    height: auto;
    object-fit: cover;
    max-width: 100%;
    border-radius: 10px;
  }

  /* Zwischenwelle anpassen */
  /* Blur Layer nur fürs Hintergrundbild */
  .transition::before {
    display: none;
  }

  /* Save the date video anpassen*/
  .transition {
    height: 90svh; /*min(99svh,666px);*/
    background: none;
    background-color: var(--background-color-02);
  }

  .transition-video-con {
    width: 100%;
  }

  /* Abschlussbild */
  .end-img {
    height: 25svh;
  }

  /* Footer */
  .footer {
    padding: 1rem 2rem;
    height: 10rem;
  }

  .footer-logo-con {
    width: 6rem;
    height: auto;
  }

  .contacts {
    height: 100%;
    width: auto;
  }

  .contacts h2 {
    font-size: var(--font-size-smaller);
    width: 12rem;
  }

.contacts p {
  font-size: var(--font-size-mini);
}

.contacts-details {
  width: 80%;
}
}




/* Medium devices like tablets*/
@media (min-width: 601px) and (max-width: 1000px) {
  /* Jump Points für die Section Links */
  #home {
    scroll-margin-top: 0rem;
  }
  #location {
    scroll-margin-top: 0rem;
  }
  #accomodation {
    scroll-margin-top: 3rem;
  }
  #schedule {
    scroll-margin-top: 3rem;
  }
  #rsvp {
    scroll-margin-top: 3rem;
  }
  #faq {
    scroll-margin-top: 3rem;
  }

  /* Verlobungspart */
  .engagement {
    height: auto;
  }

  /* Location */
  #headline-location h3 {
    font-size: clamp(1rem, 5svw, 10rem);
    margin-bottom: calc(-1rem + -0.5em);
    margin-top: -0.7em;
  }
  
  /* RSVP */
  #headline-rsvp h3 {
    font-size: clamp(1rem, 5svw, 10rem);
    margin-bottom: calc(-0.2rem + -0.5em);
    margin-top: -0.4em;
  }

  /* RSVP anpassen Gap von Bildern */
  .rsvp-right {
    gap: 11.5rem;
  }

  .rsvp-img {
    width: 100%;
  }

  /* Save the date video anpassen*/
  .transition-video-con {
    width: 57%;
  }

  /* Abschlussbild */
  .end-img {
    height: 45svh;
  }
}

/* Medium devices like laptops*/
@media (min-width: 1001px) and (max-width: 1500px) {
  /* Jump Points für die Section Links */
  #home {
    scroll-margin-top: 0rem;
  }
  #location {
    scroll-margin-top: 0rem;
  }
  #accomodation {
    scroll-margin-top: 4.5rem;
  }
  #schedule {
    scroll-margin-top: 4.5rem;
  }
  #rsvp {
    scroll-margin-top: 4.5rem;
  }
  #faq {
    scroll-margin-top: 4.5rem;
  }
  
  /* Verlobungspart */
  .engagement {
    height: 70svh;
  }
  
  /* Location */
  #headline-location h3 {
    font-size: clamp(1rem, 5svw, 10rem);
    margin-bottom: calc(-0.9rem + -0.5em);
    margin-top: -0.7em;
  }

  /* RSVP */
  #headline-rsvp h3 {
    font-size: clamp(1rem, 5svw, 10rem);
    margin-bottom: calc(-0.7rem + -0.5em);
    margin-top: -0.4em;
  }

  /* RSVP anpassen Gap von Bildern */
  .rsvp-right {
    gap: 2rem;
  }

  .rsvp-img {
    width: 89.5%;
  }

  /* Save the date video anpassen*/
  .transition-video-con {
    width: 34%;
  }

  /* Abschlussbild */
  .end-img {
    height: 80svh;
  }
}

/* Medium devices like monitors*/
@media (min-width: 1501px) {
  /* Jump Points für die Section Links */
  #home {
    scroll-margin-top: 0rem;
  }
  #location {
    scroll-margin-top: 0rem;
  }
  #accomodation {
    scroll-margin-top: 6rem;
  }
  #schedule {
    scroll-margin-top: 6rem;
  }
  #rsvp {
    scroll-margin-top: 6rem;
  }
  #faq {
    scroll-margin-top: 6rem;
  }
  
  /* RSVP anpassen Gap von Bildern */
  .rsvp-right {
    gap: 2rem;
  }

  .rsvp-img {
    width: 79.5%;
  }
}



/* === Fix gegen horizontales Scrollen === */
html, body {
  width: 100%;
  overflow-x: hidden;
  position: relative;
}