/* Anzeige einer Kleinanzeige  
   -> Besonderheit hier: Durch "Eigene Kleinanzeige erstellen" ist es eine Flexbox in einer Flexbox 
      mit unterschiedlichen Richtungen (außen: row, innen: column)
 ___________________________      ___________________________
|   _____________________   |    |                           |
|   |                    |  |    |                           |
|   | KLEINANZEIGE INFOS |  |    |      KONTAKTAUFNAHME      |
|   |____________________|  |    |                           |
|                           |    |                           |
|   _____________________   |    |                           |
|   |    KA ERSTELLEN    |  |    |                           |
|   |____________________|  |    |                           |
|                           |    |                           |
|___________________________|    |___________________________|
*/

.breadcrumb.kleinanzeige{background:transparent;line-height: 1.2em;font-size: 1.2em; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;}
.breadcrump-scroller {position: relative;z-index: 2;height: 2.75rem;overflow-y: hidden;margin-bottom: 1em;}
.breadcrump-scroller .nav {display: -ms-flexbox;display: flex;-ms-flex-wrap: nowrap;flex-wrap: nowrap;padding-bottom: 1rem;margin-top: -1px;overflow-x: auto;text-align: center;white-space: nowrap;-webkit-overflow-scrolling: touch;}
a {text-decoration: none;color: #369;}
a.anzeige-bearbeiten{height: 100%;background: #fff;border-radius: 1em;box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;margin: 1em 1em;padding: .5em 1em 1em 1em;overflow: auto;display: block;font-size: 1.1em;line-height: 1em;text-align: center;color: #369;border: 1px solid #369;}
a.anzeige-bearbeiten:hover{background: #296394 !important;border: 1px solid #296394;color: white !important;text-decoration: none;}
a.anzeige-bearbeiten:hover>svg{filter: invert(99%) sepia(100%) saturate(0%) hue-rotate(296deg) brightness(108%) contrast(101%);} 
.physioblue{filter: invert(36%) sepia(22%) saturate(1182%) hue-rotate(169deg) brightness(99%) contrast(101%);} /* hellblaue Farbe für svgs (https://codepen.io/sosuke/pen/Pjoqqp)*/
.flex-container {display: flex;flex-wrap: wrap;align-content: space-around;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;}
.flex-container-column {display: flex;flex-direction: column;}
/* div:nth-child(1),  */
.flex-container-column > div.flex-child:nth-child(2) {background: #fff;border-radius: 1em;box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.15) !important;margin: 0em 1em;padding: 1.5em 2em 2em 2em;} 
.flex-child:nth-child(1){flex: 8;}
.flex-child:nth-child(2){flex: 4;}
.smaller:nth-child(2) {flex: 4;position: -webkit-sticky;position: sticky;top: 7em;}
.hardfacts-details{margin-bottom: 1em;}
.ueberschrift-details{font-weight: 700;margin-bottom: 0;margin:  0em  0em .5em 0em;}
.ueberschrift-preis{font-weight: 500;margin-bottom: 0;margin:  0em  0em .5em 0em;color:#155724}
h4.unterueberschrift-kleinanzeigen{font-size: 20px;font-weight: 500;margin: 0em 0em .5em 0em;}
.anzeigentext{color:#635b67;font-size: 1.1em;}
.list-svg{position: relative;margin-bottom: -.5em;margin-right: .5em;}
.flexbox-uebersicht{display: flex;flex-wrap: wrap;align-content: space-around;font-size: 1.1em;padding-bottom: .5em;}
.flexchild-uebersicht:nth-child(even){text-align: left;padding-left: 1em;}
svg#svg_ort{margin-bottom: -1em; margin-right: -.5em;}
.eckdaten{margin-top: .65em;font-weight: 500;display: inline-block;background: #fafafa;padding: .5em 1em;border: 1px solid lightgray;border-radius: 1em;}
.kaufinfo{margin-top: .65em;}
a.anmelden{display: block;text-decoration: none;margin-top: 2em;font-size: 1.2em;background: #92bcec;color: white;text-align: center;padding: .5em;border: 1px solid lightgray;border-radius: 1em;}
a.anmelden:hover{font-weight:500; color: #fff; background-color: #369;}
.fehlertext{font-size:1.2em;}
.kleinanzeige_plzort{float:right;margin-top: .5em;}
input, textarea.input {display: block;box-sizing: border-box;width: 100%;outline: none}
input[type="text"], textarea.input {background: #f5f5f5;border: 1px solid #e5e5e5;font-size: 1.1em;padding: .5em;border-radius: 5px;margin-bottom: 1em;}
input[type="text"]:focus, textarea.input:focus {background: #f0f7ff}
input[type="file"] {font-family: inherit;}
.nachricht_schicken{margin-top: 1em;border: 1px solid #92bcec;background: #92bcec;color: white;padding: .5em;font-size: 1.1em;border-radius: 1em;box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px;}
.nachricht_schicken:hover{font-weight: 500;background: #369;border: 1px solid #369;}
.kontakt_wrapper{height: 100%;background: #fff;border:1px solid #f1eeee;border-radius: 1em;box-shadow: 0 2px 4px rgb(45 47 59 / 12%);margin: .0em 1em;padding: 1em 1.5em 1.5em 1.5em;overflow: auto;}
.hyphens{hyphens: auto;word-break: break-word;overflow-wrap: break-word;hyphenate-limit-chars: auto 3;hyphenate-limit-lines: 4;-webkit-hyphens: auto;-webkit-hyphenate-limit-chars: auto 3;-webkit-hyphenate-limit-lines: 4;-ms-hyphens: auto;-ms-hyphenate-limit-chars: auto 3;-ms-hyphenate-limit-lines: 4;}

/* Image gallery  */
.carousel {margin-bottom: 40px;}
.carousel-cell-image {display: block;height: 300px;min-width: 200px;border-radius:.5em;opacity: 0;-webkit-transition: opacity 0.4s;transition: opacity 0.4s; margin-right: .5em;}
.carousel-cell-image.flickity-lazyloaded,.carousel-cell-image.flickity-lazyerror {opacity: 1;}
.preview_box{text-decoration:none;background: #fff;border: 1px dashed;display: block;width: 300px;height: 300px;border-radius: .5em;margin-right: .5em;}
.preview_box:hover{text-decoration:none;background: whitesmoke;}
.add_bild_text{text-align: center;padding-top: 45%; font-size: 1.1em;}
.add_images_svg{margin: 0px auto;display: block;position: relative;top: 40%;}
@media (max-aspect-ratio: 1/1) {ul.bilderlayout > li {height: 30vh;}}
@media (min-height: 650px) {ul.bilderlayout > li { height: 20vh;}}
@media (max-width: 649px) {ul.bilderlayout > li:not(:first-child) {display: none; /* Alle bis auf ersten verstecken */}}
@media (max-aspect-ratio: 1/1) and (max-width: 480px) {ul.bilderlayout {flex-direction: row;}ul.bilderlayout > li {height: auto;width: 100%;}img.diashow {width: 100%;max-height: 60vh;min-width: 0;}}

/* Mobile Styles */
@media (max-width: 991px) { /* < Tablet */
   .breadcrumb.kleinanzeige{margin: 0em 0em .5em 0em;padding: 0em 0em .7em 0em;border-bottom: 1px solid lightgray;border-radius: 0;font-size: 1.1em;}
   .breadcrump-scroller{height: 3.3rem;}
   .flex-container > .flex-child:nth-child(1) {flex: none; width: 100%;height: 100%;margin: 0 !important;position: relative;top: 0;padding: 0;}
   .flex-container > .flex-child:nth-child(2) {flex: none; width: 100%;height: 100%;margin: 0 !important;}
   .kontakt_wrapper{margin:0;}
   .flex-container-column > div.flex-child:nth-child(2) {margin:0;padding: 1em;} /*div:nth-child(1),*/ 
   a.anzeige-bearbeiten {display: block;font-size: 1em;}
   h1#rubriken{display: none;}
   svg.erglist-svg {margin-right: -.5em;}
   h1{font-size:30px}
   .hardfacts-details{font-size: 1.2em;}
}
@media (max-width: 1199px) {.kleinanzeige_plzort{float:none;display: block;margin-top: 1em;}  } /* Damit Überschriften nicht mit PLZ Ort kollidieren */

@media (min-width: 992px) { /* >= Tablet */
   .breadcrump-scroller{margin-bottom: 2em;}
   svg.list-svg{display: inline;bottom: 0em}
   h1{font-size:36px}
   .flex-container {display: flex;flex-wrap: wrap;align-content: space-around;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;}
   .flex-container-column {display: flex;flex-direction: column;}
   /*div:nth-child(1),*/
   .flex-container-column > div.flex-child:nth-child(2) {background: #fff;border-radius: 1em;box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.15) !important;margin: 0em 1em;padding: 1.5em;} 
   .flex-child:nth-child(1){flex: 8;padding: 0px 15px;}
   /* .flex-child:nth-child(2){flex: 4;height: 100%;background: #fff;border-radius: 1em;box-shadow: 0 6px 30px rgb(0 0 0 / 20%), 0 4px 6px rgb(0 0 0 / 15%) !important;margin: 0em 1em;padding: 1.5em;overflow: auto;position: -webkit-sticky;position: sticky;top: 5em;} */
   .flex-child:nth-child(2){flex: 4;height: 100%;overflow: auto;position: -webkit-sticky;position: sticky;top: 5em;}
   .smaller:nth-child(2) {flex: 4;position: -webkit-sticky;position: sticky;top: 7em;}
   .flexchild-uebersicht:nth-child(even){text-align: right;padding-left: 0;}
}

@media screen and (min-width: 992px) and (max-width: 1199px) { /* > iPad und < großer Laptop */
   .flexbox-uebersicht{display: block;}
   .flexchild-uebersicht:nth-child(even){text-align: left;}
}