.comon-heding span {
  font-size: 40px;
  font-weight: 500;
}

.sub-text {
  font-size: 18px;
}

.chef-heading {
  font-size: 50px;
}
.line6 iframe, .line iframe {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

#header .header-btn-collapse-nav {
  background: var(--quaternary);
}

  #header .header-nav.header-nav-links nav > ul:not(:hover) > li > a.active {
    color: #737373;
  }
@media (min-width: 992px) {}

.shop-section .about-svg {
  position: absolute;
  top: -100px;
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
}

.shop-section h6 {
  color: #ae8b2b;
  font-size: 30px;
}

/* Der Kreis haengt oben aus dem Abschnitt heraus und belegt im Fluss keinen
   Platz. Damit die Ueberschrift nie unter ihm landet, bekommt der Inhalt so
   viel Luft, wie der Kreis nach unten reicht.
   --kreis-ueberhang meint die gedrehte Bounding-Box, nicht den Durchmesser:
   rotate(-4deg) macht aus 180 px 192 px und hebt die Oberkante um 6 px. */
.shop-section .shop-kopf {
  --kreis-ueberhang: 100px;
  position: relative;
  padding-top: calc(var(--kreis-ueberhang) + 32px);
  /* Der Abschnitt ist auf volle Breite ausgelegt - vier Karten passen in
     einen 1140er .container nicht. Auf sehr breiten Schirmen begrenzt. */
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  /* container-fluid bringt nur 12 px mit, die g-5-Reihe zieht aber mit
     -24 px heraus. Ohne die 24 px steht die Seite 12 px im Ueberlauf. */
  padding-left: 24px;
  padding-right: 24px;
}

/* Der Kreis haelt sich jetzt am Inhalt fest statt an der Fensterbreite.
   Vorher left:9% - auf breiten Schirmen stand er dadurch neben der Spalte. */
.shop-section .shop-kopf > .pos-12 {
  left: 24px;
  right: auto;
}

@media (max-width: 767.98px) {
  .shop-section .shop-kopf {
    --kreis-ueberhang: 59px;
  }
}

/* Schrift im Abschnitt kleiner und mitwachsend: clamp(kleinstes, mitwachsend,
   groesstes). Der mittlere Wert haengt an der Fensterbreite, 1vw = 1 Prozent.
   Die Porto-Klassen text-4 / text-4-5 und die .sub-text-Regeln in den Media-
   Queries weiter unten stehen auf !important - deshalb hier ebenfalls. */
.shop-section h6.sub-text {
  font-size: clamp(20px, 2.2vw, 28px) !important;
}

.shop-section .shop-kopf .text-4-5 {
  font-size: clamp(16px, 1.3vw, 19px) !important;
}

.shop-section .shop-kopf .text-4 {
  font-size: clamp(14px, 1.1vw, 16px) !important;
}

.outing-sections {
  background: #010713 url(../img/bg-nuew.jpg) no-repeat;
  background-size: cover;
  background-position: right center;
  padding: 60px 0;
  margin: 60px 0;
  min-height: 600px;
  position: relative;
}

/* Patrick haengt unten am Raster.
   Vorher stand das Bild auf position:absolute mit festen Pixelwerten
   (top:-102px, left:-2%, unter 1180 px left:-150px). Es kannte seine
   Spalte nicht, blieb starr auf 773 px und lag bei 1200 px 157 px weit
   auf dem Text.
   Jetzt haengt es an der Spalte: rechte Kante fest, Unterkante fest,
   Breite waechst mit der Spalte plus Ueberhang nach links. Dadurch
   steht der Mann auf jeder Breite gleich tief, und der Abstand zum
   Text bleibt von allein erhalten. Nach oben darf er so weit ragen,
   wie seine Hoehe es ergibt.
*/
.outing-sections .row > *:first-child {
  position: relative;
}

.outing-sections figure {
  /* Wie tief der Mann unter der Zeilenkante steht.
     Groesser = er rutscht weiter nach unten Richtung Risskante. */
  --mann-unten: 34px;

  /* Wie weit er nach links ueber den Container hinausragt.
     Grundlage ist der Platz, den der Container zum Fensterrand
     frei laesst. Dazu kommen 60 px, die bewusst aus dem Fenster
     ragen duerfen - davon sind 47 px ohnehin nur transparenter
     Rand der Datei, abgeschnitten wird also kaum etwas von ihm.
     Ueberstand nach links erzeugt keinen Querbalken: in Lese-
     richtung links-nach-rechts ist er nicht scrollbar, der
     Browser schneidet ihn einfach ab. Nach rechts waere das
     anders - dort braeuchte es overflow: hidden.
     Die 16 px Abzug halten den Rollbalken aus der Rechnung.
     Weniger Beschnitt gewuenscht? Die 44 verkleinern. */
  --mann-ueberhang-links: max(0px, min(300px, (100vw - 1140px) / 2 + 44px));

  position: absolute;
  right: 0;
  bottom: var(--mann-unten);
  width: calc(150% + var(--mann-ueberhang-links));
  /* Deckelung der Breite. Die Datei ist 773 px breit, 800 geht also
     3,5 Prozent darueber - das ist noch unauffaellig. Deutlich
     hoeher sollte der Wert nicht werden, sonst wird das Bild weich. */
  max-width: 800px;
  margin: 0;
  z-index: 3;
}

.outing-sections figure img {
  display: block;
  width: 100%;
  height: auto;
}

.outing-sections h6 {
  color: #ae8b2b;
  font-size: 30px;
}

.outing-sections .btn {
  background: #fff;
  padding: 14px 25px;
  border-radius: 50px;
  font-size: 17px;
}

.light-newd-section .sub-text {
  color: #ae8b2b;
  font-size: 30px;
}

.comon-posrt {
  position: relative;
  background: #fff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  padding-bottom: 30px;
}

.comon-posrt .img-boxv {
  height: 300px;
  position: relative;
}

.comon-posrt .img-boxv .daet01 {
  width: 80px;
  height: 80px;
  background: #ae8b2b;
  display: grid;
  color: #fff;
  text-align: center;
  align-content: center;
  font-size: 24px;
  position: absolute;
  bottom: -30px;
  right: 14px;
  font-weight: 700;
}

.comon-posrt .img-boxv .daet01 small {
  font-size: 16px;
  font-weight: 500;
}

.comon-posrt .img-boxv figure {
  height: 300px;
  overflow: hidden;
  margin: 0;
}

.comon-posrt .img-boxv figure img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.comon-posrt .parar-delatsy {
  padding-top: 40px;
  padding-left: 20px;
  padding-right: 30px;
}

.comon-posrt .parar-delatsy h6 {
  border-left: solid 2px #ae8b2b;
  padding-left: 10px;
}

.comon-posrt .parar-delatsy h5 {
  margin-top: 10px;
  font-size: 22px;
  font-weight: 700;
}

.right-post0 .img-boxv {
  height: 570px;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.right-post0 .img-boxv figure {
  height: 570px;
}

.right-post0 .parar-delatsy {
  position: absolute;
  z-index: 2;
  color: #fff;
  padding-top: 15px;
  bottom: 20px;
  width: 100%;
}

.right-post0 .parar-delatsy h6 {
  border-left: solid 2px #ae8b2b;
}

.right-post0 .daet01 {
  top: 20px;
  bottom: 0;
}

.sticky-wurst {
    position: sticky;
    top: 120px;
    align-self: flex-start;
}

.footer-new .fotter-comgh h5 {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.footer-new .fotter-comgh .contact-gma li {
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: start;
  margin-bottom: 10px;
}

.footer-new .fotter-comgh .contact-gma li span:first-child {
  width: 25px;
  height: 25px;
}

.shop-section {
  background: url(../img/background_03_01.png) no-repeat,
  url(../img/background_03_02.png) no-repeat;
  background-position: left top, right bottom;
  background-size: 70%, 100%;
  background-color: #f6f6f0;
}

.shop-section .about-svg-02,
.offer .about-svg-02 {
  position: absolute;
  bottom: -90px;
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
}

.outing-sections .row > div:last-child {
  position: relative;
  z-index: 4;
}

.offer {
  padding: 60px 0 100px 0;
  background: #181818 url(../img/bg-05-h.jpg) no-repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto;
  background-position: top left;
  background-size: cover;
  margin: 40px 0;
  position: relative;
}

.offer .about-svg-03 {
  position: absolute;
  top: -90px;
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
}

.toper {
  position: relative;
}
.toper > .about-svg-03 {
  --slider-ueberlappung: 48px;
  position: absolute;
  top: calc(var(--slider-ueberlappung) - 63px);
  width: 100%;
  left: 0;
  right: 0;
  bottom: auto;
  margin: auto;
  transform: none;
  z-index: 2;
}

/* Die dunkle Sektion .outing-sections hat oben und unten eine Kante.
   Gleiche Werte wie .about-section-home weiter unten in dieser Datei -
   das ist der Stand, der auf der Startseite richtig aussieht.
   Wichtig: hier KEIN --slider-ueberlappung. Den Zuschlag braucht nur die
   Kante in main.toper, weil main vor dem Ende des Sliders anfaengt. Diese
   Sektion ist selbst der Bezugsrahmen (position: relative), ihre Kanten
   sitzen also direkt an ihrem eigenen Anfang bzw. Ende. */
.outing-sections > .about-svg-02 {
  position: absolute;
  top: -63px;
  bottom: auto;
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
}

.outing-sections > .about-svg-002 {
  position: absolute;
  top: auto;
  bottom: -40px;
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
}


@media (max-width: 767.98px) {
  .toper > .about-svg-03 {
    top: calc(var(--slider-ueberlappung) - 23px);
  }

  .outing-sections > .about-svg-02 {
    top: -23px;
  }

  .outing-sections > .about-svg-002 {
    bottom: -21px;
  }
}

@media (max-width: 1180px) {
.offer .about-svg-02 {
  bottom: -50px;

}
  
  
}

@media (max-width: 820px) {
  .comon-heding span {
    font-size: 38px;
  }

  .sub-text {
    font-size: 18px;
  }
  .offer .about-svg-02 {
  bottom: -30px;

}
  
}

@media (max-width: 667px) {
  .comon-heding span {
    font-size: 38px;
  }

  .sub-text {
    font-size: 25px !important;
  }

  .outing-sections {
    min-height: 500px;
  }

  .outing-sections .btn {
    font-size: 14px;
  }

  .footer-new .fotter-comgh h5 {
    font-size: 16px;
  }

  .footer-new .fotter-comgh .contact-gma li {
    font-size: 14px;
  }

  .outing-sections {
    background-size: cover;
  }
  

}

@media (max-width: 480px) {
  .comon-heding span {
    font-size: 18px;
  }

  .sub-text {
    font-size: 25px !important;
  }

 
  .offer .about-svg-02 {
    bottom: -8px;
  }

  .shop-section .about-svg-02
  {
    bottom: -80px;
  }

  .shop-section .about-svg {
    top: -50px;
  }
  .text-3 {
	 font-size:0.8em;
  }
}

/* Reisskante am unteren Rand der Kopfzeile.
   Vorher stand hier top in Prozent - und weil Prozent bei top gegen die
   Hoehe der Kopfzeile rechnet, die zwischen 121 und 181 px schwankt,
   brauchte es vier Media-Queries mit 36%, 11%, 85% und 91%. Gesessen hat
   die Kante trotzdem nur bei 1400 px halbwegs; bei 1100 px lag sie 57 px
   zu hoch, bei 900 px 47 px zu tief. Das zweizeilige Menue hat es
   zusaetzlich verschoben.
   Jetzt haengt sie an der Unterkante der Kopfzeile statt an einem
   Prozentwert: bottom statt top, und translateY(50%) legt sie je zur
   Haelfte ueber die Kopfzeile und ueber das, was darunter kommt.
   Eine Regel fuer alle Breiten, die drei Sonderregeln sind entfallen. */
header .svg-bg01 {
  position: absolute;
  top: auto;
  bottom: 0;
  transform: translateY(50%);
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1000;
}

.lead {
  letter-spacing: 0em;
  font-size: 19.2px;
  font-size: 1.2rem;
}



.about-section-home {
  background: url(../img/background_03_01.png) no-repeat,url(../img/background_03_02.png) no-repeat;
  background-position: left top, right bottom;
  background-size: 70%, 100%, 14%;
  background-color: #f6f6f0;
  position: relative;
}

.about-section-home .container {
  position: relative;
  z-index: 3;
}

.offer-div-services .about-svg-1 {
  position: absolute;
  top: -63px;
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
}



.about-section-home .about-svg {
  position: absolute;
  top: -63px;
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
}

.about-section-home .about-svg-02 {
  position: absolute;
  bottom: -40px;
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
}

.about-section-home .sub-text {
  font-size: 30px;
}

.about-section-home h6 {
  color: #ae8b2b;
}

.about-section-home h2 {
  color: #181818;
}

.about-section-home p {
  color: #85847d;
  font-weight: 300;
}

.footer-new .fotter-comgh .calloi-texr {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.footer-new .fotter-comgh .calloi-texr a, .footer-new .fotter-comgh a, .right-cop a {
  color: #f6f6f0;
}

@media (max-width: 991px) {
  #header .header-btn-collapse-nav {
    top: -1px;
  }
}

@media (max-width: 991.98px) {
  #header .header-container {
    flex-wrap: nowrap;
  }

  #header .kontakt-kopf {
    flex-grow: 1;
    min-width: 0;
  }

  #header .header-column.justify-content-end {
    flex-grow: 0;
  }
}

/* Ab sm: Logo an die Oberkante, Kontaktblock mittig.
   theme.css setzt dem Logo 16 px Rand oben und unten und zentriert es in der
   Kopfzeile. Hier wird der obere Rand aufgehoben und das Logo stattdessen an
   der Oberkante ausgerichtet - die Kopfzeile wird dadurch 16 px flacher.
   Zum Nachjustieren nur --logo-oben aendern (groesser = tiefer). */
@media (min-width: 576px) {
  #header .header-logo {
    --logo-oben: 0px;
    align-self: flex-start;
    margin-top: var(--logo-oben);
  }

  /* War bisher nur zwischen 768 und 992 px mittig */
  #header .kontakt-kopf {
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 767.98px) {
  #header .header-logo {
    width: 90px;
    flex: 0 0 auto;
  }

  #header .header-logo img {
    width: 100%;
    height: auto;
  }

  #header .kontakt-kopf .feature-box-icon i {
    font-size: 1.5rem;
  }

  #header .kontakt-kopf .kontakt-dropdown-btn p {
    font-size: 0.75rem;
  }
}

@media (min-width: 992px) {
  #header .header-nav.header-nav-links.header-nav-light-text nav > ul > li > a, #header .header-nav.header-nav-line.header-nav-light-text nav > ul > li > a {
    color: var(--dark);
  }
}

@media (min-width: 992px) {
  #header .header-nav-main nav > ul > li > a {
    display: inline-flex;
    align-items: center;
    white-space: normal;
    border-radius: var(--border-radius);
    color: var(--grey-500);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    padding: 0.5rem 1rem;
    letter-spacing: -0.5px;
    text-decoration: none;
  }
}

.img-logo {
  filter: drop-shadow(5px 5px 8px rgba(0, 0, 0, 0.5));
}

.bg-whiter {
  background: linear-gradient(to bottom,  #dde0cc 0%,#f6f6f0 12%);
}

.slider h1,.slider h2,.slider h3,.slider h4,.slider p {
  color: #ffffff !important;
  text-shadow: 2px 2px 3px #000000;
}

.btn-circle.circ.btn-lg {
  width: 130px;
  height: 130px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.6;
  border-radius: 65px !important;
}

@media (max-width: 767.98px) {
  .btn-circle.circ.btn-lg {
    width: 100px;
    height: 100px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.6;
    border-radius: 50% !important;
  }




}
.btn-circle.btn-lg {
  width: 100px;
  height: 100px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.6;
  border-radius: 50px !important;
}


@media (max-width: 350px) {
  .btn-circle.circ.btn-lg {
    width: 80px;
    height: 80px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.6;
    border-radius: 50% !important;
  }
  
	.btn-circle.btn-lg {
	  width: 80px;
	  height: 80px;
	  padding: 10px 16px;
	  font-size: 18px;
	  line-height: 1.6;
	  border-radius: 50% !important;
	}
  
}




.sorti p {
  color: #c5c5c5 !important;
}

.sub-texter {
  font-size: 5em;
  color: #f6f6f0;
}

.about-section-home {
  background: url(../img/background_03_01.png) no-repeat, url(../img/background_03_02.png) no-repeat;
  background-position: left top, right bottom, left top;
  background-size: 70%, 100%, 14%;
  background-color: #f6f6f0;
  position: relative;
}

.light-newd-section {
  background:#ffffff url(../img/background_03_02.png) no-repeat;
  background-position: right top;
  background-size: 100%, 100%;
  padding: 60px 0;
  position: relative;
}

.light-newd-section .about-svg {
  position: absolute;
  top: -110px;
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3;
}

.offer-div-services {
  padding: 60px 0 100px 0;
  background: #181818 url(../img/bg-05-h.jpg) no-repeat;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto;
  background-position: top left;
  background-size: cover;
  margin: 40px 0;
  /* Bezugspunkt fuer die absolut positionierte Kante .about-svg-1
     (genauso wie bei .about-section-home). Ohne relative richtet sich
     die Kante am Seitenanfang statt an dieser Sektion aus. */
  position: relative;
}

.slif-client-logo {
  margin-bottom: 0px;
  position: relative;
}

.footer-new {
  background: #0c0f0c url(../img/footer-bg.jpg) no-repeat;
  background-size: 100% auto;
  background-position: top center;
  padding: 60px 0 20px 0;
  margin-top: 0px;
  min-height: 780px;
}

.comon-heding {
  font-size: 50px;
}

.footer-heding {
  font-size: 50px;
}

@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/mulish-v13-latin-200.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/mulish-v13-latin-200italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/mulish-v13-latin-300.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/mulish-v13-latin-300italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/mulish-v13-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/mulish-v13-latin-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/mulish-v13-latin-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/mulish-v13-latin-500italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/mulish-v13-latin-600.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/mulish-v13-latin-600italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/mulish-v13-latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/mulish-v13-latin-700italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/mulish-v13-latin-800.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/mulish-v13-latin-800italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/mulish-v13-latin-900.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/mulish-v13-latin-900italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/poppins-v20-latin-100.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/poppins-v20-latin-100italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/poppins-v20-latin-200.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/poppins-v20-latin-200italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/poppins-v20-latin-300.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/poppins-v20-latin-300italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v20-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/poppins-v20-latin-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/poppins-v20-latin-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/poppins-v20-latin-500italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/poppins-v20-latin-600.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/poppins-v20-latin-600italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v20-latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/poppins-v20-latin-700italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/poppins-v20-latin-800.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/poppins-v20-latin-800italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/poppins-v20-latin-900.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/poppins-v20-latin-900italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Bilbo Swash Caps';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bilbo-swash-caps-v22-latin-regular.woff2') format('woff2');
}

.handwritten {
  font-family: 'Bilbo Swash Caps', cursive;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-display: swap;
  font-family: 'Shadows Into Light';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/shadows-into-light-v15-latin-regular.woff2') format('woff2');
}

.kontakt-dropdown-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--dark, #181818);
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color 0.3s;
}

.kontakt-dropdown-btn:hover, .kontakt-dropdown-btn:focus-visible, .kontakt-dropdown-btn[aria-expanded="true"] {
  color: #ae8b2b;
}

.kontakt-dropdown-caret {
  font-size: 0.5em;
  margin-left: 0.4em;
  position: relative;
  bottom: 0.15em;
  transition: transform 0.3s;
}

.kontakt-dropdown-btn[aria-expanded="true"] .kontakt-dropdown-caret {
  transform: rotate(180deg);
}

.kontakt-dropdown .kontakt-panel {
  z-index: 1100;
  min-width: 310px;
  margin-top: 10px;
  padding: 20px 24px 16px;
  border: 1px solid #e4e4d8;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  font-size: 14px;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  color: #181818;
}

.kontakt-panel-block + .kontakt-panel-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #eeeee4;
}

.kontakt-panel-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #ae8b2b;
}

.kontakt-panel-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kontakt-panel-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 3px 0;
  white-space: nowrap;
}

.kontakt-panel-label {
  color: #6b6b5e;
}

.kontakt-panel-list a {
  color: #181818;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s;
}

.kontakt-panel-list a:hover, .kontakt-panel-list a:focus-visible {
  color: #ae8b2b;
}

.kontakt-panel-zu {
  color: #9a9a8c;
}

.custom-el-3 {
  --kreis-farbe: #ae8b2b;
  --kreis-textfarbe: #fff;
  --kreis-groesse: 180px;
  width: var(--kreis-groesse);
  height: var(--kreis-groesse);
  min-width: var(--kreis-groesse);
  min-height: var(--kreis-groesse);
  border-radius: 50%;
  background-color: var(--kreis-farbe);
  color: var(--kreis-textfarbe);
}

.kreis-versatz {
  margin-left: -40px;
  margin-top: -15px;
}

.pos-11 {
  position: absolute;
  top: -30px;
  right: 5%;
  z-index: 500;
  transform: rotate(5deg);
}

.pos-12 {
  position: absolute;
  top: -86px;
  left: 9%;
  z-index: 500;
  transform: rotate(-4deg);
}

.comon-posrt.bsn-quer .parar-delatsy {
  background: #fff;
}

.comon-posrt.bsn-ersatzbild .img-boxv, .comon-posrt.bsn-ersatzbild .img-boxv figure {
  height: 150px;
  max-height: 150px;
}

.comon-posrt.bsn-ersatzbild .img-boxv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #2a2d25;
  opacity: 0.65;
  pointer-events: none;
}

.comon-posrt.bsn-quer:not(.bsn-ersatzbild) .img-boxv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #39412f;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.comon-posrt.bsn-quer:not(.bsn-ersatzbild):hover .img-boxv::after, .comon-posrt.bsn-quer:not(.bsn-ersatzbild):focus-visible .img-boxv::after {
  opacity: 0.75;
}

.comon-posrt.right-post0 .img-boxv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #39412f;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.comon-posrt.right-post0:hover .img-boxv::after, .comon-posrt.right-post0:focus-visible .img-boxv::after {
  opacity: 0.75;
}

.comon-posrt.right-post0 .bsn-teaser {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.comon-posrt.right-post0:hover .bsn-teaser, .comon-posrt.right-post0:focus-visible .bsn-teaser {
  max-height: 12em;
  opacity: 1;
}

.comon-posrt.right-post0 .parar-delatsy {
  background: rgba(255, 255, 255);
  color: var(--primary, #60635c);
  padding-bottom: 15px;
}

a.comon-posrt:not(.btn):hover, a.comon-posrt:not(.btn):focus, a.comon-posrt:not(.btn):focus-visible {
  text-decoration: none;
}

.comon-posrt.bsn-ersatzbild .img-boxv .daet01, .comon-posrt.bsn-quer .img-boxv .daet01, .comon-posrt.right-post0 .img-boxv .daet01 {
  z-index: 2;
}

@media (max-width: 1200px) {
}

@media (max-width: 1120px) {
  #header .header-nav-main nav > ul > li > a {
    font-size: 14px;
  }
}

@media (max-width: 991.98px) {
	.text-md-white {
		color:#ffffff !important;
		font-size:15px;
	}
	/* Vorher width:238%. Damit war die Kante 893 px breit und hat die
	   Seite auf dem Handy um 518 px nach rechts geschoben. Gleiche
	   Werte wie .about-section-home .about-svg, die auf der Startseite
	   richtig aussieht. */
	.offer .about-svg-03 {
	  position: absolute;
	  top: -23px;
	  width: 100%;
	  left: 0;
	  right: 0;
	  margin: auto;
	  z-index: 2;
	}

	
}

@media (max-width: 767.98px) {

  #header .header-nav-main nav > ul > li > a {
    font-size: 18px;
  }

	.about-section-home .about-svg {
	  top: -23px;
	}
	.about-section-home .about-svg-02 {
	  bottom: -21px;
	}
	.light-newd-section .about-svg {
	  top: -79px;
	}
	.comon-heding {
	  font-size: 40px;
	  margin-top:42px;
	}
  .footer-heding {
    font-size: 38px;
    margin-top: 10px;
  }
	
	.custom-el-3 {

	  --kreis-groesse: 140px;
	}
	.slif-client-logo {
	  margin-bottom: -12px;
	  position: relative;
	  margin-top: -120px;
	}	


	
	
}


@media (max-width: 400px) {


	
	.slider h1{ 
	  font-size:2em;
	  line-height: 24px;
	  
	}
	.slider h2 {
		font-size:1em;
	}
	.about-section-home .about-svg {
	  top: -23px;
	}
	.about-section-home .about-svg-02 {
	  bottom: -21px;
	}
	.light-newd-section .about-svg {
	  top: -79px;
	}
	.pos-11 {
	  top: -43px;
	}
	.comon-heding {
	  font-size: 40px;
	}
	.chef-heading {
	  font-size: 40px;
	}

	/* Vorher width:238%. Damit war die Kante 893 px breit und hat die
	   Seite auf dem Handy um 518 px nach rechts geschoben. Gleiche
	   Werte wie .about-section-home .about-svg, die auf der Startseite
	   richtig aussieht. */
	.offer .about-svg-03 {
	  position: absolute;
	  top: -23px;
	  width: 100%;
	  left: 0;
	  right: 0;
	  margin: auto;
	  z-index: 2;
	}
	.text-3 {
		font-size:0.8em;
	}
	
}


/* =========================================================================
   Katalog-Filter (admin/module/katalog/katalog.php)
   Die Buttons sitzen in .offer auf #181818. Die Porto-Klassen btn-outline
   und btn-quaternary sind fuer helle Flaechen gedacht und verschwinden dort
   fast – deshalb hier eine eigene, helle Variante.
   Aktiv-Zustand heisst in PHP wie im JS ".is-aktiv".
   ========================================================================= */
.katalog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}

.katalog-filter .katalog-btn {
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: #eee;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.katalog-filter .katalog-btn:hover,
.katalog-filter .katalog-btn:focus-visible {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, .06);
}

.katalog-filter .katalog-btn.is-aktiv {
  background: var(--quaternary, #4a4e28);
  border-color: var(--quaternary, #4a4e28);
  color: #fff;
}

/* Rechtsseiten (Impressum/Datenschutz): der Kopf liegt ueber dem Inhalt,
   deshalb hier Platz darunter schaffen. */
.rechtsseite {
  padding-top: clamp(120px, 18vw, 200px);
  padding-bottom: 60px;
}
.rechtsseite .rechtstext {
  max-width: 70ch;
  /* In der Datenschutzerklaerung steht eine ausgeschriebene Behoerden-
     adresse (bfdi.bund.de/...), die als ein Wort 436 px breit ist und
     die Seite auf dem Handy seitlich verschoben hat. */
  overflow-wrap: anywhere;
}

/* --- Sortiment: Hintergrundbild der .offer-Sektion -------------------------
   Die Sektion waechst mit jedem Katalogeintrag mit und ist inzwischen ueber
   3000 px hoch. Mit "cover" muesste der Browser das 1366x750-Bild um Faktor
   4,4 vergroessern - sichtbar waere dann nur ein 289 px breiter Streifen vom
   linken Bildrand. "fixed" richtet das Bild am Bildschirm statt an der
   Sektion aus, dadurch bleibt es in seinem natuerlichen Massstab.
   Die .offer-div-services auf der Startseite ist nur 1135 px hoch und
   braucht das nicht - die bleibt wie sie ist. */
.offer {
  background-attachment: fixed;
  background-position: center center;
}

/* Die Hintergrund-Ebene gibt es nur fuer den Handy-Fall. */
.offer-bg { display: none; }

/* Handys und Tablets setzen "background-attachment: fixed" entweder gar nicht
   um oder ruckeln damit. Der Umweg: eine eigene Ebene in der Sektion, deren
   Kind mit position:fixed am Bildschirm steht. clip-path beschneidet dieses
   Kind auf die Sektion, erzeugt aber - anders als transform oder filter -
   keinen Bezugsrahmen fuer position:fixed. Dadurch bleibt das Bild stehen
   waehrend der Inhalt darueber scrollt, und es ist trotzdem nur innerhalb
   der Sektion zu sehen.
   Warum eine eigene Ebene und nicht clip-path auf .offer selbst: die Sektion
   hat ueberstehende Kinder - die Kante .about-svg-03 ragt 76 px nach oben und
   518 px nach rechts hinaus, der runde Aufkleber 36 px nach oben. Ein
   clip-path auf .offer wuerde die abschneiden. */
@media (hover: none), (max-width: 991.98px) {
  .offer {
    background-image: none;
    /* eigener Stapelkontext, damit das z-index:-1 der Ebene nicht nach aussen
       faellt. isolation laesst position:fixed in Ruhe. */
    isolation: isolate;
  }

  .offer-bg {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }

  .offer-bg::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(../img/bg-05-h.jpg) 25% center / cover no-repeat;
  }
}

/* Die Katalog-Gruppen bringen aus dem Modul ein deckendes Oliv mit und haben
   das Bild bisher fast vollstaendig verdeckt. Nur hier durchscheinend machen,
   damit das Modul selbst unveraendert bleibt und in anderen Projekten weiter
   so aussieht wie bisher. */
.offer .katalog-gruppe {
  background: rgba(74, 78, 40, 0.85);
  box-shadow: 5px 5px 15px rgba(74, 78, 40, 0.55);
}

/* --- Kopfzeilen-Navigation: zweizeilig zwischen 992 und 1400 px -----------
   Sechs Punkte brauchen 855 px, dem Menue bleiben neben Logo (148) und
   Kontakt-Knopf (152) aber nur rund 580 px. Es bricht also um - und zwar
   bisher katastrophal: weil <ul>, <li> und <a> auf die volle Kopfzeilenhoehe
   gestreckt werden (179 px), fiel der ueberzaehlige Punkt eine ganze
   Kopfzeilenhoehe tief und lag frei im Slider.
   Hier wird der Umbruch stattdessen bewusst gestaltet: kompakte Zeilen,
   fester Abstand dazwischen, beide Zeilen mittig zum Logo. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .header-nav-main nav > ul#mainNav {
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    row-gap: 2px;
  }

  .header-nav-main nav > ul#mainNav > li {
    height: auto;
  }

  /* Ohne das behalten die Links ihre min-height von 60 px und der Block
     waere doppelt so hoch wie noetig. */
  .header-nav-main nav > ul#mainNav > li > a {
    height: auto;
    min-height: 0;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

/* --- Querscrollen: Bootstrap-Zeilen ohne passenden Elternteil -------------
   Eine .row zieht ihre Aussenraender um die halbe Spaltenluecke ins Negative
   (bei g-5 also -24 px je Seite). Der Elternteil muss das als Innenabstand
   wieder auffangen - genau das macht .container. Hier fehlte er:

   .contain und .containe sind Tippfehler fuer "container" und in keiner
   Datei definiert. Die Bloecke hatten deshalb gar keinen Innenabstand, und
   die Zeile stand 24 px ueber den Fensterrand hinaus. Statt die Klassen im
   Markup umzubenennen (container-xxl wuerde zusaetzlich eine Maximalbreite
   mitbringen und das Layout aendern) bekommen sie hier nur den fehlenden
   Innenabstand.

   Betroffen: index.php (2x), aktuelles.php, sortiment.php */
.contain,
.containe {
  padding-left: 24px;
  padding-right: 24px;
}

/* Dieselbe Sache eine Stufe kleiner: die Zeile haengt direkt in der Sektion,
   ohne Container dazwischen (g-4, also -12 px je Seite). */
.offer-div-services > .row {
  margin-left: 0;
  margin-right: 0;
}

/* Hier gibt es einen Container, er ist der Zeile aber nicht gewachsen:
   .container-xxl bringt 12 px Innenabstand mit, eine g-5-Zeile zieht 24 px
   heraus. Die Spaltenluecken im Inneren bleiben, nur der Ueberstand nach
   aussen wird gekappt. Betrifft footer.php und index.php. */
.container-xxl > .row.g-5 {
  margin-left: -12px;
  margin-right: -12px;
}

/* --- Fester Text ueber dem Slider (jagd.php, trophaen.php) ---------------
   Die Ebene liegt im .owl-carousel, aber ausserhalb von .owl-stage. Owl
   verschiebt nur den Stage-Inhalt - der Text bleibt deshalb stehen,
   waehrend die Bilder dahinter wechseln.
   pointer-events: none, damit die Pfeile des Sliders bedienbar bleiben.

   HELL ODER DUNKEL - das steht im Markup, eine Klasse genuegt:

       <div class="slider-text dunkel">   dunkler Verlauf, weisse Schrift
       <div class="slider-text hell">     heller Verlauf, dunkle Schrift

   Ohne Klasse gilt dunkel. Jede Seite kann es fuer sich entscheiden,
   jagd.php und trophaen.php muessen nicht gleich sein.

   Alles Weitere haengt an den Variablen unten - Verlaufsfarbe,
   Deckkraft, Schriftfarbe und Farbe des Schriftsaums. Wer nur etwas
   nachjustieren will, aendert dort eine Zahl und nichts sonst. */
.owl-carousel > .slider-text {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  pointer-events: none;

  /* Voreinstellung: dunkel */
  --ton: 0, 0, 0;          /* Farbe des Verlaufs */
  --saum: 0, 0, 0;         /* Farbe des Schattens um die Schrift */
  --schrift: #fff;
  --deckung-1: 0.55;       /* ganz links, wo der Text steht */
  --deckung-2: 0.42;
  --deckung-3: 0.18;       /* rechts, bevor der Verlauf ausblendet */
}

/* Heller Verlauf mit dunkler Schrift.
   Die Deckkraft ist bewusst hoeher als beim dunklen: die Slides sind
   dunkle Waldbilder, ein zarter Schleier traegt dunkle Schrift darauf
   nicht. Dafuer nimmt er dem Foto auf der linken Seite etwas Tiefe -
   das ist der Preis dieser Variante. */
.owl-carousel > .slider-text.hell {
  --ton: 255, 255, 255;
  --saum: 255, 255, 255;
  --schrift: #181818;
  --deckung-1: 0.82;
  --deckung-2: 0.66;
  --deckung-3: 0.30;
}

/* Gibt es nur der Vollstaendigkeit halber: dunkel ist schon die
   Voreinstellung. So laesst sich aber im Markup hinschreiben, was
   gemeint ist, statt sich auf eine unsichtbare Regel zu verlassen. */
.owl-carousel > .slider-text.dunkel {
  --ton: 0, 0, 0;
  --saum: 0, 0, 0;
  --schrift: #fff;
  --deckung-1: 0.55;
  --deckung-2: 0.42;
  --deckung-3: 0.18;
}

.owl-carousel > .slider-text > .container-xxl {
  width: 100%;
}

/* Der Verlauf blendet von links nach rechts aus: links steht der Text,
   rechts bleibt das Foto frei. */
.owl-carousel > .slider-text {
  background: linear-gradient(
    90deg,
    rgba(var(--ton), var(--deckung-1)) 0%,
    rgba(var(--ton), var(--deckung-2)) 30%,
    rgba(var(--ton), var(--deckung-3)) 55%,
    rgba(var(--ton), 0) 78%
  );
}

/* Zwei Schatten: ein enger fuer die Kante, ein weiter fuer die Flaeche.
   Sie halten die Schrift auch dort, wo der Verlauf schon ausgeblendet ist.
   h1 steht mit in der Liste, seit die Slider-Ueberschrift bei der
   SEO-Umstellung von h2 auf h1 gewechselt ist - ohne sie war sie
   dunkelgrau auf dunklem Wald. */
.owl-carousel > .slider-text :is(h1, h2, h6, p, span) {
  color: var(--schrift);
  text-shadow:
    0 1px 2px rgba(var(--saum), 0.65),
    0 2px 18px rgba(var(--saum), 0.45);
}

/* Auf dem Handy steht der Text ueber die ganze Breite - dort ein Verlauf
   von oben nach unten statt von der Seite. */
@media (max-width: 767.98px) {
  .owl-carousel > .slider-text {
    background: linear-gradient(
      180deg,
      rgba(var(--ton), calc(var(--deckung-3) - 0.03)) 0%,
      rgba(var(--ton), calc(var(--deckung-2) + 0.03)) 55%,
      rgba(var(--ton), calc(var(--deckung-1) + 0.05)) 100%
    );
  }
}

/* Auf dem Handy ist der Slider nur 250 px hoch. Dort passt die Ueberschrift,
   der Fliesstext wuerde unten herauslaufen. */
@media (max-width: 767.98px) {
  .owl-carousel > .slider-text .lead {
    display: none;
  }

  .owl-carousel > .slider-text .comon-heding {
    font-size: 28px;
  }
}


/* ============================================================
   Ueberschriften-Ebenen nach der SEO-Umstellung
   ============================================================
   Jede Seite hat jetzt genau eine h1. Dafuer wurden Tags
   getauscht - und theme-elements.css gibt h1 und h2 verschiedene
   Grundwerte. Die Regeln hier stellen das Aussehen von vorher
   wieder her, es aendert sich also nur die Bedeutung, nicht das
   Bild. Muss am Dateiende stehen, um die Regeln weiter oben zu
   ueberschreiben. */

/* War h2, ist jetzt h1: Hauptueberschrift jeder Seite.
   h2 hat Schriftstaerke 300 und Zeilenhoehe 42, h1 hat 200/44. */
h1.comon-heding {
  font-weight: 300;
  line-height: 42px;
}

@media (max-width: 575px) {
  h1.comon-heding {
    line-height: 40px;
  }
}

/* Waren h1, sind jetzt h2: die vier Schlagzeilen im Slider der
   Startseite. Ohne das werden sie kleiner - und unter 400 px
   wegen der alten Regel .slider h2 { font-size: 1em } winzig. */
.slider h2 {
  font-size: 2.6em;
  font-weight: 200;
  line-height: 44px;
}

@media (max-width: 400px) {
  .slider h2 {
    font-size: 2em;
    line-height: 24px;
  }
}

/* War h1, ist jetzt h2: der handgeschriebene Zwischentitel.
   Groesse und Staerke kommen aus den Klassen, nur die
   Zeilenhoehe unterscheidet sich. */
h2.sub-texter {
  line-height: 44px;
}