@font-face {
  font-family: "Pacifica";
  font-style: normal;
  font-weight: 300;
  /* font-display: swap; */
  src: url("../fonts/pacifica.ttf") format("truetype");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  /* font-display: swap; */
  src: url("../fonts/open-sans.ttf") format("truetype");
}

:root {
  --page-width: min(1200px, 80vw);

  --color-default: hsl(0, 0%, 100%);
  --color-accent: hsl(28, 90%, 49%);
  --color-subdued: hsl(32, 33%, 90%);

  --color-success: hsl(75, 90%, 35%);
  --color-error: hsl(0, 90%, 35%);
  --color-warning: hsl(28, 90%, 35%);
  --color-about: hsl(240, 100%, 35%);

  --shadow-small: 0 0 0 clamp(1px, 0.2vmin, 2px) hsl(0, 0%, 30%);
  --shadow-large: 0 clamp(5px, 1vmin, 10px) clamp(20px, 3vmin, 30px) hsl(0, 0%, 50%);

  --font-stack-headings: "Pacifica", sans-serif;
  --font-stack-normal: "Open Sans", sans-serif;

  --size-relative-0: 0.1em;
  --size-relative-1: 0.3em;
  --size-relative-2: 0.5em;
  --size-relative-3: 0.8em;
  --size-relative-4: 1.5em;
  --size-relative-5: 2em;
  --size-relative-6: 3em;

  --font-size-fluid-0: clamp(1rem, 1vw, 1.125rem);
  --font-size-fluid-1: clamp(1.125rem, 2vw, 1.275rem);
  --font-size-fluid-2: clamp(1.5rem, 3vw, 2rem);
  --font-size-fluid-3: clamp(2rem, 4vw, 3rem);
  --font-size-fluid-4: clamp(2.5rem, 5vw, 3.5rem);
  --font-size-fluid-5: clamp(3rem, 6vw, 5rem);
  --font-size-fluid-6: clamp(4.5rem, 7vw, 7rem);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5em;
}

body {
  font-family: var(--font-stack-normal);

  color: var(--color-default);
  background-color: var(--color-default);
  background-image: url("../images/hintergrund.avif");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/*
------------------------------
ICONS
------------------------------
*/

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

.icon::before {
  height: var(--icon-size);
  width: var(--icon-size);

  background-color: var(--icon-color);
}

.icon::before {
  display: inline-block;
  content: "";

  mask-size: contain;
  mask-repeat: no-repeat;

  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

.icon-close::before {
  mask-image: url("../icons/close.svg");
  -webkit-mask-image: url("../icons/close.svg");
}

.icon-cookies::before {
  mask-image: url("../icons/check.svg");
  -webkit-mask-image: url("../icons/check.svg");
}

.icon-thumb-up::before {
  mask-image: url("../icons/thumb-up.svg");
  -webkit-mask-image: url("../icons/thumb-up.svg");
}

.icon-thumb-down::before {
  mask-image: url("../icons/thumb-down.svg");
  -webkit-mask-image: url("../icons/thumb-down.svg");
}

/*
------------------------------
TYPOGRAPHY
------------------------------
*/

p,
a,
ul,
li,
label,
input,
textarea,
button {
  font-family: var(--font-stack-normal);
  font-size: var(--font-size-fluid-0);
}

h3 {
  font-family: var(--font-stack-normal);
  /* font-size: var(--font-size-fluid-2); */
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: var(--font-weight-1);
  line-height: var(--font-lineheight-0);
}

h2 {
  font-family: var(--font-stack-headings);
  font-size: var(--font-size-fluid-3);
  font-weight: var(--font-weight-6);
  line-height: var(--font-lineheight-0);
  letter-spacing: var(--font-letterspacing-1);
}

h1 {
  font-family: var(--font-stack-headings);
  /* font-size: var(--font-size-fluid-6); */
  font-size: clamp(3.5rem, 6vw, 7rem);
  font-weight: var(--font-weight-6);
  line-height: var(--font-lineheight-0);
  letter-spacing: var(--font-letterspacing-1);
}

img {
  display: block;
  object-fit: cover;
}

/*
------------------------------
CONTROLS
------------------------------
*/

/* Links */

a {
  color: var(--color-default);
  text-decoration: none;
  outline: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: var(--size-relative-1);
  text-decoration-thickness: var(--border-size-2);
}

/* Buttons */

button {
  min-width: 14ch;

  padding: var(--size-relative-2) var(--size-relative-3);

  color: white;
  background-color: var(--color-accent);

  transition: background-color 0.1s ease-in-out;

  outline: none;
  cursor: pointer;
}

button:hover {
  background-color: hsl(28, 90%, 39%);
}

/* Textareas */

input[type="text"],
input[type="email"],
textarea {
  padding: var(--size-relative-2) var(--size-relative-3);

  color: var(--color-accent);
  background-color: white;

  outline: var(--border-size-2) solid transparent;
  box-shadow: 0 0 0 var(--border-size-2) hsl(30, 33%, 70%);

  caret-color: var(--color-accent);

  border-radius: 0em;
}

textarea {
  resize: none;
}

input[type="text"],
input[type="email"] {
  margin-bottom: var(--size-relative-2);
}

input[type="text"]:autofill,
input[type="email"]:autofill {
  color: var(--color-accent);
  box-shadow: inset 0 0 0 100px white, 0 0 0 var(--border-size-2) hsl(30, 33%, 70%);
  -webkit-text-fill-color: var(--color-accent);
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
textarea:focus-visible {
  outline-color: var(--color-accent);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
  color: hsl(30, 33%, 30%);
  opacity: 0.5;
}

/* Checkboxes */

/* input[type="checkbox"] + label {
  position: absolute;
} */

input[type="checkbox"] {
  display: none;
  appearance: none;
  -webkit-appearance: none;
}

input[type="checkbox"] + label {
  display: flex;
  cursor: pointer;
}

input[type="checkbox"] + label::before {
  display: inline-block;
  content: "";

  width: 1.25em;
  height: 1.25em;

  background-image: url("../icons/checkbox-unchecked.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

input[type="checkbox"]:checked + label::before {
  background-image: url("../icons/checkbox-checked.svg");
}

/*
------------------------------
POPUP
------------------------------
*/

.popup-overlay {
  position: fixed;
  display: none;
  place-items: center;
  z-index: var(--layer-5);
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup {
  position: absolute;
  display: flex;
  flex-direction: column;

  /* width: calc(var(--page-width) - 2 * var(--size-fluid-2)); */
  width: var(--page-width);
  height: 90%;

  color: #555;
  background-color: #eee;
  border: var(--border-size-2) solid #555;
  /* box-shadow: var(--shadow-large); */

  padding: var(--size-fluid-3);
  gap: var(--size-relative-4);
}

.popup-content a {
  color: #555;
}

.popup-content ul {
  display: flex;
  flex-direction: column;
  gap: 1em;

  list-style-position: outside;
  list-style-type: disclosure-closed;
  margin-left: 1em;
}

.popup-content h4 {
  font-family: var(--font-stack-normal);
  /* font-size: var(--font-size-fluid-0); */
  font-weight: var(--font-weight-6);
}

.popup-content h3 {
  font-family: var(--font-stack-normal);
  font-size: var(--font-size-fluid-1);
  font-weight: var(--font-weight-6);
}

.popup-close {
  --icon-size: max(2rem, min(3vw, 2.5rem));
  --icon-color: #555;

  position: absolute;

  top: calc(var(--icon-size) / 2 * -1 - 1px);
  right: calc(var(--icon-size) / 2 * -1 - 1px);

  background-color: white;
  border-radius: 50%;

  cursor: pointer;
  transition: rotate 0.2s ease-in-out;
}

.popup-close:hover {
  rotate: 180deg;
}

.popup-content {
  --font-size-fluid-3: clamp(2rem, 4vw, 2.5rem);

  overscroll-behavior: contain;
  overflow-x: hidden;

  height: 100%;

  padding-right: var(--size-fluid-3);
}

.popup-content p {
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .popup {
    width: var(--page-width);
  }
}

/*
------------------------------
TOAST
------------------------------
*/

.toast {
  position: fixed;
  display: none;
  z-index: var(--layer-5);

  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

  /* border: var(--border-size-2) solid var(--color-success); */
  background-color: var(--color-success);

  padding: var(--size-fluid-2);
}

.toast p {
  text-align: center;
}

.toast.is-error {
  /* border: var(--border-size-2) solid var(--color-error); */
  background-color: var(--color-error);
}

/*
------------------------------
MAIN
------------------------------
*/

main {
  container-type: inline-size;
  /* width: var(--page-width); */
}

/*
------------------------------
SECTIONS
------------------------------
*/

section {
  display: grid;
  grid-template-columns: 1fr var(--page-width) 1fr;
  place-items: center;

  background-color: var(--color-subdued);

  padding-block: var(--size-fluid-6);
}

/*
------------------------------
HERO
------------------------------
*/

.hero {
  position: relative;
  max-height: 40vh;
  height: 40vh;
  padding: 0;
}

.hero-heading {
  grid-column: 2;
  /* justify-self: end; */

  display: flex;
  flex-direction: column;
  gap: var(--size-fluid-1);
  z-index: 1;
}

.hero-heading h1 {
  color: var(--color-accent);
  text-transform: uppercase;
  line-height: 1;
}

.hero-heading h3 {
  align-self: end;
}

.hero-image {
  position: absolute;
  width: 100%;
  height: 100%;
  /* filter: brightness(0.8); */
}

/*
------------------------------
SERVICES
------------------------------
*/

.services-content {
  grid-column: 2;

  display: grid;
  place-items: center;
  gap: var(--size-fluid-4);
  grid-template-columns: repeat(3, 1fr);
}

.services-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  transition: transform 0.2s ease;

  /* scale: 0.5; */
  /* opacity: 0; */
}

.services-card > p {
  font-size: var(--font-size-fluid-1);
  max-width: 100%;
}

.services-card:not(.services-logo):hover {
  transform: translate(8px, -8px);
}

.services-card:hover::before {
  transform: translate(-16px, 16px);
}

.services-card::before {
  position: absolute;
  z-index: -1;
  content: "";

  width: 100%;
  height: 100%;

  transition: transform 0.2s ease;

  background-color: var(--color-accent);
}

.services-content p {
  position: absolute;
  z-index: 1;
  bottom: 0;
  padding: var(--size-relative-2) var(--size-relative-3);
  background-color: rgba(0, 0, 0, 0.5);
}

.services-logo {
  width: 70%;
  height: auto;
}

.services-content img {
  width: 100%;
  aspect-ratio: 1;
  max-width: 320px;
}

@media (max-width: 900px) {
  .services-content {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-logo {
    display: none;
  }
}

@media (max-width: 600px) {
  .services-content {
    grid-template-columns: 1fr;
  }
}

/*
------------------------------
BLANK
------------------------------
*/

.blank {
  background-color: transparent;
  max-height: 40vh;
  height: 40vh;
  padding: 0;
}

/*
------------------------------
ABOUT
------------------------------
*/

.about {
  background-color: var(--color-accent);
}

.about-content {
  grid-column: 2;

  display: flex;
  flex-wrap: wrap;
  gap: var(--size-fluid-6);
  align-items: center;
}

.about-details:first-child {
  /* text-align: right; */
  position: relative;
}

.about-details:first-child::after {
  content: "";
  position: absolute;

  right: calc(var(--size-fluid-6) / 2 * -1);
  top: 10%;

  width: var(--border-size-2);
  height: 80%;

  background-color: var(--color-default);

  opacity: 0.5;
}

.about-details > span {
  display: block;
  margin-bottom: var(--size-fluid-2);
}

.about-details > p {
  font-size: var(--font-size-fluid-1);
}

@media (max-width: 650px) {
  .about-content {
    gap: var(--size-fluid-5);
  }

  .about-details:first-child::after {
    display: none;
  }
}

@media (max-width: 1200px) {
  .about {
    place-items: start;
  }
}

/*
------------------------------
CONTACT
------------------------------
*/

.contact-content {
  grid-column: 2;

  display: flex;
  flex-wrap: wrap;
  gap: var(--size-fluid-5);

  color: var(--color-accent);
}

.contact-content h2 {
  margin-bottom: var(--size-fluid-2);
}

.contact-image {
  width: 170px;
  height: 170px;
  border-radius: 50%;
}

.contact-address > p {
  font-size: var(--font-size-fluid-1);
}

.contact-address a {
  color: var(--color-accent);
}

.contact-address table {
  display: table;
  border-collapse: collapse;
}

/* .contact-address th,
.contact-address td {
  vertical-align: top;
} */

.contact-address table td:first-child {
  padding-right: var(--size-fluid-1);
}

.contact-form {
  display: grid;
  grid-template-columns: minmax(200px, 500px);
}

.contact-form label {
  display: none;
}

.contact-form-send {
  --icon-size: 1em;
  --icon-color: var(--color-accent);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-relative-1);

  width: fit-content;

  margin-top: var(--size-fluid-3);
}

@media (max-width: 1200px) {
  .contact {
    place-items: start;
  }
}

@media (max-width: 1500px) {
  .contact-image {
    display: none;
  }
}

/*
------------------------------
MAPS
------------------------------
*/

.map {
  padding-block: 0;
}

.map iframe {
  grid-column: span 3;
  width: 100%;
}

/*
------------------------------
FOOTER
------------------------------
*/

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-relative-4);
  padding: var(--size-relative-4);
  background-color: var(--color-accent);
}