/*
  Base Styles
*/
@font-face {
  font-family: "Cocon Light";
  src: url("../fonts/5557928/69a92115-ca68-42f2-b4a5-5990deeab636.woff2") format("woff2"),
       url("../fonts/5557928/dc691e02-de94-48f7-8857-84345e6e4e21.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cocon Bold";
  src: url("../fonts/5560034/fdbb7e1a-78b0-4461-8e4a-1178d0237f38.woff2") format("woff2"),
       url("../fonts/5560034/7286acef-16dc-44ef-933e-e6ce3539fb40.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
/*  Fluid Type Scale – with type scale step 1.2 Minor Third */
/* @link https://utopia.fyi/type/calculator?c=346,16,1.2,1140,20,1.2,2,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,xl,3xl,6 */
  --step--2: clamp(0.6944rem, 0.6188rem + 0.3498vw, 0.8681rem);
  --step--1: clamp(0.8333rem, 0.7425rem + 0.4198vw, 1.0417rem);
  --step-0: clamp(1rem, 0.8911rem + 0.5038vw, 1.25rem);
  --step-1: clamp(1.2rem, 1.0693rem + 0.6045vw, 1.5rem);

/* @link https://utopia.fyi/space/calculator?c=346,16,1.2,1140,20,1.2,2,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|s-xl&g=s,xl,3xl,6 */
/*  Fluid Grid */
  --space-s-xl: clamp(1rem, -0.1984rem + 5.5416vw, 3.75rem);

/*  Fluid Grid */
/* @link https://utopia.fyi/grid/calculator?c=346,16,1.2,1140,20,1.2,2,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,xl,3xl,6 */
  --grid-max-width: 71.25rem;
  --grid-gutter: var(--space-s-xl, clamp(1rem, -0.1984rem + 5.5416vw, 3.75rem));
  --grid-columns: 6;

  --color-brown: #594638;
  --color-red: #d75155;
  --color-red-light: #e17476;
  --color-light: #f6f5f3;
  --color-text: var(--color-brown);
  --color-background: var(--color-light);
  
  --font-family-light: "Cocon Light", sans-serif;
  --font-family-bold: "Cocon Bold", sans-serif;
  
  --leading-solid: 1;
  --leading-title: 1.25;
  --leading-copy: 1.6;
  --leading-double: 2;

  --p-blank-line: calc(var(--leading-copy) * 1em);
  --p-bottom-spacing: calc(var(--leading-copy) * 1em);

  --padding: 1rem;
}

/* Some kind of Basics and Resets */
*, *:before, *:after {
  margin: 0;
  padding: 0;
  border: 0;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
article, aside, figcaption, figure, figure img, footer, header, main, nav, section, video {
  display: block;
}
ol, ul, li {
  list-style: none;
}
a, area, button, input, label, select, summary, textarea, [tabindex] {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}
a {
  color: currentColor;
  text-decoration: none;
}  
button {
  font: inherit;
  background: none;
  border: 0;
  color: currentColor;
  cursor: pointer;
}
img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.icon svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: currentColor;
}
iframe {
  width: 100%;
  max-width: 100%;
}
hr {
  display: block;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
table {
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
abbr {
  cursor: help;
  text-decoration: none;
  border-bottom: 2px dotted currentColor;
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
strong, b {
  font-weight: 600;
}
small {
  font-size: inherit;
}
sup, sub {
  font-size: 60%;
}
sub {
  vertical-align: -22%;
}
mark {
  background-color: transparent;
}


* {
  box-sizing: border-box;
}

html {
  /* Font rendering and optimization */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  /* Base typography */
  font-family: var(--font-family-light);
  font-weight: 300;
  line-height: var(--leading-copy);
  /* Root colors */
  background-color: var(--color-background);
  color: var(--color-text);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  margin: 0 auto;
  min-height: calc(100vh + 1px);
  overflow-x: hidden;
  background-image: url(../img/bg.jpg);
  background-repeat: repeat;
  font-size: var(--step-0);
}

figure { margin: 0; }
.bg {background: var(--color-background);}
.transparent {background-color: rgba(246, 245, 243, 0.75);}
.flex {display: flex; flex-direction: column; gap: clamp(1rem, 0.3463rem + 3.0227vw, 2.5rem);}
.ph2 { padding-inline: var(--padding);}
.pt6 { padding-top: 6rem;}

.u-container {
  max-width: var(--grid-max-width);
  padding-inline: var(--grid-gutter);
  margin-inline: auto;
  box-shadow: 0 0 20px -4px rgba(89, 70, 56, 0.75);
}
.u-grid {
  display: grid;
  gap: var(--grid-gutter);
}


/*
  Header Styles
*/
.main-header {
  position: relative;
  height: 105px; /* Höhe für mobile Ansicht */
}
.header-grid {
  display: flex;
  justify-content: center; /* Zentriert die Elemente horizontal */
  align-items: center; /* Zentriert die Elemente vertikal */
  height: 100%;
  position: relative;
  background-image: url(../img/holzflaeche-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.brand {
  position: relative;
  top: 3rem;
  z-index: 10;
  width: 160px;
}
.sticker {
  position: absolute; /* Absolut positioniert, um rechts zu sitzen */
  top: 75%;
  right: -0.75rem;
  transform: translateY(-50%); /* Zentriert den Sticker vertikal */
  z-index: 1;
}
.brand img, .sticker img {
  max-width: 100%;
  height: auto;
}
.sticker img {
  width: 110px;
}

/*
  Main Content Styles
*/
.main {
  position: relative;
  background-color: rgba(246, 245, 243, 0.75);
}
.main .u-container {
  padding-top: clamp(6rem, 3.8212rem + 10.0756vw, 11rem);
  padding-bottom: clamp(4rem, 2.2569rem + 8.0605vw, 8rem);
}

.sidebar {
  position: relative;
  width: 100%;
}
.article {
  position: relative;
  width: 100%;
}

/*
  Navigation
*/
.nav {
  display: block; /* Umschließt das Menü und den Button */
  position: relative;
  z-index: 3;
}
.nav ul {
  margin: 0;
  padding: 2rem 0 0;
  list-style: none;
  overflow: hidden;
}
.nav li {
  text-align: center;
}
.nav li a {
  font-family: var(--font-family-bold);
  font-weight: 700;
  font-size: var(--step--1);
  line-height: var(--leading-solid);
  text-transform: uppercase;
  color: var(--color-light);
  background-image: url(../img/btn-nav.png);
  background-repeat: no-repeat;
  position: relative;
  display: block;
  padding: 20px;
  background-position: center;
}
.nav li a:hover,
.nav li .active {
  background-image: url(../img/btn-nav-active.png);
}
.nav .menu {
  max-height: 0;
  transition: max-height .3s ease-out;
  overflow: hidden;
  padding: 0 0 0 64px;
  list-style: none;
}
.nav .menu-icon {
  display: inline-block;
  float: right; /* Positioniert das Icon auf der rechten Seite */
  padding: 28px 20px;
  cursor: pointer;
  user-select: none;
}
.nav .menu-icon .navicon {
  background: var(--color-red);
  display: block;
  height: 2px;
  position: relative;
  transition: background .3s ease-out;
  width: 1.5rem;
}
.nav .menu-icon .navicon:before,
.nav .menu-icon .navicon:after {
  background: var(--color-red);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .3s ease-out;
  width: 100%;
}
.nav .menu-icon .navicon:before {
  top: 7px;
}
.nav .menu-icon .navicon:after {
  top: -7px;
}
.nav .menu-btn {
  display: none;
}
.nav .menu-btn:checked ~ .menu {
  max-height: 100vh;
}
.nav .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
.nav .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}
.nav .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}
.nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

.social {
  position: absolute; /* Positioniert die Icons absolut */
  top: 12px; /* Richtet die Icons vertikal auf Höhe des Hamburger-Menüs aus */
  left: auto;
  z-index: 4; /* Stellt sicher, dass die Icons über dem Menü stehen */
}

.social-icons {
  display: flex;
  justify-content: flex-end; /* Richtet die Icons an der rechten Seite aus */
  align-items: center;
  gap: 0.75rem;
}


/* Farben der SVG-Icons anpassen */
.social-icons a svg {
  fill: var(--color-brown); /* Standardfarbe der Icons */
  transition: fill 0.3s ease; /* Übergang für den Hover-Effekt */
}

/* Hover-Effekt */
.social-icons a:hover svg {
  fill: var(--color-red); /* Farbe der Icons bei Hover */
}

/*
  Typography and Content Styles
*/
h1, h2, h3 {
  font-family: var(--font-family-bold);
  letter-spacing: 0.04rem;
  line-height: var(--leading-title);
  text-transform: uppercase;
}
h1 {
  font-size: var(--step-1);
  margin: 0 0 24px 0;
}
h2, h3, .article p, .article li {
  font-size: var(--step-0);
  margin: 0;
}
.article p, .article ul {
  margin: 0 0 var(--p-bottom-spacing);
}
.article p a {
  font-family: var(--font-family-bold);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-red);
}
.article p a:hover {
  color: var(--color-brown);
}
.article strong {
  font-family: var(--font-family-bold);
  text-transform: uppercase;
}
.article figure {
  margin: 0 0 24px 0;
  box-shadow: 0 0 20px 0px rgba(89, 70, 56, 0.75);
}
.article ul {
  margin-left: 18px;
  list-style-type: none;
}
.article li {
  text-indent: -18px;
}
.article li:before {
  content: "– ";
  padding-right: 6px;
}
.moretext p {
  font-size: var(--step--1) !important;
}

/*
  Footer Styles
*/
.site-footer {
  display: block;
  position: relative;
  width: 100%;
  min-height: 200px;
}
.footer-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(6rem, 3.8212rem + 10.0756vw, 11rem);
  height: 100%;
  padding: 3rem var(--padding) var(--padding);
  background-image: url(../img/holzflaeche-footer-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.site-footer p, .site-footer a, .site-footer li {
  font-size: var(--step--1);
  text-align: center;
  color: var(--color-light);
}
.site-footer a {
  font-family: var(--font-family-bold);
  text-transform: uppercase;
}
.site-footer p:last-of-type {
  margin-bottom: 0;
}
.site-footer a:hover {
  color: var(--color-red);
}
.site-footer li {
    display: inline;
    padding-right: 0.5rem;
  }

.mwm {
  position: absolute;
  top: -50px;
  left: clamp(1rem, 0.1285rem + 4.0302vw, 3rem);
  z-index: 10;
}
.mwm img {
  width: 80px;
}

.legale, .copyright {
  width: 100%;
  text-align: center;
}




/*
  Responsiveness
*/
@media (min-width: 48em) {
  .pt6 { padding-top: 11rem;}
  .flex {flex-direction: row;}

  .main-header {
    height: 200px;
  }
  .header-grid {
    display: block;
    position: relative;
    height: 100%;
  }
  .brand {
    position: absolute;
    top: 1.3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 275px;
  }
  .sticker {
    position: absolute;
    top: 98%;
    right: -2rem;
    width: 220px;
  }
  .sticker img {
    width: 220px;
  }
  .sidebar {
    flex: 0 0 20%;
  }
  .article {
    flex: 1;
    max-width: 80%;
    padding-right: 5vw;
  }
  .nav {
    display: block;
    width: 100%;
  }
  .nav .menu-icon {
    display: none;
  }
  .nav .menu {
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .nav ul {
    width: 100%;
    text-align: center;
  }
  .nav li {
    display: block;
    text-align: center;
  }
  .nav li a {
    width: 100%;
  }
  .social {
    position: static; 
    top: auto;
    left: auto;
    margin-top: 1.5rem;
  }
  .social-icons {
    display: flex;
    justify-content: center; 
    gap: 1.5rem;
  }
  h1 {
    margin: 0 0 40px 0;
  }
  .article figure {
    margin: 0 0 40px 0;
  }
  .article ul {
    margin-left: 26px;
  }
  .article li {
    text-indent: -26px;
  }
  .article li:before {
    padding-right: 10px;
  }
  .mwm img {
    width: 140px;
  }
}




/* Form Styles */
/* Generelle Formular-Gestaltung */
form {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: var(--p-bottom-spacing);
  padding: var(--p-blank-line);
  box-shadow: 0 0 20px -4px rgba(89, 70, 56, 0.5);
}

/* Wählt nur div-Elemente aus, die direkt eine Checkbox enthalten. */
form > div:has(input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: 1rem; /* Erhöhter Abstand für bessere Lesbarkeit auf allen Geräten */
}

/* Passt das Label-Element innerhalb des Checkbox-Containers an */
form > div:has(input[type="checkbox"]) label {
  margin: 0;
  font-size: var(--step--1);
  /* Entfernt das explizite 'display', damit es sich besser in den Flexbox-Container einfügt */
  display: unset;
}

/* Styling für die Checkbox selbst */
input[type="checkbox"] {
  width: 1.25rem !important;
  height: 1.25rem !important;
  border: 2px solid var(--color-brown);
  margin-right: 0.5rem;
  background-color: transparent;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Checked-Zustand der Checkbox */
input[type="checkbox"]:checked {
  background-color: var(--color-brown);
  border-color: var(--color-brown);
}

/* Pseudo-Element für den Haken im Checked-Zustand */
input[type="checkbox"]:checked::after {
  content: "✔";
  display: block;
  font-size: 1rem;
  line-height: 1.25rem;
  color: var(--color-light);
  text-align: center;
}

/* Fokus-Stil für Checkbox */
input[type="checkbox"]:focus {
  outline: 2px solid var(--color-brown);
  outline-offset: 2px;
}

/*
  Layout und Stil für die anderen Eingabefelder
*/

/* Blendet die Pfeile für num_ber-Eingabefelder (Telefonnummer) aus */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="text"], 
input[type="email"], 
input[type="number"], 
select, 
textarea {
  width: 100%;
  padding: 0.75rem;
  background-color: var(--color-light);
  border: 1px solid var(--color-brown);
  border-radius: 4px;
  font-family: var(--font-family-light);
  font-size: var(--step-0);
  color: var(--color-brown);
  padding-right: 2.5rem;
}

/* Spezielle Anpassungen für Dropdown-Menüs auf mobilen Geräten */
@media (max-width: 768px) {
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23594638"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
  }
}

/* Fokus-Stil für Eingabefelder (außer Checkbox) */
input:not([type="checkbox"]):focus, 
select:focus, 
textarea:focus {
  outline: 2px solid var(--color-brown);
  border-color: transparent;
}

/* Labels */
label {
  display: block;
  font-family: var(--font-family-bold);
  font-size: var(--step--1);
  color: var(--color-brown);
  margin-bottom: 0.5rem;
}

div:has(> label):not(:last-of-type) {
  margin-bottom: var(--p-blank-line);
}

/* Optionaler Stern für Pflichtfelder */
label em {
  font-style: normal;
  color: var(--color-red);
}

/* Senden-Button */
button[type="submit"] {
  width: 50%;
  max-width: 250px;
  margin-top: var(--p-blank-line);
  align-self: center;
  padding: 1rem 2rem;
  background-color: var(--color-brown);
  color: var(--color-light);
  border: none;
  border-radius: 4px;
  font-family: var(--font-family-bold);
  font-size: var(--step-0);
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}

button[type="submit"]:hover {
  background-color: var(--color-red);
  color: var(--color-light);
}

/* Fehlermeldungen */
[data-error] {
  color: var(--color-red);
  font-size: var(--step--2);
  margin-top: 0.25rem;
  display: block;
}