/*
--- 01 TYPOGRAPHY SYSTEM

- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 19 / 20 / 22 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights
Default: 400
Medium:
Semi-bold:
Bold:

- Line heights
Default: 1
Small:
Medium:
Paragraph default:
Large:

- Letter spacing
-0.5px
0.75px

--- 02 COLORS

- Primary: #
- Tints:
#e7eaa6


- Shades: 

- Accents:
- Greys: #03232a

--- 05 SHADOWS

--- 06 BORDER-RADIUS
0 2.4rem 4.8rem rgba(0, 0, 0, 0.075)

Large: 20px

Medium: 20px

--- 07 WHITESPACE

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 / 160 / 224
*/

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
/* GLOBAL RESET */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Roboto";
  background-image: url("../media/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

/* RESPONISVE */

/* Styles für Tablets */

/* Styles für Smartphones */
@media only screen and (max-width: 390px) {
  /* Container */
  .container {
    width: 100%;
    padding: 10px;
  }

  .sleeping,
  .overnight,
  .room,
  .desiredfield,
  .travel {
    margin-bottom: 10px;
  }

  .event-form-label {
    width: auto;
  }

  .submit-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .btn-submit {
    width: 100%;
    margin-bottom: 5px;
  }
}

/* HEADER */
.header {
  padding: 4.8rem 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
}

/* FOOTER */
.footer {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 15px;
}

.footer span {
  font-size: small;
}

.heading-primary {
  grid-column: span 2;
  margin-left: auto;
  font-size: 7.4rem;
}

.logo {
  width: 32rem;
}

/* Form - STEP 1 */
.container {
  /* max-width: 80rem; */
  display: flex;
  justify-content: center;
}

.step-1-form {
  width: 160rem;
  /* height: 50rem; */
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  justify-content: center;
  row-gap: 4.8rem;
  border: 1px solid #000;
  padding: 6.4rem;
}

.first-name-container,
.phone-number-container,
.birth-date-container {
  grid-column: 1 / 7;
}

.last-name-container,
.email-container {
  grid-column: 8 / -1;
}

.street-container {
  grid-column: 1 / 9;
}

.street-number-container {
  grid-column: 10 / -1;
}

.plz-container {
  grid-column: 1 / 5;
}

.location-container {
  grid-column: 6 / -1;
}

.btn-submit {
  font-size: 2.4rem;
  background-color: #e7eaa6;
  border-radius: 8px;
  border: 2px solid #ddd;
  padding: 1.2rem 2.4rem;
  grid-column: 6 / 9;
}

.button-container {
  display: flex;
  text-align: center;
  padding: 1rem 5rem;
}

.event-form-input {
  font-size: 2.4rem;
  height: 8rem;
  border: 2px solid #ddd;
  padding: 0.8rem 1.6rem;
  width: 100%;
}

/* #date-of-birth::after {
  content: '<ion-icon name="calendar-outline"></ion-icon>';
} */

/* Form - STEP 2 */
.step-2-form {
  width: 160rem;
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  justify-content: center;
  row-gap: 4.8rem;
  border: 1px solid #000;
  padding: 6.4rem;
}

.fields-step-2 {
  font-size: 2rem;
  display: flex;
  align-items: center;
  height: 6rem;
  border: 2px solid #ddd;
  padding: 0.5rem 1rem;
  width: 100%;
  margin-bottom: 15px;
}

.sleeping {
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
}

.overnight {
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
}

.sleeping,
.room {
  grid-column: 1 / 7;
}

.overnight,
.desiredfield {
  grid-column: 8 / -1;
}

.travel {
  grid-column: 1 / 20;
}

.traveloption {
  width: 100%;
  height: 4rem;
}

.btn-submit {
  font-size: 2.4rem;
  background-color: #e7eaa6;
  border-radius: 8px;
  border: 2px solid #ddd;
  padding: 1.2rem 2.4rem;
  grid-column: 6 / 9;
}

.submit-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.submit-container3 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.event-form-label {
  font-size: 1.5rem;
  height: 3rem;
  padding: 0.8rem 2rem;
  width: 100%;
  display: inline-flex;
  position: relative;
  top: -26px;
}

/* Form - STEP 3 */
.step-3-form {
  max-width: 160rem;
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  justify-content: center;
  border: 1px solid #000;
  padding: 6.4rem;
}

.fields-step-3 {
  font-size: 2rem;
  display: flex;
  align-items: center;
  height: 6rem;
  border: 2px solid #ddd;
  padding: 0.5rem 1rem;
  width: 100%;
  margin-bottom: 15px;
}

.food {
  grid-column: 1 / 20;
}

.allergic {
  resize: vertical;
  grid-column: 1 / 20;
  margin-top: 40px;
}

.othernotes {
  resize: vertical;
  grid-column: 1 / 20;
  margin-top: 40px;
}

.event-form {
  font-size: 2rem;
  height: 6rem;
  padding: 0.8rem 2rem;
  width: 100%;
  display: inline-flex;
  position: relative;
  top: -26px;
  resize: none;
}

textarea {
  font-family: "Roboto";
}

/* FINISH - STEP 4 */

.container4 {
  /* max-width: 80rem; */
  display: flex;
  justify-content: center;
}

.content4 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}