/*-- 
Name:          Beatrice von Singen, Hessisch Oldendorf
Url:           https://beatrice-von-singen.de
Description:   Beatrice von Singen, Hessisch Oldendorf | Symbolik, Magie und Kreativität Weserbergland
Version:       1.0 (elf42 Responsive)
______________ Webdesign by elf42 - Hameln Emmerthal */




/*-- img, biga, ref
_________________________ HTML > CSS; [© by elf42] -- */

video { width: 100%; }

figure {     margin: 0; padding:0; margin-bottom: var(--ab);
             margin-block-start:0; margin-block-end:0; margin-inline-start:0; margin-inline-end:0; }

figcaption { margin-top: var(--a10); }

/* nebeneinander  */

figure[class*="bi"] figure {     margin-bottom: var(--ab); padding-right: 4px; float:left; }

/* 2/3 und 1/3 */
figure.bi-2-1 figure, 
figure.bi-1-2 figure {              height: 20vh; overflow:hidden; }

figure.bi-2-1 figure:nth-child(1) { width: 35%; }
figure.bi-2-1 figure:nth-child(2) { width: 65%; }

/* 1/3 und 2/3 */
figure.bi-1-2 figure:nth-child(1) { width: 65%; }
figure.bi-1-2 figure:nth-child(2) { width: 35%; }

/* bi row */
figure.bi2 figure {              width: 50%; }
figure.bi3 figure {              width: 33%; }
figure.bi4 figure {              width: 25%; }


.flex.bi7 {              align-items: flex-start; align-content: space-between; }
.flex.bi7 figure {       width: 14.2%; height:auto; padding: 0 2px; }

@media only screen and (max-width: 599px ) {

figure[class*="bi"] figure {     width: 100%; }

.flex.bi7  {       flex-wrap: wrap; flex-direction: row;  }
.flex.bi7 figure {              width: 25%;   }
.flex.bi7 figure:nth-child(2) { width: 50%; height:inherit; overflow:hidden;   }

}




/*-- lesen sie mehr
_________________________ HTML > CSS; [© by elf42] -- */


.lsm {     width: 100%; margin:0 auto 0 auto; padding: 0;
             display: flex; justify-content: space-between; flex-wrap : wrap; }

.lsm figure { width: 100%;  margin-bottom: var(--ac); padding: var(--am); 
                            background: rgba(var(--m242t),0.7); border-radius: var(--abora); }

.lsm figure img {          width: 40%; float: left; }
.lsm figure figcaption {   width: 56%; float: right; 
                             text-align:left; margin-top: 0; }

.lsm figure img {                       padding:0; }
.lsm figure figcaption p {              padding: 0 0 var(--ab) 0; text-align: justify; }
.lsm figure figcaption h3 {             padding-top: 0/*var(--ab)*/; }
.lsm figure a.btn {         margin-bottom: 0; }

/*-- c-mire -- */
.c-mire:nth-child(2) .lsm figure img, 
.c-mire:nth-child(2) .lsm figure figcaption {       flex-direction: column;
                                                      width: 100%; float: left; }

  @media only screen and (max-width: 767px ) { /* MAX ! */
.lsm figure {              width: 100%; margin-bottom: var(--ab); padding: var(--am); border-radius: var(--abora); }
.lsm figure img, 
.lsm figure figcaption {   width: 100%; margin:0; padding:0; }

} @media only screen and (orientation: landscape) {}


/*-- cards
_________________________ HTML > CSS; [© by elf42] -- */

/*-- seite news/infos -- */

section[data-title="teaser"] p { font-family: "Roboto Bold"; font-weight:500; line-height: 1.8rem; }


/*-- uebersicht/angebote -- */

.c-offer {      margin: 0 0 var(--ab) 0; padding: 0; width: 100%;
                display: flex; justify-content: space-between; 
                color: var(--m112); }

.offer {        margin: 1rem 0.5rem;  padding: 0 0 var(--ab) 0; 
                display: flex; flex-direction: column; align-items : stretch;
                background: rgb(var(--m242t),0.3); }

.offer figure { margin: 0; padding: 0; 
                overflow:hidden; }

.offer .tt {    margin: 0; padding: var(--ab); 
                font-size: 1.7rem; font-weight: 500; line-height: 2.2rem; font-family: "Charm", Roboto; }
.offer .tx {    margin: 0; padding: 0 var(--ab) var(--am) var(--ab); }

.c-offer .offer .btn { width:80%; 
                       margin: auto var(--ab) 0 var(--ab); 
                       align-self: flex-start; }

  @media only screen and (max-width: 767px ) {
.c-offer {        flex-direction: column; align-items: center; }
.offer {                   width: 100%; }
.offer figure {            min-height: 30vh; }
.offer .tt {               margin: var(--ab) var(--ab) var(--am) var(--ab); padding:0 ; 
                           height: 6rem; }
.offer .tx {    margin: 0; padding: 0 var(--ab) var(--am) var(--ab); }

}  @media only screen and (min-width: 768px ) {
.c-offer {         flex-wrap: wrap;}
.offer {                      width: 46%; }

/*.offer:last-child {          width: 100%; }*/

.offer .tt {                     height: 7rem; }
.offer figure {                  height: 30vh; }

/*.offer:last-child.offer figure { height: 50vh; }*/

} @media only screen and (min-width: 980px ) {
.offer {              width: 46%; }



} @media only screen and (min-width: 1260px ) {

.offer .tt {               height: 8rem; }

} 


/*-- BildButton
_________________________ HTML > CSS; [© by elf42] -- */


.bibu {          display: flex; flex-wrap: wrap; 
                 justify-content: space-between; align-items: stretch; }

.c-full .bibu {          width:98%; margin: 0 auto; }

.bibu figure {               position: relative; 
                             height: 200px; overflow:hidden; 
                             margin-block-start:5px; margin-block-end:5px; }

.bibu figure:after {         position: absolute;
                             height:40%; 
                             left:0; bottom: 10px; 
                             content:""; opacity: 2; }

.bibu figure:hover:after {   opacity: 1; }


.bibu figure figcaption { position: absolute;
                             width:100%; margin:0; padding: var(--a5) 0;
                             left:0; bottom: 0; 
                             color: var(--m255); background: var(--ci02);
                             font-size:1rem; text-align:center; }

.bibu figure img {
-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; 
     -o-transition: all 0.3s ease-in-out;      transition: all 0.3s ease-in-out; 
}

.zoom {       margin: 0 auto; padding: 0; transition: transform .2s; }
.zoom:hover {                             transform: scale(1.05); } 


@media only screen and (min-width: 600px ) {
div.bibu figure {                width: 33%; }
div.bibu figure:nth-child(4), 
div.bibu figure:nth-child(7) {   width: 66%; }
}


/* rechte spalte */
.c-mire:nth-child(2) .bibu figure {  width:100%; }

.c-mire:nth-child(2) .bibu figure figcaption { position: absolute;
                             width:100%; margin:0; padding: var(--a5) 0;
                             left:0; bottom: 2%; 
                             color: var(--m255); background: rgba(var(--ci03t),0.5);
                             font-size:1rem; text-align:center; }
.c-mire:nth-child(2) a:hover figcaption {   background: rgba(var(--ci03t),0.9); }


/*-- Profil
_________________________ HTML > CSS; [© by elf42] -- */


.profil {              display: flex; display: -ms-flexbox; justify-content: space-between; -ms-flex-pack: justify;
                       align-items: flex-start; -ms-flex-align: start; flex-wrap : wrap; -ms-flex-wrap : wrap;
                       flex-direction: row; }

.profil div:nth-child(odd) {  width: 25%; margin:10px 0; padding:0 20px 0 0; text-align:right; font-weight:700; }
.profil div:nth-child(even) { width: 75%; margin:10px 0; padding:0 0 0 30px; 
                              border-left: 2px solid var(--m212);
                              align-items : stretch; -ms-flex-align : stretch; }