/* Ergänzungen zur Webflow-Vorlage: Footer-Links, Honeypot, Datenschutzseite */

.legal-links {
  grid-column: 3;
  display: flex;
  justify-content: flex-end;
  gap: 1.5em;
}

.legal-links .impressum-link {
  text-align: right;
}

/* Honeypot-Feld: für Menschen unsichtbar, Bots füllen es aus */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-privacy-note {
  color: #183a2e;
  margin-top: 1em;
  font-size: 0.8em;
  opacity: 0.8;
}

.form-privacy-note a {
  color: inherit;
  text-decoration: underline;
}

/* Datenschutzseite: Farben/Schrift wie auf der Impressum-Seite (body ist standardmässig weiss) */
.privacy-text {
  max-width: 52em;
  grid-column: 1 / -1;
  padding-top: 2em;
  font-family: Plastique, sans-serif;
  font-size: clamp(16px, 1.1vw, 20px);
  line-height: 1.55;
  color: #17382d;
}

.privacy-text h1,
.privacy-text h2 {
  font-family: Plastique, sans-serif;
  color: #17382d;
  font-weight: 400;
  line-height: 1.15;
}

.privacy-text h1 {
  margin-top: 0;
  margin-bottom: 0.6em;
  font-size: clamp(2rem, 4vw, 4rem);
}

.privacy-text h2 {
  margin-top: 1.8em;
  margin-bottom: 0.5em;
  font-size: clamp(1.15rem, 1.5vw, 1.6rem);
}

.privacy-text p,
.privacy-text ul {
  margin-bottom: 1em;
}

.privacy-text a {
  color: #17382d;
  text-decoration: underline;
}

/* Seiten mit der festen orangen Leiste unten (Produktseiten): Footer-Links nicht verdecken */
.section-footer.footer-above-story-bar {
  padding-bottom: 6em;
}

/* Film-Einblendung (js/film.js) */
.film-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(0, 0, 0, 0.88);
}

.film-overlay[hidden] {
  display: none;
}

.film-box {
  position: relative;
  width: min(1100px, 100%);
}

.film-box video {
  display: block;
  width: 100%;
  max-height: 82vh;
  background: #000;
}

.film-close {
  position: absolute;
  top: -2.4rem;
  right: 0;
  padding: 0 0.4rem;
  border: 0;
  background: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.film-open {
  overflow: hidden;
}

/* Startseite (index.html, en/home.html): Video am Text verankern.
   Original: Das Video war zur Fensterhöhe zentriert, der Text läuft im normalen Fluss. Je nach Fenstergrösse
   oder Zoom schoben sich Video und Überschriften übereinander. Hier hängt die Position nur noch an der
   Schriftgrösse (em), nicht an der Fensterhöhe. */
.wrapper-img-hero:not(.padding-top-medium) {
  align-items: flex-start;
  overflow-x: clip;
  overflow-y: visible;
}

.wrapper-img-hero:not(.padding-top-medium) .mask-img-hero {
  top: 0;
  bottom: auto;
  margin-top: 9.3em;
}

/* Intro-Fläche (100vw) lag durch das Seiten-Padding 32px zu weit rechts und erzeugte eine waagrechte Scrollleiste */
.intro-parent {
  left: 0;
}

/* Kontaktbereich (Startseite): Die Button-Spalte wurde in der Flex-Zeile auf 96px gequetscht und ragte
   32px über den Seitenrand (waagrechte Scrollleiste auf Tablets). Unterhalb von 992px umbrechen. */
@media screen and (max-width: 991px) {
  .section-contact .columns {
    flex-wrap: wrap;
  }

  .section-contact .col-content-contact,
  .section-contact .col-button-contact {
    width: 100%;
  }

  .section-contact .col-button-contact {
    height: auto;
    margin-top: 2em;
    justify-content: flex-end;
  }
}

/* Desktop: Video horizontal in em verankern, damit es bei grossen Fenstern nicht in den Text rutscht */
@media screen and (min-width: 992px) {
  .wrapper-img-hero:not(.padding-top-medium) {
    justify-content: flex-start;
  }

  .wrapper-img-hero:not(.padding-top-medium) .mask-img-hero {
    left: 0;
    margin-left: 42em;
  }

  .section-hero {
    min-height: max(100vh, 70em);
  }
}

@media screen and (min-width: 1280px) {
  .section-hero {
    min-height: max(70vh, 22em);
  }
}

/* Tablet: Video unter die Überschrift, passend zur Breite */
@media screen and (max-width: 991px) and (min-width: 480px) {
  .wrapper-img-hero:not(.padding-top-medium) {
    justify-content: flex-start;
  }

  .wrapper-img-hero:not(.padding-top-medium) .mask-img-hero {
    left: 0;
    margin-top: 40em;
    margin-left: 3.33em;
    width: min(50em, calc(100vw - 7em));
    max-width: none;
  }

  .section-hero {
    min-height: max(100vh, 101em);
  }
}

/* Telefon */
@media screen and (max-width: 479px) {
  .wrapper-img-hero:not(.padding-top-medium) {
    justify-content: flex-start;
    padding-top: 0;
    overflow-x: clip;
    overflow-y: visible;
  }

  .wrapper-img-hero:not(.padding-top-medium) .mask-img-hero {
    left: 0;
    top: 0;
    margin-top: 27em;
    margin-left: 20px;
    width: calc(100vw - 40px);
    max-width: none;
  }

  .section-hero {
    min-height: max(80vh, 55em);
  }
}

/* "Barista-Qualität"-Abschnitt auf kleinen Tablets (480 bis 767px): Die Wellen lagen über dem zweiten Absatz. */
@media screen and (max-width: 767px) and (min-width: 480px) {
  .decorativ-div.links .decorativ-div.mask-decorativ {
    position: relative;
    height: auto;
    max-height: none;
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .col-who-we-are-2 {
    margin-top: 2em;
  }

  .margin-top-medium.home.w-row {
    margin-top: 2em;
  }
}

/* Überschriften-Masken: Die Punkte des Ä ragen über die Zeilenoberkante hinaus und wurden vom
   overflow:hidden der Maske abgeschnitten. Die Maske bekommt oben Luft, der Abstand wird ausgeglichen. */
.div-hide.home,
.div-hide.zugross {
  padding-top: 1.4em;
  margin-top: -1.4em;
}

.heading-xl.text-align-right.zugross {
  overflow: visible;
}

/* Nur für Suchmaschinen und Screenreader sichtbar (z. B. vollständige H1 neben der animierten Überschrift) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* FAQ-Abschnitt auf den Produktseiten */
.section-faq {
  padding: 6em 10%;
  background-color: #efe6e0;
  color: #17382d;
  font-family: Plastique, sans-serif;
}

.section-faq h2 {
  margin: 0 0 1.2em;
  font-family: Plastique, sans-serif;
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 400;
  line-height: 1.1;
  color: #17382d;
}

.section-faq .faq-item {
  max-width: 54em;
  padding: 1.1em 0;
  border-top: 1px solid rgba(23, 56, 45, 0.25);
}

.section-faq h3 {
  margin: 0 0 0.5em;
  font-family: Plastique, sans-serif;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.3;
  color: #17382d;
}

.section-faq p {
  margin: 0;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.55;
  color: #17382d;
}