/*

TemplateMo 559 Zay Shop

https://templatemo.com/tm-559-zay-shop

---------------------------------------------
Table of contents
------------------------------------------------
1. Typography
2. General
3. Nav
4. Hero Carousel
5. Accordion
6. Shop
7. Product
8. Carousel Hero
9. Carousel Brand
10. Services
11. Contact map
12. Footer
13. Small devices (landscape phones, 576px and up)
14. Medium devices (tablets, 768px and up)
15. Large devices (desktops, 992px and up)
16. Extra large devices (large desktops, 1200px and up)
--------------------------------------------- */


/* Typography */
body {
  background-color: #f6f6f6;
  line-height: 1.3;
}
.fixed-nav {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff; /* Beispiel-Hintergrund */
  z-index: 10; /* Sorgt dafür, dass die Leiste über anderen Elementen liegt */
}


.h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 48px !important;
  font-weight: 200 !important;
}
h1.big {
    font-family: 'Roboto', sans-serif;
  font-size: calc(36px + (36 - 20) * ((100vw - 320px) / (1600 - 320)));
  font-weight: 200!important;
  letter-spacing: 0.22rem;
  padding-top: 5vh;
  color: olive;
}
h2 {
  font-family: 'Open Sans ', sans-serif;
  font-size: calc(32px + (32- 24) * ((100vw - 320px) / (1600 - 320)))!important;
  font-weight: 200;
   color: #2f2f2f;
}
h2.big {
 font-family: 'Open ', sans-serif;
  font-size: calc(28px + (34- 26) * ((100vw - 320px) / (1600 - 320)));
  font-weight: 300!important;
   color: olive;
}
h2.bann {
  font-family: 'Open sans', sans-serif;
  font-size: calc(30px + (30- 26) * ((100vw - 320px) / (1600 - 320)));
  font-weight: 400!important;
   color: olive;
  margin: 0auto;
  text-align: center;
}
.h3 {
  font-family: 'Roboto', sans-serif;
 font-size: calc(26px + (26 - 23) * ((100vw - 320px) / (1600 - 320)));
}

h3.blog {
 font-family: 'Open sans', sans-serif;
font-size: calc(23px + (23 - 20) * ((100vw - 320px) / (1600 - 320)));
 font-weight: 400 !important; 
}

.h3-o {
   font-family: 'Roboto', sans-serif;
   font-size: calc(32px + (32- 26) * ((100vw - 320px) / (1600 - 320)));
   color: olive!important;
    font-weight: 200 !important;
}
h3.grey{
   font-family: 'Open sans', sans-serif;
   font-size: calc(26px + (26 - 23) * ((100vw - 320px) / (1600 - 320)));
   font-weight: 300 !important;
}
h4 {
   font-family: 'Open sans', sans-serif;
   font-size: 1.3em;
   font-weight: 300 !important;
   padding-bottom: 15px;
}
h4.blog {
 font-family: 'Open sans', sans-serif;
font-size: calc(23px + (23 - 21) * ((100vw - 320px) / (1600 - 320)));
 font-weight: 400 !important; 
}





h5{
   font-family: 'Roboto', sans-serif;
   font-size: 1.1em;
   font-weight: 300 !important;
   color: #1F1F1F !important;
}
p  {
   text-decoration: none !important;
   font-weight: 300!important;
   font-size: 1.02em;
}
.psm {
   text-decoration: none !important;
   font-weight: 200!important;
   font-size: 1.1em;
  margin-top: 10px;
}

p.gross  {
   font-size: 1.2em;
   font-weight: 400 !important
}
.navi{
   font-size: calc(21px + (21 - 18) * ((100vw - 320px) / (1600 - 320)));
   font-weight: 400 !important;
   font-family: 'Open sans', sans-serif; 
  color: #5F5F5F !important;
}

.fett  {
   text-decoration: none !important;
   font-weight: 600!important;
}
li  {
   margin-bottom : 0.1em;
}
strong  {
   text-decoration: none !important;
   font-weight: 600!important;
}
.olive  {
   text-decoration: none !important;
   font-weight: 400!important;
   font-size: 1.02em;
   color: olive !important;
}
.olli {
   text-decoration: none !important;
   font-weight: 400!important;
   font-size: 1.45em;;
   color: olive !important;
}
.olliver {
   font-family: 'Roboto', sans-serif;
   text-decoration: none !important;
   font-weight: 200!important;
   font-size: 1.25em;;
   color: olive !important;
   line-height: 1.15em;
}
.olio {
 color: olive;
}

nav li {
  font-family: 'Open sans', sans-serif;
  font-size: 1.2em !important;
  font-weight: 400!important;
}
a {
   text-decoration: none !important;
   font-weight: 400!important;
   font-size: 1.02em;
   color: #5F5F5F !important;
}
a:link {
 color: #5F5F5F;
}
a.ov {
   text-decoration: none !important;
   font-weight: 400!important;
   font-size: 1.1em;
   color: olive !important;
}
lit {
   text-decoration: none !important;
   font-size: 1.1em;
   padding: 30px;
}
.sprung {
    visibility: hidden;
    height: 0px !important;
    position: absolute;
    margin: -100px;
}

.vbox {
  font-size: 1.35em;
  font-family: 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1.5em;
  padding: 30px;
  word-wrap: break-word;
  hyphens: auto;
}
.voxbox {
  font-size: 1.32em;
  font-family: 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1.26em;
  padding: 20px;
  
  word-wrap: break-word;
  hyphens: auto;

}
.vbox-sm {
  display: inline-block;
    position: relative;
  font-size: calc(19px + (19 - 16) * ((100vw - 320px) / (1600 - 320)));

  font-family: 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1.25em;
max-width: 95%;
 padding-left: 30px;
  overflow-wrap: break-word;
  hyphens: auto;
}
.blogbox {
  display: inline-block;
    position: relative;
  font-size: calc(18px + (18 - 16) * ((100vw - 320px) / (1600 - 320)));

  font-family: 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1.2em;
  flex-basis: 73%; /* Definiert eine feste Breite in Prozent */
 padding-left: 20px;
 padding-right: 20px; 
  overflow-wrap: break-word;
  hyphens: auto;
}
.blogbox2 {
  display: inline-block;
    position: relative;
  font-size: calc(18px + (18 - 16) * ((100vw - 320px) / (1600 - 320)));

  font-family: 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1.2em;
  flex-basis: 80%; /* Definiert eine feste Breite in Prozent */
  padding: 20px;
  overflow-wrap: break-word;
  hyphens: auto;
}
.teabox {
  display: inline-block;
    position: relative;
  font-size: 1.2em;
  font-family: 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1.2em;
  flex-basis: 70%; /* Definiert eine feste Breite in Prozent */
  overflow-wrap: break-word;
  hyphens: auto;
}




.vbox-sm2 {
  display: inline-block;
    position: relative;
  font-size: calc(19px + (19 - 16) * ((100vw - 320px) / (1600 - 320)));

  font-family: 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1.25em;
max-width: 97%;
 padding-left: 30px;
  overflow-wrap: break-word;
  hyphens: auto;
}
.sidebox {
  display: inline-block;
    position: relative;
  font-size: 1.15em;

  font-family: 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1.3em;
 padding-left: 15px;
  overflow-wrap: break-word;
  hyphens: auto;
}
vbox-sm4 {
  display: inline-block;
    position: relative;
  font-size: calc(19px + (19 - 16) * ((100vw - 320px) / (1600 - 320)));

  font-family: 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1.25em;
max-width: 95%;
 padding-left: 30px;
  overflow-wrap: break-word;
  hyphens: auto;
}


.vbox-2 {
 font-size: 1.2em;
   font-family: 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1.25em;
  padding-left: 15px;
  padding-right: 15px;
  hyphens: auto;
  word-wrap: break-word;
  position: relative;
}
.card {
  -webkit-box-shadow: 5px 5px 5px 5px rgba(234,234,234,0.75);
  box-shadow: 2px 2px 2px 2px rgba(234,234,234,0.75);
  position: relative;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 3px solid rgba(128,128,0,.125);
  border-radius: .25rem;
  container-type: inline-size;
  hyphens: auto;
}
.klappbox {
  padding: 10px;;
  word-wrap: break-word;
  hyphens: auto;
}

.leftFloat {
 float: left;
    margin-right: 15px;
}
.rightFloat {
float : right;
  margin-left: 15px;
}
.leftFloat2 {
      float: left;
  padding-bottom: 25px; 
  padding-right: 20px;
}
.leftFloat13 {
      float: left;
margin-right: 15px;
       max-width: 200px;
  height: auto;
}



.text-bild-container {
  /* Optional: Container für das gesamte Element, falls benötigt */
  overflow: hidden;
                    /* Wichtig: Verhindert, dass der float-Effekt den Container "zusammenfällt" */
}

.text-bild-container img {
  float: left; /* Bild links platzieren */
  height: auto; /* Höheneinhaltung, um das Seitenverhältnis beizubehalten */
}

.text-bild-container .text-inhalt {
  overflow: hidden; /* Sorgt dafür, dass der Text den umflossenen Bereich ausfüllt */
}

.text-bildr-container img {
  float: right;
  margin-left: 15px;
  margin-bottom: 10px;
  max-width: 180px;
  height: auto;
}

.text-bildbigr-container img {
  float: right;
  margin-left: 15px;
  margin-bottom: 10px;
  max-width: 400px;
  height: auto;
    overflow: hidden;
}
.text-bildbigg-container img {
  float: right;
  max-width: 110%;
  height: auto;
    overflow: hidden;
}
.links  {
align-items: left;
}  
.rechts {
align-items: right;
 float: right;  
}  
.rechts-2 {
align-items: right;
 float: right; 
  margin-right: -2%;
}  
.text-bildbig-container img {
  float: left;
  margin-right: 25px;
  margin-bottom: 0px;
  max-width: 400px;
  height: auto;
    overflow: hidden;
}
.text-bildbigr3-container img {
  float: right;
  margin-left: 15px;
  margin-top: 0px;
  margin-right: -15px;
  max-width: 230px;
  height: auto;
}
.hoch {
margin-top: -30px;
}  
space1 {
  width: auto;
  height: 1px;
  margin-top: -30px;
}
space5 {
  width: auto;
  height: 3px;
}
.space10 {
  width: auto;
  height: 10px;
}
.space20 {
  width: auto;
  height: 20px;
}
 .space30 {
  width: 100%;
  height:30px;
  position:relative;
}
.space40 {
  width: 100%;
  height:40px;
  position:relative;
}
.space50 {
  width: 100%;
  height:5vh;
   position:relative;
}
.space50w {
  width: 100%;
  height:50px;
   position:relative;
    background-color: #FFF ;
}
.space60 {
  width:100%;
  height: 14vh;
}
.img-fluid {
  max-width: 100%;
  height: auto;
}
.card {
  -webkit-box-shadow: 5px 5px 5px 5px rgba(234,234,234,0.75);
  box-shadow: 2px 2px 2px 2px rgba(234,234,234,0.75);
  position: relative;
  display: flex;
  flex-direction: column;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 3px solid rgba(128,128,0,.125);
  border-radius: .25rem;
  container-type: inline-size;
  hyphens: auto;
}
 .boxtext{
  font-size: 1.2em;
  font-family: "Arial", sans-serif !important;
  font-weight: 300;
  padding: 20px 10px 10px 10px;
}
 .bigtext{
  font-size: 1.2em;
  font-family: "Open sans", sans-serif !important;
  font-weight: 300;
}
.rechts {
  text-align: right;
}
.wrapperr{
 padding-left:  40px;
}
.heben  {
  margin-top: -50px;
}

.center {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.spalte-li{
  padding-left: 2em;
}
.banner {
 position: relative;
  border-top: 1px solid olive;
  border-bottom: 1px solid olive;
  padding: 10px;
  font-size: 1.8em;
  font-weight: 300;
  margin-bottom: 30px;
}
.zw {
 position: relative;
  border-top: 1px solid #cac494;
  border-bottom: 1px solid #cac494;
  background-color: #f6f6f6;
  height: 25px;
  width: 106%;
 margin-top: 20px;
 margin-bottom: 2px;
margin-left: -3%;
}
.zentriert {
  position: relative;
 margin-top:  20%;
}
.clear {
clear:both
}



/* Stile für den Hauptinhalt */
.blogtext {
  margin-right: 370px; /* Stellt sicher, dass der Inhalt nicht von der Sidebar verdeckt wird (Breite der Sidebar + Padding + kleinerer Abstand) */
max-width: 100%;
  padding: 20px; /* Innenabstand */
}


.spalte1 {
  flex-basis: 800px; /* Definiert die feste Breite der ersten Spalte */
  width: 800px; /* Alternative feste Breite */
  flex-grow: 0; /* Verhindert, dass die Spalte wächst */
}

.spalte2 {
  flex-basis: 25%; /* Definiert eine feste Breite in Prozent */
  flex-grow: 0; /* Verhindert, dass die Spalte wächst */
   padding: 15px; /* Innenabstand */
  box-sizing: border-box; /* Sorgt dafür, dass Padding und Border in der Breite enthalten sind */
}

    /* Einheitliche Card-Optik */
    .teabox.card, .blogbox.card { border:0; border-radius:.5rem; box-shadow:0 8px 24px rgba(0,0,0,.06); overflow:hidden; }
    .teabox article, .blogbox article { padding:16px; }
    /* Teaser-Bilder: einheitlich + links 20px Abstand zum Text */
    .leftFloat2{
      width:200px;height:200px;object-fit:cover;border-radius:4px;
      float:left;margin:0 20px 15px 0; /* rechts 20px, unten 15px */
    }
    @media (max-width:576px){
      .leftFloat2{ width:120px; height:120px; float:none; display:block; margin:0 0 10px 0; }
    }
    /* Headline-Zwischenräume konsistent */
    h3.h3.blog, .h3.blog, h3.h3\.blog { margin-top:0.25rem; }


  /* Breadcrumb wie bei Bootstrap, ohne Framework-Abhängigkeit */
  nav[aria-label="Breadcrumb"] ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: .5rem 0;
    margin: 0;
    gap: .25rem;
  }
  nav[aria-label="Breadcrumb"] ol li a {
    text-decoration: none;
  }
  nav[aria-label="Breadcrumb"] ol li[aria-current="page"] {
    color: #6c757d; /* dezenter Ton für aktuelle Seite */
  }
  /* Trenner */
  nav[aria-label="Breadcrumb"] ol li+li::before {
    content: "›";
    padding: 0 .5rem;
    color: #6c757d;
  }





/* General */
.logo { font-weight: 500 !important;}
.text-white {  color: #FFF !important;}
.text-muted { color: #bcbcbc !important;}
.text-mgrau { color: #969696 !important;}
.text-light { color: #cfd6e1 !important;}
.bg-white { background-color: #FFF !important;}
.bg-dark { background-color: #212934 !important;}
.bg-light { background-color: #e9eef5 !important;}
.bg-body { background-color: #f6f6f6 !important;}
.bg-grey { background-color: darkgrey;}
.bg-black { background-color: #1d242d !important;}
.bg-mgrau { background-color: #969696 !important;}
bg-mgrau { background-color: #969696 !important;}
bg-oli { background-color: #d8d3ae!important;}
.bg-bisq {background-color: bisque !important;}
.btn-success {
  background-color: #59ab6e !important;
  border-color: #56ae6c !important;
}
.pagination .page-link:hover {color: #000;}
.pagination .page-link:hover, .pagination .page-link.active {
  background-color: #69bb7e;
  color: #fff;
}
/* Nav */
#templatemo_nav_top { min-height: 40px;}
#templatemo_nav_top * { font-size: .9em !important;}
#templatemo_main_nav a { color: #212934;}
#templatemo_main_nav a:hover { color: #69bb7e;}

/* Shop */
.shop-top-menu a:hover { color: #69bb7e !important;}


.product-wap .product-color-dot.color-dot-light { background:#e0e0e0;}

.card.product-wap .card .product-overlay {
  background: rgba(0,0,0,.2);
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}
.card.product-wap:hover .card .product-overlay {
  visibility: visible;
  opacity: 1;
}
.card.product-wap a { color: #000;}
#carousel-related-product .slick-slide:focus { outline: none !important;}
#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}
/* Brand */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: .5s;
}
.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
/* Carousel Hero */
#template-mo-zay-hero-carousel .carousel-indicators li {
  margin-top: -50px;
  background-color: #59ab6e;
}
#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #59ab6e !important;
  font-size: 2.8em !important;
}
/* Carousel Brand */
.tempaltemo-carousel .h1 {
  font-size: .5em !important;
  color: #000 !important;
}
/* Services */
.services-icon-wap {transition: .3s;}
.services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
.services-icon-wap:hover {background: #69bb7e;}
/* Contact map */
.leaflet-control a, .leaflet-control { font-size: 10px !important;}
.form-control { border: 1px solid #e8e8e8;}
/* Footer */
#tempaltemo_footer a { color: #dcdde1;}
#tempaltemo_footer a:hover { color: #68bb7d;}
#tempaltemo_footer ul.footer-link-list li { padding-top: 10px;}
#tempaltemo_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}
#tempaltemo_footer ul.footer-icons li:hover {
  background-color: #cfd6e1;
  transition: .5s;
}
#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}
#tempaltemo_footer .border-light { border-color: #2d343f !important;}
/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up)*/
.product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
  font-size: 12px !important;
}
.product-wap .product-color-dot {
  width: 6px;
  height: 6px;
}

@media (min-width: 576px) {
  .tempaltemo-carousel .h1 { font-size: 1em !important;}
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {max-width: 450px;}
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav {max-width: 850px;}
  #template-mo-zay-hero-carousel .carousel-item {min-height: 30rem !important;}
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }
 /* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {} 
  } 

    .frmtx {
      --font-size: 100%;
      --font-family: inherit;
      --font-color: #4F4F4F;
      --background-color: #FFF;
      --border-color: olive;
      --border-width: 1px;
      --border-radius: 5px;
      margin: 1rem;
      min-width: 240px
    }
    .frmtx * {color: var(--font-color);font-family: var(--font-family);font-size: var(--font-size);margin: 0;padding: 0;appearance: auto;outline: none;box-sizing: border-box}
    .frmtx label {padding: 0;margin: 1em 0 .3em;display: block;line-height: 1.3}
    .frmtx label:first-child {margin-top: 0}
    .frmtx input, .frmtx textarea, .frmtx button {border: var(--border-width) solid var(--border-color);border-radius: var(--border-radius);background-color: var(--background-color)}
    .frmtx input, .frmtx textarea {width: 100%;resize: none;padding: .5em;line-height: 1.3}
    .frmtx input[name="_gotcha"] {display: none}
    .frmtx input[type="checkbox"] {display: inline;width: 1.1em;height: 1.1em;appearance: auto;margin-right: .2em}
    .frmtx button {display: block;padding: .5em 1.5em;margin: 1.5em 0 0;line-height: 1.5;font-weight: bold;cursor: pointer}

 .blogbox article{
  padding:14px 16px;           /* oben/unten gleich */
}

/* 2) Erstes manuelles <br> im Artikel neutralisieren (ohne HTML zu ändern) */
.blogbox article > br:first-child{
  display:none;
}

/* 3) Bild links andocken mit symmetrischer Luft */
.leftFloat2{
  width:200px; height:200px; border-radius:4px;
}
.blogbox .leftFloat2{
  float:left;
  display:block;               /* verhindert baseline-Versatz */
         /* oben 0, rechts 16, unten 10, links 0 */
}

/* 4) Überschrift bündig halten (verhindert „extra“ Abstand oben) */
.blogbox h3{
  margin-top:0.25rem;
  margin-bottom:0.5rem;
}

/* 5) Mobile: Bild kleiner + etwas weniger Abstand */
@media (max-width:576px){
  .leftFloat2{ width:180px; height:180px; }
  .blogbox .leftFloat2{ margin:0 10px 8px 0; }
 
  
  /* ===============================
     Artikelbilder: quadratisch & umflossen
     =============================== */
  /* Basis: Floats aktiv lassen, Text umfließt die Bilder */
  .blogbox2 img.leftFloat,
  .blogbox2 img.rightFloat {
    width: 360px !important;   /* überschreibt .img-fluid */
    height: 360px !important;  /* quadratisch */
    object-fit: cover;         /* sauberer Zuschnitt ins Quadrat */
  }

  /* Abstände für Fließtext */
  .leftFloat { margin: 0 1rem 1rem 0; }
  .rightFloat { margin: 0 0 1rem 1rem; }

  /* Mobile: 180 x 180 px */
  @media (max-width: 767.98px) {
    .blogbox2 img.leftFloat,
    .blogbox2 img.rightFloat {
      width: 180px !important;
      height: 180px !important;
    }
    /* Optional: etwas mehr Luft auf sehr kleinen Screens */
    .leftFloat { margin: 0 .75rem .75rem 0; }
    .rightFloat { margin: 0 0 .75rem .75rem; }
  }

  /* (falls du zusätzlich Bilder in <figure> nutzt) */
  .blogbox2 figure img.leftFloat,
  .blogbox2 figure img.rightFloat {
    width: 360px !important;
    height: 360px !important;
    object-fit: cover;
  }
  @media (max-width: 767.98px) {
    .blogbox2 figure img.leftFloat,
    .blogbox2 figure img.rightFloat {
      width: 180px !important;
      height: 180px !important;
    }
  }

  /* ===============================
     Hamburger-Icon sichtbar machen
     (unabhängig von navbar-light/-dark)
     =============================== */
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }
  .navbar-toggler {
    border: none;
    outline: none;
  }

  /* (Optional, aber hübsch) leicht größere Klickfläche */
  @media (max-width: 991.98px) {
    .navbar-toggler { padding: .5rem .75rem; }
  }  
 .leftFloat,
.rightFloat {
  float: none;
  display: block;
  margin: 1rem auto;
  max-width: 100%;
  height: auto;
  width: 180px;  /* Default = Mobile */
  border-radius: 1mm;
  object-fit: cover;
}

/* Blockbilder (keine floats) */
.text-bildbig-container img,
.text-bildbigr3-container img,
.text-bildbigg-container img {
  width: 100%;
  height: auto;
  border-radius: 1mm;
  display: block;
}

/* Desktop-Regel */
@media (min-width: 992px) {
  .leftFloat {
    float: left;
    margin: 0 1.5rem 1rem 0;
    width: 360px;
    height: 360px;
  }

  .rightFloat {
    float: right;
    margin: 0 0 1rem 1.5rem;
    width: 360px;
    height: 360px;
  }
}

/* Falls ein float-Bild zu groß wird, Layout-Schutz */
@media (max-width: 991.98px) {
  .leftFloat,
  .rightFloat {
    float: none !important;
    margin: 1rem auto !important;
  }