/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* -------------------------------------------------------------------------- */
/*                         //NOTE Media + Tastenkürzel                        */
/* -------------------------------------------------------------------------- */

/*




FARBEN NEU
----------

Hintergrund obergine
#20191c


hellbraun: #bf6959

----------------------------


@media (max-width: 449px) {
    Handy klein
}

@media (min-width: 450px ) {
    Handy größer
}

@media (min-width: 768px ) {
    beginn der 1-Spaltigkeit
}

@media (min-width: 992px ) {

}

@media (min-width: 1500px ) {

}

________________________________________________________________________________
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	…
}
________________________________________________________________________________

*/

/*
Tastenkürzel um Kommentarblöcke zu erzeugen
*/

/* Shift + Alt + X */
/* -------------------------------------------------------------------------- */
/*                               Shift + Alt + X                              */
/* -------------------------------------------------------------------------- */

/* Alt + X */
/* --------------------------------- Alt + X -------------------------------- */

/* Alt + Y */
/* -------------------------------------------------------------------------- */

/* Strg + # */
/*  */

/* -------------------------------------------------------------------------- */
/*                                //NOTE Fonts                                */
/* -------------------------------------------------------------------------- */

/* playfair-display-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/playfair-display-v36-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  src: url("./fonts/playfair-display-v36-latin-italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* albert-sans-100 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 100;
  src: url("./fonts/albert-sans-v4-latin-100.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* albert-sans-200 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 200;
  src: url("./fonts/albert-sans-v4-latin-200.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* albert-sans-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 300;
  src: url("./fonts/albert-sans-v4-latin-300.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* albert-sans-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/albert-sans-v4-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* albert-sans-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/albert-sans-v4-latin-500.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* albert-sans-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/albert-sans-v4-latin-600.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* albert-sans-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/albert-sans-v4-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* albert-sans-800 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 800;
  src: url("./fonts/albert-sans-v4-latin-800.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* albert-sans-900 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 900;
  src: url("./fonts/albert-sans-v4-latin-900.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* -------------------------------------------------------------------------- */
/* ------------------------------- Kontrolltag ------------------------------ */
/* nur aktivieren um zu kontrollieren das jede Class überschrieben wird */

/* 
* {
    font-size: 10px !important;
    color: blue !important;
} 
*/

/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/*                            //NOTE The7 allgemein                           */
/* -------------------------------------------------------------------------- */

/* .null {
  color: #f4f2ef;
  color: #d3cbbe;

  color: #5c5759;
} */

body {
  /* background-color: rgb(212, 203, 190, 0.25);
  background: rgb(212, 203, 190, 0.25); */
  background-color: #20191c;
  background: #20191c;
  -webkit-font-smoothing: antialiased;
}

body,
html {
  font-size: 15px;
  font-family: "Albert Sans";
}

@media screen and (min-width: 768px) {
  body,
  html {
    font-size: 15px;
  }
}

@media screen and (min-width: 1200px) {
  body,
  html {
    font-size: 16px;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Playfair Display" !important;
  line-height: 1.3;
  font-weight: 400;
  margin: 0;
  padding: 0;
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
}

h1 {
  font-size: 2rem;
  letter-spacing: -0.5px;
}

h2 {
  font-size: 1.7rem;
}

h3 {
  font-size: 1.7rem;
}

h4,
h5 {
  font-size: 1.4rem;
}

h6 {
  font-size: 1.2rem;
}

a:link,
a:visited {
  color: #bf6959;
  font-weight: 300;
  text-decoration: none;
}

a:hover,
a:active {
  text-decoration: underline;
}

p,
li {
  font-family: "Albert Sans";
  font-weight: 300;
}

.font400,
.font400 p {
  font-weight: 400;
}

@media screen and (min-width: 768px) {
  p,
  li {
  }
}

b,
strong {
  font-weight: 700;
}

/* kein unterer Abstand von Editorelementen */
.wpb_button,
.wpb_content_element,
ul.wpb_thumbnails-fluid > li {
  margin-bottom: 0;
}

.vc_section.conmaxwidth {
padding: 0;
}

.conmaxwidth {
  max-width: 1030px;
  margin: 0 auto;
}


.conminwidth {
  max-width: 768px;
  margin: 0 auto;
}


/* ab hier temporäre Startseite */

.icenter {
  text-align: left;
}

.center * {
  text-align: center;
}

.tbold p {
  font-family: "Playfair Display";
  font-size: 1.6rem;
  line-height: 1.3;
}

.tnormal p {
  font-family: "Albert Sans";
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5;
}

@media (min-width: 992px) and (max-width: 11100px) {
  .tbold p {
    font-size: 1.4rem;
  }
}

@media (max-width: 992px) {
  .tnormal p {
    font-size: 1rem;
  }
}

.dsmax {
  width: 100%;
  max-width: 350px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* nur bei temporärer Startseite !!! */
a.flatlinks {
  color: #bf6959;
  position: relative;
  z-index: 2;
  text-decoration: none !important;
  display: inline-block;
}

a.flatlinks:hover {
}

a.flatlinks::before {
  content: "";
  background-color: #bf6959;
  position: absolute;
  left: -2px;
  bottom: 1px;
  width: calc(100% + 4px) !important;
  height: 1px;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}

a.flatlinks:hover::before {
  background-color: #bf6959;
  bottom: 1px;
  height: 1px;
  z-index: -1;
}

/* -------------------------------------------------------------------------- */

.spincontainer {
  position: relative;
}

@media (max-width: 450px) {
  .spincontainer.spin_mobil {
    max-width: 200px;
  }
}

@media (max-width: 767.999px) {
  .spincontainer.spin_mobil {
    max-width: 60vw;
  }
}

.spincontainer img {
  margin: 0;
  padding: 0;
}

.bildz1 {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

.bildz2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  animation-name: spin1;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.bildz3 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  animation-name: spin2;
  animation-duration: 40s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.bildz4 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  animation-name: spin3;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin1 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes spin2 {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes spin3 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* -------------------------------------------------------------------------- */

/* jedem Absatz mehr Abstand nach unten.... */
p,
.likep {
  font-size: 0.95rem;
  line-height: 1.5 !important;
  padding-bottom: 20px;
  margin-bottom: 0 !important;
}

.p_nobottom {
  padding-bottom: 0;
}

.p_nopad {
  padding: 0 !important;
}

.tcenter,
.tcenter p {
  text-align: center;
}

.tblack,
.tblack * {
  color: #000000 !important;
}

.twhite,
.twhite * {
  color: #f4f2ef !important;
}

.likeh2 {
    font-family: "Playfair Display" !important;
  line-height: 1.4;
  font-weight: 400;
  font-size: 1.6rem;
}

/* -------------------------------------------------------------------------- */
/*                              //NOTE Schriften                              */
/* -------------------------------------------------------------------------- */

/* große Schrift wie Überschrift */
.h2like,
.h2like p,
.h2like_c,
.h2like_c2 p,
.h2like_c p {
  font-family: "Playfair Display";
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.3;
  padding-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .h2like_c,
  .h2like_c2 {
    margin: 3rem auto 3rem auto;
  }

  .h2like_c,
  .h2like_c p {
    text-align: center;
    max-width: 700px;
  }

  .mwtemp,
  .mwtemp p {
    text-align: center;
    max-width: 650px;
  }



  .h2like_c2 p {
    text-align: center;
    max-width: 800px;
  }

.h2like,
.h2like p,
.h2like_c,
.h2like_c2 p,
.h2like_c p {
  font-size: 1.75rem;

}

}

/* shop Überschriften und groß */

.h3shop,
.h3shop p {
  font-family: "Playfair Display";
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.3;
  padding-bottom: 1.25rem;
  margin-top: -7.5px;
}

/* mittlere Schrift wie Überschrift */
.h4like,
.h4like p {
  font-family: "Playfair Display";
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.3;
  padding: 0.75rem 0 2rem 0;
}

.h5shop,
.h5shop p {
  font-family: "Playfair Display";
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.3;
  padding: 0.75rem 0 1rem 0;
}

.gedehnt,
.gedehnt p {
  letter-spacing: 0.4em;
}

/* italic Schrift */
.font_i {
  font-style: italic;
}

/* ---------------------------------- Links --------------------------------- */

/* Icons - Winkel */
.icon_winkel::before {
	display: inline-block;
	content: "";
	width: 13px;
	height: 13px;
	border-right: 4px solid currentColor;
	border-bottom: 4px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.3s ease;
	margin: 13px 12px 0 0;

}

a.icon_winkel:link,
a.icon_winkel:visited {
  color: #bf6959;
  text-decoration: none;
}

@media (min-width: 768px) {
  a.icon_winkel:link,
  a.icon_winkel:visited {
    color: #f4f2ef;
    text-decoration: none;
  }
}

.whitebg a.icon_winkel:link,
.whitebg a.icon_winkel:visited {
  color: #bf6959;
  text-decoration: none;
}

a.flatlink:link,
a.flatlink:visited {
  color: #bf6959;
  text-decoration: underline solid #bf6959 1px;
}

a.flatlink:hover,
a.flatlink:active,
a.flatlink_a {
  color: #bf6959;
  text-decoration: none;
}

@media (min-width: 768px) {
  .inhalt_1_3_shop a.flatlink:link,
  .inhalt_1_3_shop a.flatlink:visited,
  .inhalt_sd a.flatlink:link,
  .inhalt_sd a.flatlink:visited {
    color: #f4f2ef;
    text-decoration: underline solid #f4f2ef 1px;
  }

  .inhalt_1_3_shop a.flatlink:hover,
  .inhalt_1_3_shop a.flatlink:active,
  .inhalt_sd a.flatlink:hover,
  .inhalt_sd a.flatlink:active {
    color: #f4f2ef;
    text-decoration: none;
  }
}

.h4like a.flatlink:link,
.h4like a.flatlink:visited {
  color: #f4f2ef;
  text-decoration: underline solid #f4f2ef 1px;
}

.h4like a.flatlink:hover,
.h4like a.flatlink:active,
.h4like a.flatlink_a {
  color: #f4f2ef;
  text-decoration: none;
}

.project-content .gedehnt,
.project-content .h4like {
  color: #f4f2ef;
}

/* -------------------------------------------------------------------------- */
/*                                //NOTE Layout                               */
/* -------------------------------------------------------------------------- */

.over_center {
  color: #bf6959;
}

@media (min-width: 992px) {
  .over {
    position: absolute;
    text-align: center;
    margin-left: -35px;
    z-index: 9;
  }

  .over2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    z-index: 9;
    text-align: center;
    width: 100%;
  }

.over3 {
    position: relative;
    z-index: 9;
    width: 100%;
    margin-top: -90px;
    right: 15px;
}


  .over_center2 {
    width: min(520px, 38vw);
    box-sizing: border-box;
    padding: 40px;
    margin: auto;
    text-align: left;
    background-color: #bf6959;
    color: #f4f2ef;
  }

.over11 {
    position: relative;
    z-index: 9;
    margin-top: -90px;
}


  .over_center11 {
    width: 500px;
    min-width: 500px;
    box-sizing: border-box;
    padding: 40px;
    text-align: left;
        margin-left: auto;
    margin-right: 0;
    background-color: #bf6959;
    color: #f4f2ef;
  }

    .over_center8 {
    width: 100%;
    box-sizing: border-box;
    padding: 40px;
    margin: auto;
    text-align: left;
    background-color: #bf6959;
    color: #f4f2ef;
  }

      .over_center9 {
    width: 100%;
        aspect-ratio: 1 / 1;
    box-sizing: border-box;
    padding: 40px;
    margin: auto;
    text-align: left;
    background-color: #bf6959;
    color: #f4f2ef;
  }



  .over_center10 {
    width: 100%;
        aspect-ratio: 1 / 1;
    box-sizing: border-box;
    margin: auto;
    text-align: center;
    background-color: #f3f1ed;
  }

  .over_center {
    width: calc(50% - 80px);
    padding: 40px;
    text-align: left;
    margin: auto;
    background-color: #bf6959;
    color: #f4f2ef;
  }

  .over_center p:last-child {
    padding-bottom: 0;
  }
}

.over_single_right {
  color: #f4f2ef;
}

@media (min-width: 992px) {
  .over_single_right {
    margin-left: -50%;
    /* margin-top: -10px; */
    padding: 40px;
    background-color: #bf6959;
    color: #f4f2ef;
  }

  .over_single_right p:last-child {
    padding-bottom: 0;
  }
}

.inhalt_1_3 {
  color: #bf6959;
}

@media (min-width: 768px) {
  /* Element über Slider Home-Seite */
  .container_1_3 {
    position: relative;
    right: 0;
    top: 0;
    z-index: 9;
  }

  .inhalt_1_3 {
    /* Breite minus padding rechts und links */
    width: calc(50% + 80px);
    padding: 40px;
    min-height: 100px;
    text-align: left;
    margin: -150px 0 0 auto;
    background-color: #bf6959;
    color: #f4f2ef;
  }

  .inhalt_1_3 p:last-child {
    padding-bottom: 0;
  }

  .container_1_3_shop {
    position: absolute;
    left: 0 !important;
    /* top: 0;  */
        z-index: 9;
  }

  .inhalt_1_3_shop {
    /* Breite minus padding rechts und links */
    width: calc(50% - 80px);
    padding: 40px;
    min-height: 100px;
    text-align: left;
    margin: 0 0 -35px 0;
    background-color: #bf6959;
    color: #f4f2ef;
  }

  /* hebt einen Bildcontainer hoch Abstand von oben -25px */
  .choch {
    margin-top: -125px;
  }

  /* ---- */

  .container_1_3_left {
    position: absolute;
    z-index: 9;
  }

  .inhalt_1_3_left_c {
    /* Breite minus padding rechts und links */
    width: calc(50% - 80px);
    padding: 40px;
    margin-top: -25px;
    min-height: 100px;
    text-align: left;
    background-color: #bf6959;
    color: #f4f2ef;
  }

  .inhalt_1_3_left_c p:last-child {
    padding-bottom: 0;
  }

  .inhalt_1_3_left_d {
    /* Breite minus padding rechts und links */
    width: calc(50% - 80px);
    padding: 40px;
    margin-bottom: 50px;
    min-height: 100px;
    text-align: left;
    background-color: #bf6959;
    color: #f4f2ef;
  }

  .inhalt_1_3_left_d p:last-child {
    padding-bottom: 0;
  }
}



.mwkontakt {
  width: 100%;
max-width: 640px;
}


.cslidertunten {
margin-bottom: -100px;
}


/* -------------------------------------------------------------------------- */
/*                               Makin of Seite                               */
/* -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .container_1_2_left {
    position: relative;
    right: 0;
    top: 0;
    z-index: 9;
  }

    .container_1_2_right {
    position: relative;
    left: calc(50% + 80px);
    right:0 !important;
    top: 0;
    z-index: 9;
  }

  .inhalt_1_2_left_c {
    width: calc(50% - 80px);
    padding: 40px;
    margin-top: -650px;

    min-height: 300px;
    text-align: left;
    background-color: #bf6959;
    color: #f4f2ef;
  }

    .mt {
    margin-top: -520px;
  }


  .inhalt_1_2_left_c p:last-child {
    padding-bottom: 0;
  }
}

@media (min-width: 1200px) { 
.container_1_2_right {
    position: relative;
    left: calc(50% + 60px);
    right:0 !important;
    top: 0;
    z-index: 9;
  }
}

@media (min-width: 768px) {
  .over_mo {
    position: relative;
    /* text-align: center; */
    margin-left: -35px;
    margin-top: -220px;
    z-index: 9;
  }

  .over_center_mo {
    width: calc(50% - 80px);
    padding: 40px;
    text-align: left;
    margin: auto;
    background-color: #bf6959;
    color: #f4f2ef;
  }

  .over_center_mo p:last-child {
    padding-bottom: 0;
  }

  .over_mo_imgright {
    margin-top: 125px;
  }

  /* ----------------------------- Making of unten ---------------------------- */

  .container_1_3_mo {
    position: relative;
    right: 0;
    top: 0;
    z-index: 9;
  }

  .inhalt_1_3_mo {
    width: calc(50% - 92.5px);
    padding: 40px;
    min-height: 100px;
    text-align: left;
    margin: -250px 0 -250px auto;
    background-color: #bf6959;
    color: #f4f2ef;
  }

  .inhalt_1_3_mo p:last-child {
    padding-bottom: 0;
  }
}

@media (min-width: 768px) {
  .container_1_2_left_mo {
    position: relative;
    right: 0;
    top: 0;
    z-index: 9;
  }

  .inhalt_1_2_left_c_mo {
    width: 60%;
    padding: 40px;
    margin-top: -240px;
    min-height: 100px;
    text-align: left;
    background-color: #bf6959;
    color: #f4f2ef;
  }

  .inhalt_1_2_left_c_mo p:last-child {
    padding-bottom: 0;
  }

  .img_mo_u {
    padding-left: 80px;
  }

  .img_mo_uright {
    margin-top: 340px;
  }

  .over_sd {
    position: relative;
    /* text-align: center; */
    margin-left: -35px;
    margin-top: -250px;
    margin-bottom: -180px;
    z-index: 9;
  }
}





/* --------------------------- Showroom Düsseldorf -------------------------- */

@media (min-width: 768px) {
  .inhalt_sd {
    width: calc(50% - 80px);
    padding: 40px;
    margin-top: -200px;

    min-height: 100px;
    text-align: left;
    background-color: #bf6959;
    color: #f4f2ef;
  }

  .inhalt_sd p:last-child {
    padding-bottom: 0;
  }
}

/* -------------------------------------------------------------------------- */

/* --------------------------------- Slider --------------------------------- */
/* keine grüne Einfärbung bei hover */
.rollover i,
.post-rollover i,
.rollover-video i,
.enable-bg-rollover .post-thumbnail-rollover::after,
.enable-bg-rollover .gallery-rollover,
.enable-bg-rollover.hover-scale figure::after {
  background-color: transparent;
}

@media (max-width: 767.999px) {
  /* dots mobil kleiner */
  .gallery-carousel-shortcode.gallery-carousel-shortcode-id-81cc2ba67431b935a09bd11473b22a2d
    .owl-dot {
    width: 30px !important;
    height: 30px !important;
    margin: 0 5px;
  }
}

/* -------------------- ab hier Interior und Styles-Seite ------------------- */

/* Pfeile ohne Unterstrich */
a.owl-prev:hover,
a.owl-next:hover {
  text-decoration: none !important;
}

/* -------------------------------------------------------------------------- */
/* funktioniert so nicht */
.animate {
  opacity: 0;
  transition: 0.3s ease-in;
  -ms-transform: translate(0px, 70px);
  -webkit-transform: translate(0px, 70px);
  transform: translate(0px, 70px);
}

.animate.showit {
  opacity: 1;
  -ms-transform: translate(0px, 0px);
  -webkit-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}

/* -------------------------------------------------------------------------- */

/* ------------------------------- About-Seite ------------------------------ */

@media (min-width: 768px) {
  .about_rad_oben {
    position: relative;
    z-index: 99;
    padding: 20px 40px 20px 40px;
    background-color: #bf6959;
    margin-bottom: -8rem;
    color: #f4f2ef;
  }

  .about_rad_unten {
    position: relative;
    z-index: 99;
    padding: 20px 40px 20px 40px;
    background-color: #bf6959;
    margin-top: -8rem;
    color: #f4f2ef;
  }

  .about_rad_mitte_over {
    position: absolute;
    z-index: 99;
  }

  .about_rad_mitte {
    padding: 20px 40px 20px 40px;
    background-color: #bf6959;
    width: 36%;
    margin-top: -25px;
    min-height: 100px;
    color: #f4f2ef;
  }
}

/* -------------------------------------------------------------------------- */
/*                               //NOTE Projekte                              */
/* -------------------------------------------------------------------------- */

/* Filter Übersichtsseite */

ul.vc_grid-filter {
  margin: 0px 0 50px -10px;
}

ul.vc_grid-filter li {
  font-weight: 400;
}

/* active Auswahl */
.vc_grid-filter.vc_grid-filter-color-grey > .vc_grid-filter-item.vc_active,
.vc_grid-filter.vc_grid-filter-color-grey > .vc_grid-filter-item:hover {
  background-color: transparent;
  font-weight: 400;
  text-decoration: underline solid #bf6959 2px;
}

.vc_gitem-post-data a {
  color: #f4f2ef;
  font-weight: 400;
}

.abstand_uebersicht {
  margin: 1rem 0 2rem 0;
}

/* Abstand nach Navigation */
.postbottom {
  padding-top: 2rem;
}

/* -------------------------------------------------------------------------- */
/* Tabellen ähnliche Anzeige für Projekte Location, Services, usw */

.projekt-table {
  display: table;
}

.projekt-table-row {
  display: table-row;
}

.projekt-table-cell {
  display: table-cell;
}

/* rechte Tabellenseite */
.projekt-table-cell:nth-child(2) {
  padding-left: 20px;
}

@media (min-width: 768px) and (max-width: 991px) {
  .projekt-table {
    display: block;
  }

  .projekt-table-row {
    display: block;
  }

  .projekt-table-cell {
    display: block;
  }

  /* rechte Tabellenseite */
  .projekt-table-cell:nth-child(2) {
    padding-left: 0;
    padding-bottom: 0.75rem;
  }
}

@media (min-width: 768px) {
  .projekt-table {
    padding-top: 3rem;
  }
}

/* linke Tabellenseite */
.projekt-table-cell:nth-child(1) {
  font-family: "Albert Sans";
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* rechte Tabellenseite */
.projekt-table-cell:nth-child(2) {
  font-family: "Albert Sans";
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* -------------------------------- Teppiche -------------------------------- */

@media (min-width: 768px) {
  .halbe_breite {
    max-width: 50%;
  }
}

/* -------------------------------------------------------------------------- */
/*                                 //NOTE Shop                                */
/* -------------------------------------------------------------------------- */

/* -------------------------- Shop Übersichtsseite -------------------------- */

a.uebercontentlink {
  text-decoration: none;
  color: #47474a !important;
  text-align: center;
}

a.uebercontentlink_ob {
  text-decoration: none;
  color: #47474a !important;
  text-align: center;
}

.uebercontent {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-around;
  /* justify-content: space-between; */
  align-items: center;
  padding: 3rem 0 3rem 0;
}

.uebercontent h3 {
  margin-top: 0;
}

.uebersicht50 > .vc_column_container > .vc_column-inner > .wpb_wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 10px;
  /* column-gap: 10px; */
}

.uebersicht50
  > .vc_column_container
  > .vc_column-inner
  > .wpb_wrapper
  > .wpb_content_element {
  background-color: #f4f2ef;
  /* aspect-ratio: 1 / 1.2;*/
  width: 100%;
  position: relative;
}

a.bgi::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 1px solid #f4f2ef;
  z-index: 5;
}

.hoverbg {
  position: absolute;
  top: 57%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 4;
}

@media (min-width: 768px) {
  .hoverbg {
    top: 55%;
  }
}

@media (min-width: 836px) {
  .hoverbg {
    top: 58.8%;
  }
}

@media (min-width: 1036px) {
  .hoverbg {
    top: 59.6%;
  }
}

@media (min-width: 1200px) {
  .hoverbg {
    top: 58.9%;
  }
}

a.uebercontentlink_ob {
  display: block;
  text-decoration: none;
  background-color: #f4f2ef;
  /* border: 1px solid #bf6959; */
}

a.uebercontentlink_ob::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 1px solid #bf6959;
  z-index: 5;
}

a.uebercontentlink:hover,
a.uebercontentlink_ob:hover {
  box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.35);
  /* Sanfter Schatten nach außen */
}

@media (min-width: 768px) {
  .uebersicht50 > .vc_column_container > .vc_column-inner > .wpb_wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 10px;
    /* column-gap: 10px; */
  }

  .uebersicht50
    > .vc_column_container
    > .vc_column-inner
    > .wpb_wrapper
    > .wpb_content_element {
    background-color: #f4f2ef;
    aspect-ratio: 1 / 1.3;
    width: calc(50% - 5px);
    position: relative;
  }

  .uebercontent {
    margin-bottom: 0;
    padding: 0;
  }

  a.uebercontentlink {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  a.uebercontentlink_ob {
    position: absolute;
    width: 100%;
    height: 100%;
    text-decoration: none;
    background-color: #f4f2ef;
    /* border: 1px solid #bf6959; */
  }

  img.ueberthumb {
    margin-bottom: -1rem;
  }
}

img.ueberthumb {
  max-width: 66%;
  height: auto;
}

.uebercontent p {
  /* padding: 0 2rem 0 2rem; */
  width: 70%;
  margin: auto;
}

@media (max-width: 768px) {
  .uebercontentlink.bgi {
    display: block;
    background-size: cover;

    /* height: calc(125vw - 40px); */

    aspect-ratio: 1 / 1.3;
    width: 100%;
  }
}

/* Backgroundimage */
.uebercontentlink.bgi {
  display: block;
  background-size: cover;
}

.bgi13 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 200px;
  background-size: cover;
}

/* ----------------------------- Musterservices ----------------------------- */

/* Startseite Brandcontainer */

.whitebg {
  background-color: #f4f2ef;
  color: #20191c;
  margin: 0;
  padding: 20px 15px 15px 15px;
}

@media (min-width: 768px) {
  .whitebg {
    padding: 40px 25px 15px 25px;
  }
}

.muster_left {
  background-color: #f4f2ef;
  color: #20191c;
  padding: 20px 15px 15px 15px;
}

@media (min-width: 768px) {
  .muster
    > .vc_column_container
    > .vc_column-inner
    > .wpb_wrapper
    > .wpb_raw_html
    > .wpb_wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 10px;
    color: #20191c;
  }

  .muster_left {
    position: relative;
    width: calc(67% - 60px);
    background-color: #f4f2ef;
    margin: 0;
    padding: 40px 25px 15px 25px;
  }

  .muster_right {
    position: relative;
    width: 33%;
  }

  .muster_bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
  }

  .muster_left {
    padding: 40px 25px 15px 35px;
  }
}

.show_right {
  color: #20191c;
  background-color: #f4f2ef;
  padding: 20px 15px 15px 15px;
}

@media (min-width: 768px) {
  .show_right {
    position: relative;
    width: calc(55% - 60px);
    background-color: #f4f2ef;
    margin: 0;
    padding: 40px 25px 15px 25px;
  }

  .show_left {
    position: relative;
    width: 45%;
  }

  .muster_bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
  }

  .show_right {
    padding: 40px 25px 15px 35px;
  }
}

@media (max-width: 768px) {
  .muster_bg.show_mob {
    position: relative;
    width: 100%;
    height: 70vw;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: -1rem;
    margin-bottom: 2rem;
  }
}

@media (min-width: 992px) {
  .ausgleich {
    display: block;
    padding-top: 25px;
  }
}

/* mobiler weißer Hintergrund Preise
@media (max-width: 767px) {
  .info_hg_white {
    background-color: #f4f2ef;
    padding: 10px 10px 0 5px !important;
    margin-left: 12.5px !important;
    width: calc(100% - 30px) !important;
  }
}
*/

@media (max-width: 768px) {
  .muster {
    color: #f4f2ef;
  }
}

/* -------------------------------------------------------------------------- */
/*                             //NOTE Shop Farben                             */
/* -------------------------------------------------------------------------- */

/* -------------------- Farben in Übersicht als Flexreihe ------------------- */

.ueberfarben {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

ul.farbenflex {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 1rem 0;
  padding: 0;
}

ul.farbenflex li {
  text-align: center;
  list-style-type: none;
  font-size: 13px;
  line-height: 1.25;
  width: 60px;
}

ul.groessenflex {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 0 1rem 0;
  padding: 0;
}

ul.groessenflex li {
  text-align: right;
  list-style-type: none;
  font-size: 13px;
  line-height: 1.25;
}

@media (max-width: 768px) {
  .ueberfarben span {
    width: 15px;
    height: 15px;
  }
}

/* -------------------------------- Formular -------------------------------- */

.farbe .wpcf7-list-item-label {
  display: none;
}

.wpcf7-list-item.first {
  margin: 0;
}

label:has(input[type="radio"][value="Sage"])::before {
  content: "";
  display: inline-block !important;
  width: 25px;
  height: 25px;
  background-image: url("./images/farben/sage.webp");
  background-size: cover;
  margin-right: 5px;
  vertical-align: bottom;
}

label:has(input[type="radio"][value="Caramel"])::before {
  content: "";
  display: inline-block !important;
  width: 25px;
  height: 25px;
  background-image: url("./images/farben/caramel.webp");
  background-size: cover;
  margin-right: 5px;
  vertical-align: bottom;
}

label:has(input[type="radio"][value="Off-White"])::before {
  content: "";
  display: inline-block !important;
  width: 25px;
  height: 25px;
  background-image: url("./images/farben/off_white.webp");
  background-size: cover;
  margin-right: 5px;
  vertical-align: bottom;
}

label:has(input[type="radio"][value="Autumn Rainbow"])::before {
  content: "";
  display: inline-block !important;
  width: 25px;
  height: 25px;
  background-image: url("./images/farben/autumn_rainbow.webp");
  background-size: cover;
  margin-right: 5px;
  vertical-align: bottom;
}

/* Selector der die ausgewählte Farbe ausgibt */
#selected-color::before {
  content: "ausgewählte Farbe: ";
}

/* --------------------------- Toogle mit Preisen --------------------------- */

/* Basis-Styles für die Box */
.box-container {
  display: inline-block;
  /* Container passt sich der Breite der Inhalte an */
  overflow: hidden;
  border: 1px solid #bf6959;
}

.box-content {
  display: grid;
  grid-template-columns: auto auto auto auto;
  /* 4 Spalten mit flexibler Breite */
  grid-auto-rows: auto;
  /* Die Zeilenhöhe passt sich dem Inhalt an */
  padding-bottom: 6px;
  max-height: 28px;
  /* Höhe für die eingeklappte Ansicht (anpassbar) */
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  width: auto;
  /* Breite passt sich dem Inhalt an */
}

/* Spalten-Styles */
.column {
  padding: 3px 10px 3px 10px;
  box-sizing: border-box;
  white-space: nowrap;
  /* Verhindert, dass der Inhalt umgebrochen wird */
  font-family: "Albert Sans";
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 28px;
  color: #47474a;
}

/* 
@media (max-width: 767.999px) {
  .column {
    color: #f4f2ef;
  }
} */

.column.preise {
  text-align: right !important;
}

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

.toggle-box {
  display: none;
  /* Checkbox verstecken */
}

/* Winkel und Styles für das Label */
.full-row-label {
  display: contents;
  /* Label-Container zeigt die Inhalte und lässt Grid-Layout unverändert */
  cursor: pointer;
}

.toggle-label::after {
  content: "\25BC";
  /* Pfeil nach unten */
  font-size: 16px;
  transition: transform 0.5s ease-out;
  padding-left: 10px;
  padding-right: 10px;
}

/* Wenn Checkbox aktiviert ist (Box ausgeklappt) */
.toggle-box:checked ~ .box-content {
  max-height: 300px;
  /* Höhe für die ausgeklappte Ansicht (anpassen nach Bedarf) */
  transition: max-height 0.5s ease-in;
}

.toggle-box:checked ~ .box-content .toggle-label::after {
  content: "\25B2";
  /* Pfeil nach oben */
  transform: rotate(180deg);
  /* Dreht den Pfeil */
}

.icon_kreis::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("./images/icon_kreis.webp");
  background-size: cover;
  margin-right: 5px;
  vertical-align: -3px;
}

.icon_durchschnitt::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  background-image: url("./images/icon_durchschnitt.webp");
  background-size: cover;
  margin-right: 5px;
  vertical-align: -1px;
}

.icon_quadrat::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("./images/icon_quadrat.webp");
  background-size: cover;
  margin-right: 5px;
  vertical-align: -3px;
}

.icon_rechteck::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 19.2px;
  background-image: url("./images/icon_rechteck.webp");
  background-size: cover;
  margin-right: 5px;
  vertical-align: -5px;
}

.icon_achteck::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("./images/icon_achteck.webp");
  background-size: cover;
  margin-right: 5px;
  vertical-align: -3px;
}

.icon_organisch_rund::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("./images/icon_organisch_rund.webp");
  background-size: cover;
  margin-right: 5px;
  vertical-align: -3px;
}

.icon_oval::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 19.5px;
  background-image: url("./images/icon_oval.webp");
  background-size: cover;
  margin-right: 5px;
  vertical-align: -4px;
}

/* -------------------------------------------------------------------------- */
/*                             //NOTE RoyalSlider                             */
/* -------------------------------------------------------------------------- */

.rsUni,
.rsUni .rsOverflow,
.rsUni .rsSlide,
.rsUni .rsVideoFrameHolder,
.rsUni .rsThumbs {
  background: none !important;
  color: #bf6959;
}

.rsUni .rsThumb.rsNavSelected {
  background: none !important;
}

.rsUni .rsThumb.rsNavSelected .thumbIco {
  border: 2px solid #bf6959;
  border: 2px solid rgba(159, 81, 59, 0.9);
}

.rsThumb {
  width: 50px !important;
  height: 50px !important;
}

.rsNav {
  margin-left: -10px;
}

@media (min-width: 768px) {
  .rsThumb {
    width: 85px !important;
    height: 85px !important;
  }
}

/* -------------------------------------------------------------------------- */
/*                               //NOTE Kontakt                               */
/* -------------------------------------------------------------------------- */

.contact-form input[type="text"],
.contact-form textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="range"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea {
  background-color: transparent;
  font-family: "Albert Sans";
  font-size: 0.95rem !important;
  font-weight: 400;
  color: #f4f2ef;
  margin-bottom: 0.8rem !important;
  padding-top: 3px;
  padding-right: 5px;
  padding-bottom: 3px;
  padding-left: 0px;
  border: none !important;
  border-bottom: 1px solid #bf6959 !important;
}

.wpcf7-submit {
  font-family: "Albert Sans" !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
}

.wpcf7-spinner {
  display: none;
}

/* Quiz */
.wpcf7-quiz-label {
  font-family: "Albert Sans";
  font-size: 0.95rem !important;
}

/* Input vom Quiz */
input[type="text"].qgroesse {
  font-size: 0.95rem !important;
  width: 50px !important;
}

textarea.tgroesse {
  vertical-align: top;
  height: 220px;
}

/* Fehlerausgabe von Form 7*/
span.wpcf7-not-valid-tip {
  color: #b51f29;
}

::-webkit-input-placeholder {
  color: #f4f2ef !important;
  opacity: 1 !important;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #f4f2ef !important;
  opacity: 1 !important;
}

:-ms-input-placeholder {
  color: #f4f2ef !important;
  opacity: 1 !important;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #f4f2ef !important;
  opacity: 1 !important;
}

/* -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .contact-form input[type="text"],
  .contact-form textarea,
  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form input[type="tel"],
  .wpcf7-form input[type="url"],
  .wpcf7-form input[type="number"],
  .wpcf7-form input[type="range"],
  .wpcf7-form input[type="date"],
  .wpcf7-form textarea {
    background-color: transparent;
    font-family: "Albert Sans";
    font-size: 0.95rem !important;
    font-weight: 400;
    color: #20191c;
    margin-bottom: 0.8rem !important;
    padding-top: 3px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 0px;
    border: none !important;
    border-bottom: 1px solid #bf6959 !important;
  }
}

/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  input[type="submit"],
  .nsu-submit {
    font-size: 0.95rem !important;
  }

  .contact-form input[type="text"],
  .contact-form textarea,
  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form input[type="tel"],
  .wpcf7-form input[type="url"],
  .wpcf7-form input[type="number"],
  .wpcf7-form input[type="range"],
  .wpcf7-form input[type="date"],
  .wpcf7-form textarea {
    font-size: 0.95rem !important;
  }
}

.zeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* width: 100%; */
  padding-top: 1rem;
  margin-left: -0.85rem;
}

/* wegen HP */
.wpcf7-form input[type="email"] {
  margin-bottom: -20px !important;
}

/* ------------------------------- Newsletter ------------------------------- */

.mailster-form-3 input.input {
  background-color: transparent;
  font-family: "Albert Sans";
  font-size: 0.95rem !important;
  font-weight: 400;
  color: #f4f2ef;
  margin-bottom: 0.8rem !important;
  padding-top: 3px;
  padding-right: 5px;
  padding-bottom: 3px;
  padding-left: 0px;
  border: none !important;
  border-bottom: 1px solid #bf6959 !important;
  width: 100%;
}

.mailster-form-3 .mailster-submit-wrapper {
  text-align: right;
  margin-top: 1.5rem;
}

.mailster-form-3 .mailster-submit-wrapper .submit-button {
  font-family: "Albert Sans";
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  border: 1px solid #bf6959 !important;
}

/* ------------------------------ Shopformular ------------------------------ */

.shopform input[type="text"],
.shopform textarea,
.shopform input[type="email"],
.shopform input[type="tel"],
.shopform input[type="url"],
.shopform input[type="number"],
.shopform input[type="range"],
.shopform input[type="date"],
.shopform textarea {
  background-color: transparent;
  font-family: "Albert Sans";
  font-size: 0.95rem !important;
  font-weight: 400;
  color: #f4f2ef;
  margin-bottom: 0 !important;
  padding: 0;
  border: none !important;
  border-bottom: 1px solid #bf6959 !important;
  min-height: auto !important;
}

.shopform .wpcf7-submit {
  font-family: "Albert Sans" !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  padding: 6px 12px 6px 12px !important;
}

.wpcf7-spinner {
  display: none;
}

/* Quiz */
.wpcf7-quiz-label {
  font-family: "Albert Sans";
  font-size: 0.95rem !important;
}

/* Input vom Quiz */
input[type="text"].qgroesse {
  font-size: 0.95rem !important;
  width: 50px !important;
}

textarea.sfgroesse {
  vertical-align: top;
  height: 100px;
}

textarea.tgroesse2 {
  vertical-align: top;
  height: 180px;
}

/* ------------------------------ Tempshopseite ----------------------------- */

.shopsoon_contact .h4like {
  padding-top: 0;
}

.shopform input[type="text"],
.shopform textarea,
.shopform input[type="email"],
.shopform input[type="tel"],
.shopform input[type="url"],
.shopform input[type="number"],
.shopform input[type="range"],
.shopform input[type="date"],
.shopform textarea {
  background-color: transparent;
  font-family: "Albert Sans";
  font-size: 0.95rem !important;
  font-weight: 300;
  color: #f4f2ef;
  margin-bottom: 0 !important;
  padding: 0;
  border: none !important;
  border-bottom: 1px solid #bf6959 !important;
  min-height: auto !important;
}

@media (min-width: 768px) {
  .shopsoon_contact.shopform .wpcf7-form {
    padding: 0.5rem 0 0 2rem;
  }
}

/* -------------------------------------------------------------------------- */
/*                           //NOTE Spacer und Toggle                         */
/* -------------------------------------------------------------------------- */

.spacer_1 {
  display: block;
  padding-top: 1rem;
}

.spacer_s {
  display: none;
}

@media (min-width: 768px) {
  .spacer_s {
    display: block;
    padding-top: 10px;
  }
}

/* --------------------------------- Toggle --------------------------------- */
.toogle_769 {
  display: none;
}

.toogle_767 {
  display: block;
}

@media (min-width: 768px) {
  .toogle_769 {
    display: block;
  }

  .toogle_767 {
    display: none;
  }
}

.toogle_993 {
  display: none;
}

.toogle_991 {
  display: block;
}

@media (min-width: 992px) {
  .toogle_993 {
    display: block;
  }

  .toogle_991 {
    display: none;
  }
}

/* -------------------------------------------------------------------------- */
/*                                //NOTE Footer                               */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */

/* Scroll Top immer rechts vom Inhalt nichts rechts absolut */
/* .scroll-top.on {
  right: calc(50% - 750px);
}

@media (max-width: 1600px) {
  .scroll-top.on {
    right: 50px;
  }
}

@media (max-width: 756px) {
  .scroll-top.on {
    right: 20px;
  }
} */

@media (min-width: 1200px) {
  /* Hamburger zum Content hin versetzen */
  .scroll-top.on {
    right: calc(50% - 575px);
  }
}

/* ------------------------- Fusszeile in Urzustand ------------------------- */

.footer .widget {
  margin-bottom: 0;
}

.wf-float-right {
  float: none;
}

#bottom-bar .wf-float-right {
  display: block;
  margin-left: 0;
}

#bottom-bar .wf-container-bottom {
  display: block;
}

.floatright {
  float: right;
  margin-right: -25px;
}

.footermobil {
  margin-left: 30px;
}

/* Sprachumschalter */

.footer_language {
  text-align: center;
  padding-left: 32px;
  margin-bottom: 4rem;
}

li > a .trp-ls-language-name:hover,
li.current-language-menu-item > a .trp-ls-language-name {
  text-decoration: underline solid #f4f2ef 2px;
}

/* kein Strich zwischen den Sprachen */
.footer .menu li,
.footer .widget_pages li,
.footer .custom-menu.dividers-on li,
.footer .blogroll li,
.footer .qts-lang-menu li {
  border-width: 0;
  margin: 0;
}

/* -------------------------------------------------------------------------- */
/*                           //NOTE Responsive Ende                           */
/* -------------------------------------------------------------------------- */

/* Abstand Impressum nur desktop */
@media (max-width: 1400px) {
  .bis1400 {
    display: none;
  }
}

@media (max-width: 599px) {
  h1,
  h2 {
    font-size: 2rem;
  }

  h3,
  h4,
  h5,
  h6,
  .h3shop,
  .h3shop p {
    font-size: 1.5rem;
  }
}

.desktop,
.mobil {
  display: none;
}

@media (min-width: 768px) {
  .desktop {
    display: block;
  }
}

@media (max-width: 767.999px) {
  .mobil {
    display: block;
  }
}

/* ---------------------------------- ENDE ---------------------------------- */
/* -------------------------------------------------------------------------- */

.branding img {
  height: 45px !important;
  width: auto;
  padding: 12px;
}

.logofooter {
  text-align: center;
}

.logofooter img {
  height: 45px !important;
  width: auto;
  padding: 26px 0 0 18px;
}

.logo-kds-footer img {
  width: 80px;
  height: auto;
  padding-left: 3px;
}

.footermobil .logofooter img {
  height: 45px !important;
  width: auto;
  padding: 20px 0 0 0;
  margin: 0 0 -20px 0 !important;
}

img.logo-kds-footer-mobil {
  width: 80px;
  height: auto;
  padding: 25px 0 17px 0;
}

.footermobillast {
  margin-bottom: -35px;
}

/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/*                           //NOTE Farben 2026 neu                           */
/* -------------------------------------------------------------------------- */

/* 
@media (max-width: 767px) {
    .brands2 img,
  .brands img {
    filter: brightness(0) invert(1);
    opacity: 0.9;
  }
} */

.vc_grid-filter.vc_grid-filter-color-grey > .vc_grid-filter-item:hover > span,
.vc_grid-filter.vc_grid-filter-color-grey
  > .vc_grid-filter-item.vc_active
  > span {
  color: #f4f2ef;
}

.vc_grid-filter.vc_grid-filter-bordered > .vc_grid-filter-item,
.vc_grid-filter.vc_grid-filter-bordered-rounded > .vc_grid-filter-item,
.vc_grid-filter.vc_grid-filter-bordered-rounded-less > .vc_grid-filter-item {
  margin: 0;
  border: 0px solid rgba(235, 235, 235, 0);
  border-collapse: collapse;
}

/* ----------------------------- Shop mobil neu ----------------------------- */

@media (max-width: 767.999px) {
  .project-content .whitebg {
    margin-top: 20px;
    padding: 0 !important;
  }

  .vc_empty_space.toogle_767 {
    height: 0 !important;
    margin-top: 20px;
  }

  .muster_bg.show_mob {
    position: relative;
    width: 100%;
    height: auto !important;
    aspect-ratio: 1088 / 750;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    margin-top: 19px !important;
    margin-bottom: 20px !important;
  }

  .project-content
    .uebersicht50
    > .vc_column_container
    > .vc_column-inner
    > .wpb_wrapper {
    row-gap: 20px;
    /* column-gap: 10px; */
  }

  .project-content .h3shop.toogle_991 {
    padding-top: 20px;
  }

  .project-content .whitebg a.flatlink,
  .project-content .muster a.flatlink {
    color: #20191c;
    text-decoration: underline solid #20191c 1px;
  }
}

.project-content .whitebg .contact-form input[type="text"],
.project-content .whitebg .contact-form textarea,
.project-content .whitebg .wpcf7-form input[type="text"],
.project-content .whitebg .wpcf7-form input[type="email"],
.project-content .whitebg .wpcf7-form input[type="tel"],
.project-content .whitebg .wpcf7-form input[type="url"],
.project-content .whitebg .wpcf7-form input[type="number"],
.project-content .whitebg .wpcf7-form input[type="range"],
.project-content .whitebg .wpcf7-form input[type="date"],
.project-content .whitebg .wpcf7-form textarea {
  color: #20191c;
}

.project-content .whitebg ::-webkit-input-placeholder {
  color: #20191c !important;
  opacity: 1 !important;
}

.project-content .whitebg ::-moz-placeholder {
  /* Firefox 19+ */
  color: #20191c !important;
  opacity: 1 !important;
}

.project-content .whitebg :-ms-input-placeholder {
  color: #20191c !important;
  opacity: 1 !important;
}

.project-content .whitebg :-moz-placeholder {
  /* Firefox 18- */
  color: #20191c !important;
  opacity: 1 !important;
}

.project-content .whitebg .box-content .column {
  color: #20191c !important;
}

/* ----------------------- gedehte schrift mobil weniger abstand ----------------------- */

@media (max-width: 767.999px) {
  p.gedehnt {
    padding-bottom: 15px;
  }
}

/* -------------------------------------------------------------------------- */

input:focus::-moz-placeholder {
  color: transparent !important;
}

textarea:focus::-moz-placeholder {
  color: transparent !important;
}

input:focus::-webkit-input-placeholder {
  color: transparent !important;
}

textarea:focus::-webkit-input-placeholder {
  color: transparent !important;
}

input:focus:-ms-input-placeholder {
  color: transparent !important;
}

textarea:focus:-ms-input-placeholder {
  color: transparent !important;
}

input:focus:-moz-placeholder {
  color: transparent !important;
}

textarea:focus:-moz-placeholder {
  color: transparent !important;
}

.project-content .whitebg input:focus::-moz-placeholder {
  color: transparent !important;
}

.project-content .whitebg textarea:focus::-moz-placeholder {
  color: transparent !important;
}

.project-content .whitebg input:focus::-webkit-input-placeholder {
  color: transparent !important;
}

.project-content .whitebg textarea:focus::-webkit-input-placeholder {
  color: transparent !important;
}

.project-content .whitebg input:focus:-ms-input-placeholder {
  color: transparent !important;
}

.project-content .whitebg textarea:focus:-ms-input-placeholder {
  color: transparent !important;
}

.project-content .whitebg input:focus:-moz-placeholder {
  color: transparent !important;
}

.project-content .whitebg textarea:focus:-moz-placeholder {
  color: transparent !important;
}

/* -------------------------------------------------------------------------- */

.pgrau,
.pgrau p {
  color: #f4f2ef;
}

.pgrau a {
  color: #f4f2ef !important;
}

@media (max-width: 767.99px) {
  .pmobilgrau p {
    color: #f4f2ef;
  }
  .pmobilgrau a.icon_winkel:link,
  .pmobilgrau a.icon_winkel:visited {
    color: #f4f2ef;
  }
}

/* -------------------------------------------------------------------------- */

/* ---------------------- Korrektur Grid bei Projekten ---------------------- */

.theflat-projekt-grid-row {
  position: relative;
  clear: both;
  z-index: 1;
}

.theflat-projekt-grid-row img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ----------------------- footer neu 2 spalten mobil ----------------------- */

.tfm-swap-footer {
  display: none;
}

@media (max-width: 991.999px) {
  .tfm-swap-footer {
    display: block !important;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
  }

  .tfm-swap-footer,
  .tfm-swap-footer * {
    box-sizing: border-box;
  }

  .tfm-swap-columns {
    display: flex;
    align-items: stretch;
    width: 100%;
  }

  .tfm-swap-col {
    width: 50%;
    max-width: 50%;
    flex: 0 0 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .tfm-swap-left {
    padding-right: 14px;
  }

  .tfm-swap-right {
    padding-left: 14px;
  }

  .tfm-swap-top {
    width: 100%;
  }

  .tfm-swap-bottom {
    width: 100%;
    margin-top: auto;
    padding-top: 34px;
  }

  .tfm-swap-footer h3 {
    margin: 0 0 24px 0;
  }

  .tfm-swap-footer p {
    margin: 0 0 24px 0;
  }

  .tfm-swap-footer p:last-child {
    margin-bottom: 0;
  }

  .tfm-swap-footer p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tfm-swap-logo {
    line-height: 0;
  }

  .tfm-swap-logo a {
    display: inline-block;
    line-height: 0;
  }

  .tfm-swap-logo br {
    display: none !important;
  }

  .tfm-swap-logo p {
    margin: 0 !important;
    padding: 0 !important;
  }

  .tfm-swap-logo-img,
  .tfm-swap-logo img {
    display: block !important;
    width: 80px !important;
    max-width: 80px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tfm-swap-language,
  .tfm-swap-language nav,
  .tfm-swap-language .footer_language,
  .tfm-swap-language .tf-language-menu {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .tfm-swap-language br {
    display: none !important;
  }

  .tfm-swap-language ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .tfm-swap-language li {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-width: 0 !important;
  }

  .tfm-swap-language li:last-child {
    margin-bottom: 0 !important;
  }

  .tfm-swap-language a {
    color: inherit;
    text-decoration: none;
  }

  .tfm-swap-language .current-menu-item > a,
  .tfm-swap-language .current-language-menu-item > a {
    text-decoration: underline solid #f4f2ef 2px;
  }

  .tfm-swap-end {
    width: 100%;
    margin-top: 34px;
    text-align: left;
  }

  .tfm-swap-end p {
    margin: 0;
  }

  .tfm-swap-language {
    min-height: 68px;
    display: flex !important;
    align-items: flex-end !important;
  }

  .tfm-swap-language nav,
  .tfm-swap-language .tf-language-menu,
  .tfm-swap-language .footer_language {
    width: 100%;
  }
}

a.grey:hover,
a.grey:active {
  color: #f4f2ef;
  text-decoration: none;
}

a.grey2:link,
a.grey2:visited {
  color: #f4f2ef;
  text-decoration: underline solid #f4f2ef 1px;
}

a.grey2:hover,
a.grey2:active {
  color: #f4f2ef;
  text-decoration: none;
}

@media (max-width: 767.99px) {
  a.grey3:link,
  a.grey3:visited {
    color: #f4f2ef;
    text-decoration: underline solid #f4f2ef 1px;
  }

  a.grey3:hover,
  a.grey3:active {
    color: #f4f2ef;
    text-decoration: none;
  }
}

@media (min-width: 992px) {
  .footer {
    padding-top: 20px;
    height: 280px !important;
    max-height: 280px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/*                           //NOTE NEU für Woodmart                          */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

/* Globaler Seitenhintergrund bei aktiviertem WoodMart Dark Design */
body {
  --wd-main-bgcolor: #20191c !important;
}

/* Slider */

h5.hslider {
  font-size: 1.2rem;
      text-shadow: 0 2px 6px #000;
}

h2.hslider {
  font-size: 1.5rem;
      text-shadow: 0 2px 6px #000;
}

p.aslider {
  padding-top: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #f4f2ef;
      text-shadow: 0 2px 6px #000;
}

@media (min-width: 800px) {
  h5.hslider {
    font-size: 1.6rem;
  }

  h2.hslider {
    font-size: 2.5rem;
  }

  p.aslider {
    font-size: 1.2rem;
  }
}

@media (min-width: 1500px) {
  h5.hslider {
    font-size: 2rem;
  }

  h2.hslider {
    font-size: 3.5rem;
  }

  p.aslider {
    font-size: 1.3rem;
  }
}

/* -------------------------------------------------------------------------- */
.price {
	color: #f4f2ef;
	font-weight: 400;
}

.wd-entities-title .price {
    font-size: .8rem !important;
}

.wd-entities-title a {
  font-size: 1.5rem;
	color: #f4f2ef;
}

table.variations label {
	font-weight: 400 !important;
}

/* MwSt.- und Versandhinweis generell in eine Zeile */
.wc-gzd-additional-info {
  display: inline !important;
  margin: 0 !important;
}

/* Produktdetailseite: Hinweis direkt neben den Preis */
/* 
.single-product .summary .price,
.single-product .summary .legal-price-info {
    display: inline-flex;
    align-items: baseline;
} */

.single-product .summary .legal-price-info {
  font-size: 12px;
  line-height: 1.2;
}

/* Produktlisten: MwSt. und Versand in einer Zeile */
.product-grid-item .tax-info::after {
  content: " · inkl. Versand innerhalb der EU.";
}

.wd-product .wd-product-wrapper p.wc-gzd-additional-info {
  display: none !important;
}

.product-grid-item .shipping-costs-info {
  display: none !important;
}

.product-element-bottom .tax-info {
  font-size: 12px !important;
}

/* Farbswatches auf Produktseiten verkleinern */
.single-product .wd-swatch.wd-bg {
  width: 52px;
  height: 52px;
  min-width: 52px;
}

/* Spalte Abstand Teppich beschreibung */

@media (min-width: 1024px) {
  .single-product .summary {
    padding-left: 40px;
  }
}

/* Tabs Einrückung */
@media (min-width: 1024px) {
  .wd-accordion-item {
    padding: 0 100px 0 100px;
  }
}

/* Hintergrund Shopübersichtsseite */
.wd-product.wd-hover-tiled .wd-product-wrapper {
  background-color: transparent !important;
  box-shadow: none;
  /* border: 1px solid #bf6959; */
}

.product-element-bottom * {
  text-align: center;
}



@media (max-width: 767px) {
	.vc_row {
		display: flex;
		flex-wrap: wrap;
	}

	.mobile-first {
		order: 1;
		width: 100% !important;
	}

	.mobile-second {
		order: 2;
		width: 100% !important;
	}
}


.tab-material-grid {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.tab-material-bild {
	width: 25%;
	order: 1;
}

.tab-material-text {
	width: 75%;
	order: 2;
}

.tab-material-bild img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 767px) {
	.tab-material-grid {
		flex-wrap: wrap;
    	gap: 0;
	}

	.tab-material-text {
		order: 1;
		width: 100%;
	}

	.tab-material-bild {
		order: 2;
		width: 100%;
	}
}


@media (max-width: 767px) {
	.tab-material-grid2 {
		flex-wrap: wrap;
    	gap: 0;
	}

	.tab-material-text2 {
		order: 1;
		width: 100%;
	}

	.tab-material-bild2 {
		order: 2;
		width: 100%;
	}
}





  .contact-form input[type="text"],
  .contact-form textarea,
  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form input[type="tel"],
  .wpcf7-form input[type="url"],
  .wpcf7-form input[type="number"],
  .wpcf7-form input[type="range"],
  .wpcf7-form input[type="date"],
  .wpcf7-form textarea {
    color: #f4f2ef !important;
  }

  .wpcf7-form p {
    padding-bottom: 0 !important;
  }

.wpcf7-form  .v3dtext textarea {
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
}

/* -------------------------------------------------------------------------- */

/* Footer */



.footer-grid p,
.white-links,
.white-links:visited,
.white-links:focus {
  color: #f4f2ef !important;
    font-size: .9rem !important;
font-weight: 300 !important;
line-height: 1.66 !important;
}

.white-links:hover {
  color: #f4f2ef !important;
  text-decoration: underline !important;
}


p.hfooter {
  font-size: 1rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
}


  .footer-grid {
   padding-top: 40px;
  }

@media (min-width: 850px) {

  .footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
  }

  .footer-col {
    flex: 0 0 auto;
  }

    .footer-col:last-child {
    align-self: flex-end;
    padding-bottom: 5px;
  }

}

@media (max-width: 1000px) {
.footer-col:nth-child(3) {
  display: none;
}
}


@media (max-width: 850px) {

  .footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
    row-gap: 35px;
  }


}

/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */