/* Variablen & Schriften */
:root {
    /* Farbpalette */
    --col-offwhite: #E9E5D9;
    --col-yellow:   #F7D469;
    --col-maroon:   #784D54;
    --col-blue:     #2E4B8C;
    --col-rose:     #EDCECB;
    --col-forrest:  #389051;
    
    /* Responsive Font Sizes mit clamp(min, preferred, max) */
    
    --fs-h1: clamp(3.5rem, -0.0227rem + 17.6136vw, 11.25rem);
    
    --fs-num: clamp(6rem, 25vw, 14rem);
    
    --fs-script: clamp(3rem, 12vw, 7rem);
    
    --fs-body: clamp(1.125rem, 0.8977rem + 1.1364vw, 1.625rem);
    --fs-small: calc( var(--fs-body) * .75 );
}

@font-face {
  font-family: 'MainGrotesk';
  src: url('fonts/grotesk.woff2') format('woff2');
  font-weight: normal;
  }

@font-face {
  font-family: 'CustomScript';
  src: url('fonts/script.woff2') format('woff2');
  font-weight: normal;
  }

/* —————————————————————————————— */
/* Globales Styling */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'MainGrotesk', sans-serif;
  text-transform: uppercase;
  
  background-color: var(--col-offwhite);
  color: var(--col-blue);
  
  font-size: var(--fs-body);
  line-height: calc( var(--fs-body) * 1.4 );
  }

h2, h3 {
  font-family: 'MainGrotesk', sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  }
  
h1, h2 {
  letter-spacing: calc( var(--fs-body) * -.35 )
  }
  @media screen and (orientation:portrait) { 
    h1, h2 {
      letter-spacing: calc( var(--fs-body) * -.15 )
      }
  }

h3 {
  padding-top: calc( var(--fs-body) * 1 )
  }

.script-text {
  font-family: 'CustomScript', cursive;
  text-transform: none;
  }
  
.small {
  font-size: var(--fs-small);
}

p {
  padding-top: calc( var(--fs-body) * 1 );
  }

/* —————————————————————————————— */
/* HEADER / FOOTER */
header {
  position: relative;
  min-height: 108vh;
  }
  @media screen and (orientation:portrait) { 
    header {
      padding-bottom: 12vh;   
      } 
  }

.video-bg {
  position: absolute;
  z-index: 1;  
  overflow: hidden;
  }
.video-bg video {
  margin: 0; padding: 0;
  position: absolute;
  left: 0; top: 0;
  z-index: -1;
  
  width: 100%;
  height: 100%;
  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  object-fit: cover;
  pointer-events: none;
  }
header .video-bg {
  top: 0;
  width: 100vw; 
  height: 108vh;
  /* height: 100dvh; */
  }
  
header .section-content {
  position: relative;
  z-index: 2;
  }

footer {
  position: relative;
  color: var(--col-yellow);
  height: calc( var(--fs-body) * 24 );
  padding-bottom: 6vh;  
  }
  @media screen and (orientation:portrait) { 
    footer {
      padding-bottom: 12vh;   
      } 
  }

footer .video-bg {
  bottom: 0;
  width: 100vw; 
  height: calc( ( var(--fs-body) * 24 ) + 8vh );
  
  z-index: -1;
  }

footer .section-content {
  height: 100%;
  display: flex;
  align-items: center;
  }
footer a {
  color: var(--col-yellow);
  text-decoration: none;
  }


/* —————————————————————————————— */
/* Sektionen */

section {
  /* padding: clamp(4rem, 10vh, 8rem) 1.5rem; */
  position: relative;
  z-index: 5;
  min-height: 100vh;
  }

header,
.day-container {
  display: flex;
  align-items: center;
  }
  
.section-content {
  width: 80%;
  max-width: 1024px;
  
  /* background: rgba(255,0,0,.1); */
  margin: 0 auto;
  }

/* —————————————————————————————— */
/* Individuelle Sektions-Farben */
/* header    { background-color: var(--col-blue); color: var(--col-rose); } */
header    { background-color: var(--col-yellow); color: var(--col-yellow); }
.welcome,
.welcome a  { background-color: var(--col-yellow); color: var(--col-maroon); }
.wedding,
.wedding a  { background-color: var(--col-rose); color: var(--col-forrest); }
.beach,
.beach a    { background-color: var(--col-blue); color: var(--col-yellow); }
.rsvp     { background-color: var(--col-maroon); color: var(--col-yellow); }

a {
  text-decoration: none;
  }
  
.subtitle {
  /* color: var(--col-rose); */
  }
.anrede {
  /* color: var(--col-forrest); */
  }

/* —————————————————————————————— */
/* Header */
header h1 {
  font-size: var(--fs-h1);
  line-height: 0.8;
  }
  
header .ampersand {
  text-align: center;
  }
    
.ampersand {
  font-size: calc( var(--fs-h1) * 1.2 );
  display: block;
  position: relative;
  left: calc( var(--fs-h1) * .5 );
  }

header .right {
    text-align: right;
    }

.subtitle {
  padding-top: calc( var(--fs-body) * 1 );
  }
  
@media screen and (orientation:landscape) { 
    .subtitle {
      position: absolute;
      top: calc( var(--fs-h1) * -1 );
      
      }
  }

.anrede {
  padding-top: calc( var(--fs-body) * 2 );
  }

/* —————————————————————————————— */  
/* Tages-Sektionen */

:root {
  --dist: calc( var(--fs-body) * 9 );
  }

.day-container {
  padding-bottom: calc( var(--fs-body) * 4 );
  }
  
.big-number {
  font-size: var(--fs-num);
  line-height: 0.7;
  }
  @media screen and (orientation:portrait) { 
    .big-number {
      line-height: 1.4;
      }    
  }


.day-title h2 {
  font-size: calc( var(--fs-h1) * .75 );
  position: relative;
  padding-left: calc( var(--dist) - ( var(--fs-body) * .35 ) );
  top:  calc( var(--fs-body) * -2 );
  }
  @media screen and (orientation:portrait) { 
    .day-title h2 {
      padding-left: 0;
    }    
  }

.day-container .section-content .details {
  display: flex;
  flex-direction: row;
  }

.day-container .section-content .details div:first-of-type {
  width: var(--dist);
  }
@media screen and (orientation:landscape) { 
  .day-container .section-content .details div:first-of-type p {
    text-align: right;
    padding-right: calc( var(--fs-body) * 2 );
    }
  }

.nowrap {
  white-space: nowrap;
  }
  
.mixed {
  text-transform: none;
  }

/* —————————————————————————————— */  
/* FAQ / RSVP BASICS */

.faqs,
.rsvp {
  padding: calc( var(--fs-body) * 3 ) 0;
  }

.faqs h3 {
  padding-top: calc( var(--fs-body) * 3 );
  }

@media screen and (orientation:landscape) { 
  .qa,
  .rsvp-form,
  .ernst {
    padding-left: var(--dist); 
    }
    }

.qa p {
  text-transform: none;
  }

.qa a {
  color: var(--col-blue);
  border-bottom: 1px solid var(--col-blue);
  }

/* —————————————————————————————— */  
/* RSVP FORM  */

.rsvp-form {
  padding-top: calc( var(--fs-body) * 3 );
  padding-bottom: calc( var(--fs-body) * 3 );
  }
  
fieldset {
  text-transform: none;
  border: none;
  padding: calc( var(--fs-body) * 1 ) 0;
  }
form hr {
  border: solid 1px var(--col-yellow);
  opacity: .3;
  margin: calc( var(--fs-body) * 1.5 ) 0 calc( var(--fs-body) * .5 ) 0;
  }

.rsvp-form h3 {
  margin-bottom: calc( var(--fs-body) * 1 );
  }

/* Text-Inputs & Select */
textarea, 
select {
  width: 100%;
  background: transparent;
  border: 1px solid var(--col-yellow);
  color: var(--col-yellow);
  font-family: 'MainGrotesk', sans-serif;
  padding: 1rem;
  font-size: var(--fs-body);
  text-transform: none;
  }

textarea {
  margin-top: calc( var(--fs-body) * .5 );
  }

select {
  /* 1. Nicht volle Breite */
  width: auto;
  min-width: 200px; /* Damit es nicht zu schmal bei einstelligen Zahlen ist */
  max-width: 100%;
  
  /* 2. Flach & Ohne Glass-Effekt */
  appearance: none;
  -webkit-appearance: none; /* Wichtig für iOS Safari */
  -moz-appearance: none;
  background-color: transparent; /* Oder var(--col-maroon), falls es massiv sein soll */
  border: 1px solid var(--col-yellow);
  border-radius: 0; /* Entfernt die Standard-Abrundung */
  box-shadow: none;
  
  /* 3. Mehr Padding oben/unten */
  padding: 1.2rem 3.5rem 1.2rem 1.2rem; /* Rechts mehr Platz für den eigenen Pfeil */
  
  color: var(--col-yellow);
  font-family: 'MainGrotesk', sans-serif;
  font-size: var(--fs-body);
  cursor: pointer;

  /* Custom Pfeil hinzufügen */
  /* Da 'appearance: none' den Standard-Pfeil löscht, bauen wir einen dezenten SVG-Pfeil ein */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7D469' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.2rem;
  }

/* Fix für die Dropdown-Liste (die Optionen selbst) */
select option {
  background-color: var(--col-maroon); /* Hintergrund der Liste anpassen */
  color: var(--col-yellow);
  padding: 1rem;
  }

textarea {
  min-height: calc( var(--fs-body) * 6 );
  resize: vertical;
  }

textarea.small-height {
  min-height: calc( var(--fs-body) * 3 );
  }

/* Custom Radio Buttons */
.radio-group {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
  cursor: pointer;
  }

.rsvp-form input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--col-yellow);
  border-radius: 50%;
  margin-right: 15px;
  margin-top: 4px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  }

.rsvp-form input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  background-color: var(--col-yellow);
  border-radius: 50%;
  }

.radio-group label {
  cursor: pointer;
  line-height: 1.2;
  }

.radio-group label span {
  font-size: calc( var(--fs-body) * .8 );
  /* opacity: 0.8; */
  text-transform: none;
  }

/* Day Selection Zeile */
.day-check {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  }

.day-check input[type="radio"] {
  margin-left:  calc( var(--fs-body) * .8 );
  margin-right: 0;
  }

.day-check span {
  flex-grow: 1;
  }

/* Button Fix */
.btn-submit {
  margin-top: 3rem;
  width: 100%;
  border: 1px solid var(--col-yellow);
  background: var(--col-yellow);
  
  color: var(--col-maroon);
  padding: 1.5rem;
  font-family: 'MainGrotesk';
  font-size: calc( var(--fs-body) * 1 );
  
  border-radius:  calc( var(--fs-body) * 1 );
  
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  }

.btn-submit:hover {
  /* background: transparent; */
  /* color: var(--col-yellow); */
  /* background: rgba(247, 212, 105, 1); */
  background: rgba(247, 212, 105, 0.6);
  }

/* Nur hervorheben, wenn das Formular "geprüft" wurde UND das Feld ungültig ist */
  .was-validated :placeholder-shown:invalid {
      border-color: #FFFFFF;
  }
  
  /* Falls schon Text drin steht, aber er trotzdem ungültig ist (z.B. Select auf "Bitte wählen") */
  .was-validated :invalid {
      border-color: #FFFFFF;
  }
  
  /* Fokus-Zustand (immer erlaubt, sieht gut aus beim Tippen) */
  .rsvp-form input:focus,
  .rsvp-form select:focus,
  .rsvp-form textarea:focus {
      border-color: #FFFFFF;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
      outline: none;
  }