/*-- 
Name:          Startadvise, Rechtsanwalt Norman Stegemann, Königstein im Taunus
Url:           https://startadvise.de
Description:   Startadvise, Kanzlei für Wirtschaftsrecht, Rechtsanwalt Norman Stegemann, Königstein im Taunus
Version:       1.0 Neuumsetzung Responsive
______________ Webdesign by elf42 - Hameln Emmerthal */


/*-- img, biga, ref
_________________________ startadvise [© 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);*/ text-align:center; }



/*  */
.flex.bi2, .flex.bi3, .flex.bi4 {       flex-direction: row; }

.flex.bi2 {              margin-bottom: var(--ab); }
.flex.bi2 figure {       width: 50%; height:auto; overflow:hidden; }

.flex.bi3 {              margin-bottom: var(--ab); }
.flex.bi3 figure {       width: 32%; height:auto; overflow:hidden; }

.flex.bi4 {              align-items: flex-start; align-content: space-between; }
.flex.bi4 figure {       width: 25%; height:auto; }

/*-- c-mire -- */
.c-mire:nth-child(2) .flex.bi2, 
.c-mire:nth-child(2) .flex.bi3, 
.c-mire:nth-child(2) .flex.bi4 {        flex-direction: column; }

.c-mire:nth-child(2) .flex.bi2 figure,
.c-mire:nth-child(2) .flex.bi3 figure,
.c-mire:nth-child(2) .flex.bi4 figure {       width: 100%; }

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

.flex.bi2, .flex.bi3, .flex.bi4 {       flex-direction: column; }

.flex.bi2 figure,
.flex.bi3 figure,
.flex.bi4 figure {       width: 100%; }


}




/*-- accordeon
_________________________ startadvise [© by elf42] -- */

.acco input{  display: none;}

.acco .acc { margin: 0 auto; padding: 0 20px; 
               height: 0; 
               overflow:hidden; line-height: 1.4; transition: all 0.5s; }

.acco input:checked~.acc { 
               padding: var(--ab) var(--ac); 
               height: auto; 
               background-color: rgba(var(--m242t),0.3); transition: all 0.5s; }

.acco label {  width: 100%; padding: var(--a20); 
               display: block; font-weight: 600; 
               background-color: var(--m255); border-bottom: 1px solid var(--ci01); 
               cursor: pointer; z-index: 100; }

.acco input:checked+label {background-color: var(--m242);}

.acco section {background-color: var(--tr);}


/*-- lesen sie mehr
_________________________ startadvise [© by elf42] -- */


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

.c-lsm figure { width: 100%;  margin-bottom: var(--ac); padding: var(--ab); 
                              background: var(--m255); border-radius: var(--abora); }

.c-lsm figure img {          width: 30%; float: left; }
.c-lsm figure figcaption {   width: 66%; float: right; }


.c-lsm figure img {                       padding:0; }
.c-lsm figure figcaption p {              padding: 0 0 var(--ab) 0; text-align:left; }

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

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

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

}


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





/*-- cards
_________________________ startadvise [© by elf42] -- */

.offer {          width: 100%;
                  display: flex; justify-content: space-between; align-items : stretch; 
                  flex-wrap : wrap; }

.offer figure {   margin:0; padding: var(--ab); 
                  margin-block-start:0; margin-block-end:0; margin-inline-start:0; margin-inline-end:0;
                  display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-between; align-items: stretch;
                  overflow:hidden; 
                  background: rgba(var(--m255t),1); }

.offer figure figcaption {           width:100%; text-align: left; }

.offer figure figcaption p::after {  content: " ..."; }

.offer figure {                      margin-bottom: var(--ab); }
.offer figure img,
.offer figure figcaption time, 
.offer figure figcaption h3 {        margin-bottom: var(--am); padding:0; }

.offer figure figcaption time {      margin-bottom: var(--am); display: block; }

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


/*-- zweispaltig -- */
.offer.fig2 figure {                       width: 48%; }



  @media only screen and (max-width: 767px ) { /* MAX ! */
.offer {                 flex-direction: column; align-items: center; }
.offer figure {          width: 100%; padding: var(--am); }

.offer figure img  {     min-height: 100px; }

/*-- zweispaltig -- */
.offer.fig2 figure {                       width: 100%; }

} @media only screen and (min-width: 768px ) {
.offer {         flex-wrap: wrap;}
.offer figure {                       width: 48%; }
.offer figure:nth-child(3n - 3) {     width: 100%; }

} @media only screen and (min-width: 1260px ) {
.offer figure {                       width: 32%; }
.offer figure:nth-child(3n - 3) {     width: 32%; }
/*-- c-mire -- */
.c-mire:nth-child(1) .offer figure {  width: 48%; }
/*-- zweispaltig -- */
.offer.fig2 figure {                       width: 48%; }
} @media only screen and (min-width: 1920px ) {
/*-- c-mire -- */
.c-mire:nth-child(1) .offer figure {  width: 32%; }

}






/*-- BildButton
_________________________ startadvise [© 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; 
                             overflow:hidden; 
                             margin-block-start:0; margin-block-end:0; margin: 1%; }

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

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


.bibu figure figurecaption { position: absolute;
                             width:100%; margin:0; padding: var(--a5);
                             left:0; bottom: 0; 
                             color: var(--m82); background: var(--m255); border:0;
                             font-size:1.2rem; font-weight:bold; text-align:center; }

.bibu figure figurecaption:hover { /*color: var(--ci02);*/ cursor: pointer; }

.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 -- */
.zoom {       margin: 0 auto; padding: 0; transition: transform .2s; }
.zoom:hover {                             transform: scale(1.05); } 

main .zoom a:link, main .zoom a:visited {                     border: 0; }
main .zoom a:hover, main .zoom a:focus, main .zoom a:active { border: 0; }


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


@media only screen and (max-width: 599px ) {
div.bibu figure {                width: 100%; height: 190px; }

} @media only screen and (min-width: 600px ) {
div.bibu figure {                width: 48%; }

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

} @media only screen and (min-width: 1260px ) {
div.bibu figure {                width: 31%; }

}






/*-- TextButton
_________________________ startadvise [© by elf42] -- */

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

/* .zoom von bibu uebernommen */

div.txbu figure {    display: flex; justify-content : center; align-items : center; 
                     margin-bottom: var(--ab); border-radius: var(--abora); }

div.txbu figure a {  padding: var(--a80) var(--ab); color: var(--m255); text-align:center; font-weight: 500; text-decoration:none; }

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

@media only screen and (max-width: 599px) { /* MAX ! */
div.txbu figure {    width: 100%; margin-bottom: var(--am); }
div.txbu figure a {               padding: var(--a20) var(--am); }

div.txbu figure:nth-child(odd) {     background: var(--ci02); }
div.txbu figure:nth-child(even) {    background: var(--ci03); }
div.txbu figure:nth-child(3n - 3) {  background: var(--ci01); }

} @media only screen and (min-width: 600px ) {
div.txbu figure {             width: 48%; }
div.txbu figure:last-child {  width: 98%; }

div.txbu figure:nth-child(1), 
div.txbu figure:nth-child(4), 
div.txbu figure:nth-child(5), 
div.txbu figure:nth-child(9) {  background: var(--ci02); }

div.txbu figure:nth-child(2), 
div.txbu figure:nth-child(6), 
div.txbu figure:nth-child(7) {  background: var(--ci03); }

div.txbu figure:nth-child(3), 
div.txbu figure:nth-child(8) {  background: var(--ci01); }

} @media only screen and (min-width: 980px ) {
div.txbu figure, 
div.txbu figure:last-child {    width: 30%; }

div.txbu figure:nth-child(1), 
div.txbu figure:nth-child(5), 
div.txbu figure:nth-child(9) {  background: var(--ci02); }

div.txbu figure:nth-child(2), 
div.txbu figure:nth-child(6), 
div.txbu figure:nth-child(7) {  background: var(--ci03); }

div.txbu figure:nth-child(3), 
div.txbu figure:nth-child(4), 
div.txbu figure:nth-child(8) {  background: var(--ci01); }

}







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


/* biga - uebersicht ist c-offer */
/* biga - vor/zurueck */
figure.biga {            display: flex; flex-wrap: nowrap; 
                         justify-content : space-between; align-items : flex-start; 
              margin:0; padding:0; width: 100%;
                         position: relative; display: inline-block;
                         margin-block-start:0; margin-block-end:0; }


figure.biga a.biga-li {         left:0; }
figure.biga a.biga-re {         right:0; text-align:right; }
figure.biga a.biga-li::before { content: "\f104"; }
figure.biga a.biga-re::after {  content: "\f105"; }

figure.biga a {       position: absolute; z-index:3; width: 47%; margin:0; 
                           font-size: 6em; font-family: 'FontAwesome'; font-weight:bold; text-decoration:none; 
                           color: rgba(var(--m255t),0.5); border: var(--no); }
figure.biga a:hover { color: rgba(var(--m255t),1); border: var(--no); }


  @media only screen and (max-width: 425px ) { 
figure.biga a {           height: 78%; padding: 17% 0.5em; font-size: 3.5rem; }
} @media only screen and (min-width: 426px ) {
figure.biga a {           height: 87%; padding: 20% 0.5em; font-size: 4.5rem; }
} @media only screen and (min-width: 600px ) {
figure.biga a {                        padding: 20% 0.5em; }
} @media only screen and (min-width: 980px ) {
figure.biga a {           height: 89%; padding: 23% 0.5em; font-size: 6rem; }

} 

figure.biga figcaption { line-height: 1.2em; font-size: 0.9rem; text-align: center; }

span#biga { display:block; }


/* biga - kl */

div.biga-kl {          display: flex; justify-content : space-between; align-items : flex-start; flex-wrap: wrap; 
                       margin-bottom: var(--a30); }

div.biga-kl figure {   position: relative; margin-bottom: var(--a10); padding:0; }
div.biga-kl figure a { position: absolute; z-index:3; width: 100%; height: 98%; margin:0; padding:0; 
                    background: var(--tr); border-bottom: 10px solid var(--tr); }
div.biga-kl figure a:hover, div.biga-kl figure a:focus, div.biga-kl figure a:active
                  { background: var(--tr); border-bottom: 10px solid var(--m255); }

body[id$="001"] a[href$="001.htm#biga"], body[id$="002"] a[href$="002.htm#biga"], body[id$="003"] a[href$="003.htm#biga"], body[id$="004"] a[href$="004.htm#biga"], 
body[id$="005"] a[href$="005.htm#biga"], body[id$="006"] a[href$="006.htm#biga"], body[id$="007"] a[href$="007.htm#biga"], body[id$="008"] a[href$="008.htm#biga"], 
body[id$="009"] a[href$="009.htm#biga"], body[id$="010"] a[href$="010.htm#biga"], body[id$="011"] a[href$="011.htm#biga"], body[id$="012"] a[href$="012.htm#biga"] 
                  { background: rgba(var(--m255t),0.7); border-bottom: 10px solid var(--m255); }

@media only screen and (max-width: 599px) {
div.biga-kl figure {    width: 31%; }
} @media only screen and (min-width: 600px) {
div.biga-kl figure {    width: 16%; }
} @media only screen and (min-width: 768px) {
} @media only screen and (min-width: 980px) {
div.biga-kl figure {    width: 16%; }
div.biga-kl {    padding: var(--ab) 0 0 0; }
}