:root {
  --mineral-green: #4e6e5d;
  --wine-red: #5c1e24;
  --pink: #a41144;

  /* Globale verwendbare variablen */
  --body-color: var(--mineral-green);

  --link-color: var(--wine-red);
  --link-color-hover: var(--pink);

  --paragraph-margin: 0.8em;

  /*
   * Breite der seiten-inhalte.
   * In em angegeben, damit diese relativ zur schriftgröße ist.
   * Die schriftgröße wiederum ist relativ zur bildschirm-breite.
   */
  --page-width: 40em;
  /* Breite von sehr breiten seiten. Z.b. wenn auf einer seite text und auf der anderen ein großes bild gezeigt wird. */
  --page-width-large: 80em;

  --spacing-large: 3rem;
  --spacing-medium: 2rem;
  --spacing-small: 1rem;
  --spacing-extra-small: 0.5rem;

  --section-padding: var(--spacing-medium) var(--spacing-large);

  --body-font-family: "Crimson Text", serif;
  --heading-font-family: "Dancing Script", cursive;
}

::selection {
  background: #c1a242;
  color: white;
}

* {
  box-sizing: border-box;
}

html {
  font-size: clamp(20px, 1.5vw, 24px);
}

body {
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties -- Fallback for browsers that don't support svh */
  min-height: 100vh;
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties -- svh is only supported in modern browsers and therefore we need a fallback */
  min-height: 100svh;

  /*
  To make sure the footer is always at the bottom, we need to let the main content grow to the full height of the
  viewport. Therefore, the element which wraps the main content (the body) needs to be a flex container.
  */
  display: flex;
  flex-direction: column;

  margin: 0;
  color: var(--body-color);
  font-family: var(--body-font-family);
  background-color: #f7f1df;
  background-size: contain;
  overflow-x: hidden;
}

main {
  /* To make sure the footer is always at the bottom, we need to let the main content grow to the full height of the
  viewport. */
  flex-grow: 1;

  /* Make sure the main content is always centered */
  display: flex;
  flex-direction: column;

  /* The main content should never touch the corners of the viewport */
  padding: var(--spacing-small);
}
main > * {
  width: 100%;
  /* Make sure the main content of all pages never gets too wide */
  max-width: var(--page-width);
  margin: 0 auto;
}

section {
  /* margin-block heißt oben und unten */
  margin-block: 2rem;
}

figure {
  margin: 0;
  padding: 0;
}

figure figcaption {
  color: #2a314e;
  font-size: 1.2em;
}

img {
  max-width: 100%;
}

a,
a:visited {
  color: var(--link-color);
  text-decoration: none;

  /* If hover styles kick in they should be smoothly animated */
  transition: all 0.2s;
}

p > a:only-child,
p > a:only-child:visited {
  font-size: 1.4em;
}

/* Fixes some issues with the size of the link element */
a:has(img),
a > img {
  display: block;
}

a:hover,
a:active {
  text-decoration: underline;
  color: var(--link-color-hover);
}

button {
  display: block;
  padding: 0.5em 1em;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.8rem;
  background-color: #f7f1df;
  cursor: pointer;
  transition: all 0.3s;
}

a > button {
  text-decoration: none;
}

button:hover {
  background-color: #5c1e24;
  border-color: #5c1e24;
  color: #f7f1df;
}

a:has(button):hover {
  text-decoration: none;
}

hr {
  height: 1px;
  background: var(--body-color);
  border: 0;
  /* margin-block heißt oben und unten */
  margin-block: var(--paragraph-margin);
}

p {
  /* margin-block heißt oben und unten */
  margin-block: var(--paragraph-margin);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 1em 0 0.5em;
  color: #2a314e;
  font-family: var(--heading-font-family);
  text-wrap: balance;
}

h1 {
  margin: 0 0 0;
  font-size: 6em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  h1 {
    font-size: 2.5em;
  }
}

h2 {
  font-size: 2.5em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  h2 {
    font-size: 2em;
  }
}

h3 {
  font-size: 2em;
}
@media screen and (max-width: 768px) {
  h3 {
    font-size: 1.5em;
  }
}

h4 {
  font-size: 1.5em;
}
@media screen and (max-width: 768px) {
  h4 {
    font-size: 1.25em;
  }
}

h5 {
  font-size: 1.25em;
}
@media screen and (max-width: 768px) {
  h5 {
    font-size: 1em;
  }
}

h6 {
  font-size: 1em;
}
@media screen and (max-width: 768px) {
  h6 {
    font-size: 0.8em;
  }
}

.rose_button {
  max-width: 30px;
}
.first-section_container,
.fifth-section_container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2em;
  /* margin-block heißt oben und unten */
  margin-block: 100px;
}

.second-section_container,
.third-section_container,
.fourth-section_container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2em;
  padding: var(--section-padding);
}
@media (max-width: 768px) {
  .second-section_container,
  .third-section_container,
  .fourth-section_container,
  .fifth-section_container {
    padding: var(--spacing-small);
  }

  .second-section_container,
  .fourth-section_container {
    flex-direction: column;
  }

  .third-section_container {
    flex-direction: column-reverse;
  }
}

.second-section-pic_container {
  flex-basis: 50%;
}

.second-section-pic_container figure {
  height: 100vh;
  background-image: url("../img/himmel\ -\ Kopie.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 100;
  box-shadow: -20px 14px 20px 17px #142f24ab;
  border-radius: 10px;
}

.second-section-text_container {
  flex-basis: 50%;
}

.fourth-section-pic_container {
  flex-basis: 50%;
}

.fourth-section-pic_container figure {
  height: 100vh;
  background-image: url("../img/himmel.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 100;
  box-shadow: -20px 14px 20px 17px #142f24ab;
  border-radius: 10px;
}

.fourth-section-pic figcaption {
  color: #2a314e;
}

.fourth-section-text_container {
  flex-basis: 50%;
}
.third-section-pic_container {
  flex-basis: 50%;
}

.third-section-pic_container figure {
  height: 100vh;
  background-image: url("../img/himmel.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 100;
  box-shadow: -20px 14px 20px 17px #142f24ab;
  border-radius: 10px;
}

.third-section-text_container {
  flex-basis: 50%;
}

.logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo {
  width: 220px;
  padding: 1rem;
}
.home_logo {
  margin: 0;
}

.header_video {
  width: 100vw;
  height: 100vh;
  display: block;
  margin: 0px;
  padding: 0px;
  object-fit: cover;
}

.welcome-text_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.call-to-action-text,
.welcome-text {
  max-width: 840px;
  font-size: 1.2em;
  text-align: center;
}

.footer-insta {
  width: 100%;
  height: 200px;
}
.footer-insta img {
  max-width: 70%;
}

.footer-description {
  max-width: 100%;
  flex-basis: 20%;
  margin-bottom: 40px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-medium);
  margin-bottom: var(--spacing-medium);
  text-align: left;
  flex-wrap: wrap;
}

.footer-section {
  min-width: 210px;
  flex: 1;
}
.footer-section:has(.footer_logo) {
  flex-grow: 0;
  flex-shrink: 1;
}

/* Make sure the content is aligned at the top */
.footer-section:first-child {
  margin-top: var(--spacing-small);
}

.footer-section h4 {
  /* margin-block heißt oben und unten */
  margin-block: var(--spacing-small);
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 10px;
}

.footer-section ul li a,
.footer-section ul li a:visited {
  color: #f7f1df;
  text-decoration: none;
}
.footer-section ul li a:hover {
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid #ddd;
  padding-top: 10px;
}

@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-section {
    margin: 20px 0;
  }
}

.content {
  padding: 20px;
}