/*-- 
Name:          TME-Anders, Aerzen
Url:           https://kl-architekten.de
Description:   TME-Anders, Aerzen
Version:       1.0 (Responsive)


/*-- buttons -
_________________________ HTML > CSS;  */

main ol.buttons {           padding: 30px 0; margin: 0; width: 100%; }

main ol.buttons li {        padding: 0; margin:8px 0; list-style: none; position: relative; left: -0.5em; 
                            font-weight:400; font-size: 0.9em; color: rgb(82,82,82); 
                            background:rgb(255,255,255); border-bottom: 1px solid rgb(240,240,240); }

div.buttons {               margin:5px 30px 5px 0; padding:0; width: 300px; 
                            text-align: left; display: inline-block; }

pre.buttons {               margin:0 20px 0 30px; padding:0; width: 95%; display:block; 
                            text-align: right; font-size: 0.9rem; display:inline-block; }


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

main ol.farbe {             padding: 30px 0; margin: 0; width: auto; }

main ol.farbe li {          padding: 0; margin:8px 0; list-style: none; position: relative; left: -0.5em; 
                            font-weight:400; font-size: 0.9em;  }

main div.farbe {            margin:5px 20px; padding:20px; width: 150px; 
                            text-align: center; display:inline-block; }


<!--  -->
.mc01 { background: rgba(var(--mc0),0.9);   color: rgb(var(--mc255)); }
.mc02 { background: rgba(var(--mc82),0.9);  color: rgb(var(--mc255)); }
.mc03 { background: rgba(var(--mc112),0.9); color: rgb(var(--mc255)); }
.mc04 { background: rgba(var(--mc128),0.9); color: rgb(var(--mc255)); }
.mc05 { background: rgba(var(--mc142),0.9); color: rgb(var(--mc255)); }
.mc06 { background: rgba(var(--mc182),0.9); }
.mc07 { background: rgba(var(--mc200),0.9); }
.mc08 { background: rgba(var(--mc222),0.9); }
.mc09 { background: rgba(var(--mc242),0.9); }
.mc10 { background: rgba(var(--mc255),0.9); }
<!-- background -->
.bg01 { background: var(--bg01); }
.bg02 { background: var(--bg02); }
.bg03 { background: var(--bg03); }
.bg04 { background: var(--bg04); }
.bg05 { background: var(--bg05); }
.bg06 { background: var(--bg06); }
<!-- burger menue -->
.bm01 { background: var(--bm01); }
.bm02 { background: var(--bm02); }
.bm03 { background: var(--bm03); }
.bm04 { background: var(--bm04); }
.bm05 { background: var(--bm05); }
.bm06 { background: var(--bm06); }
<!-- nav -->
.nav01 { background: var(--nav01); }
.nav02 { background: var(--nav02); }
.nav03 { background: var(--nav03); }
.nav04 { background: var(--nav04); }
.nav05 { background: var(--nav05); }
.nav06 { background: var(--nav06); }
.nav07 { background: var(--nav07); }
.nav08 { background: var(--nav08); }
.nav09 { background: var(--nav09); }
.nav10 { background: var(--nav10); }
.nav11 { background: var(--nav11); }
.nav12 { background: var(--nav12); }
.nav13 { background: var(--nav13); }
<!-- navsub -->
.nsub01 { background: var(--nsub01); }
.nsub02 { background: var(--nsub02); }
.nsub03 { background: var(--nsub03); }
.nsub04 { background: var(--nsub04); }
.nsub05 { background: var(--nsub05); }
.nsub06 { background: var(--nsub06); }
.nsub07 { background: var(--nsub07); }
.nsub08 { background: var(--nsub08); }
<!-- navsub mobil -->
.mob01 { background: var(--mob01); }
.mob02 { background: var(--mob02); }
.mob03 { background: var(--mob03); }
.mob04 { background: var(--mob04); }
.mob05 { background: var(--mob05); }
.mob06 { background: var(--mob06); }
.mob07 { background: var(--mob07); }
.mob08 { background: var(--mob08); }
.mob09 { background: var(--mob09); }
.mob10 { background: var(--mob10); }
.mob11 { background: var(--mob11); }
.mob12 { background: var(--mob12); }
.mob13 { background: var(--mob13); }
.mob14 { background: var(--mob14); }
.mob15 { background: var(--mob15); }
.mob16 { background: var(--mob16); }
.mob17 { background: var(--mob17); }
.mob18 { background: var(--mob18); }
.mob19 { background: var(--mob19); }
<!-- you are here -->
.yah01 { background: var(--yah01); }
.yah02 { background: var(--yah02); }
.yah03 { background: var(--yah03); }
.yah04 { background: var(--yah04); }
.yah05 { background: var(--yah05); }
.yah06 { background: var(--yah06); }
.yah07 { background: var(--yah07); }
.yah08 { background: var(--yah08); }
.yah09 { background: var(--yah09); }
.yah10 { background: var(--yah10); }
<!-- breadcrumb + bc -->
.bc01 { background: var(--bc01); }
.bc02 { background: var(--bc02); }
.bc03 { background: var(--bc03); }
.bc04 { background: var(--bc04); }
.bc05 { background: var(--bc05); }
.bc06 { background: var(--bc06); }
.bc07 { background: var(--bc07); }
.bc08 { background: var(--bc08); }
.bc09 { background: var(--bc09); }
.bc10 { background: var(--bc10); }
.bc11 { background: var(--bc11); }
.bc12 { background: var(--bc12); }
<!-- nav-2 -->
.nav2-01 { background: var(--nav2-01); }
.nav2-02 { background: var(--nav2-02); }
.nav2-03 { background: var(--nav2-03); }
.nav2-04 { background: var(--nav2-04); }
.nav2-05 { background: var(--nav2-05); }
.nav2-06 { background: var(--nav2-06); }
<!-- content -->
.cont01 { background: var(--cont01); }
.cont02 { background: var(--cont02); }
.cont03 { background: var(--cont03); }
.cont04 { background: var(--cont04); }
.cont05 { background: var(--cont05); }
<!-- inhalt -->
.in01 { background: var(--in01); }
.in02 { background: var(--in02); }
.in03 { background: var(--in03); }
.in04 { background: var(--in04); }
.in05 { background: var(--in05); }
.in06 { background: var(--in06); }
.in07 { background: var(--in07); }
.in08 { background: var(--in08); }
.in09 { background: var(--in09); }
.in10 { background: var(--in10); }
.in11 { background: var(--in11); }
.in12 { background: var(--in12); }
.in13 { background: var(--in13); }
.in14 { background: var(--in14); }
.in15 { background: var(--in15); }
.in16 { background: var(--in16); }
.in17 { background: var(--in17); }
.in18 { background: var(--in18); }
<!-- inhalt button -->
.btn01 { background: var(--btn01); }
.btn02 { background: var(--btn02); }
.btn03 { background: var(--btn03); }
.btn04 { background: var(--btn04); }
.btn05 { background: var(--btn05); }
.btn06 { background: var(--btn06); }
.btn07 { background: var(--btn07); }
<!-- inhalt listen -->
.ul-01 { background: var(--ul-01); }
.ul-02 { background: var(--ul-02); }
.ul-03 { background: var(--ul-03); }
.ul-04 { background: var(--ul-04); }
.ul-05 { background: var(--ul-05); }
.ul-06 { background: var(--ul-06); }
<!-- inhalt sitemap -->
.ulsm-01 { background: var(--ulsm-01); }
.ulsm-02 { background: var(--ulsm-02); }
.ulsm-03 { background: var(--ulsm-03); }
.ulsm-04 { background: var(--ulsm-04); }
.ulsm-05 { background: var(--ulsm-05); }
.ulsm-06 { background: var(--ulsm-06); }
.ulsm-07 { background: var(--ulsm-07); }
<!-- inhalt adresse -->
.addi01 { background: var(--addi01); }
.addi02 { background: var(--addi02); }
<!-- footer -->
.f01 { background: var(--f01); }
<!-- footer abschluss -->
.abs01 { background: var(--abs01); }
.abs02 { background: var(--abs02); }
.abs03 { background: var(--abs03); }
.abs04 { background: var(--abs04); }
.abs05 { background: var(--abs05); }
<!-- footer hoch -->
.up01 { background: var(--up01); }
.up02 { background: var(--up02); }
.up03 { background: var(--up03); }
.up04 { background: var(--up04); }
<!-- referenzen komplett - ref -->
.ref01 { background: var(--ref01); }
.ref02 { background: var(--ref02); }
.ref03 { background: var(--ref03); }
.ref04 { background: var(--ref04); }
.ref05 { background: var(--ref05); }
.ref06 { background: var(--ref06); }
.ref07 { background: var(--ref07); }
.ref08 { background: var(--ref08); }
.ref09 { background: var(--ref09); }
.ref10 { background: var(--ref10); }
<!-- bildergalerie komplett - biga -->
.biga01 { background: var(--biga01); }
.biga02 { background: var(--biga02); }
.biga03 { background: var(--biga03); }
.biga04 { background: var(--biga04); }
.biga05 { background: var(--biga05); }
.biga06 { background: var(--biga06); }
.biga07 { background: var(--biga07); }
.biga08 { background: var(--biga08); }
.biga09 { background: var(--biga09); }
.biga10 { background: var(--biga10); }
.biga11 { background: var(--biga11); }
<!-- basics -->
.ci01 { background-color: var(--ci01); }
.ci02 { background-color: var(--ci02); }
.ci03 { background-color: var(--ci03); }
.ci04 { background-color: var(--ci04); }
.ci05 { background-color: var(--ci05); }
.ci06 { background-color: var(--ci06); }
.ci07 { background-color: var(--ci07); }
.ci08 { background-color: var(--ci08); }
.ci09 { background-color: var(--ci09); }
.ci10 { background-color: var(--ci10); }
<!-- elf42 -->
.e01 { background: var(--e01); }
.e02 { background: var(--e02); }
.e03 { background: var(--e03); }













/*-- xxxxxxxxxxxxxxxxxxxxxxxxx
_________________________ HTML > CSS;  */


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

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

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

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

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

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

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



/*-- der plan -
_______________________________________________________________________________ */


#contact {      } /* adresse sticky */

#kopf {         } /* header */
#logo {         } /*  */
#menue {        } /* menue toggle */
#nav {          } /* firstmenue */

#kopf-2 {       } /* header bild/slider */
#breadcrumb {   } /* breadcrumb oben */

.c-mi   {       } /* main */
.c-full {       } /* main, ganze breite */
.c-flow {       } /* main, spalten */
.box    {       } /* inhalt */
.row    {       } /* inhalt */
.flex   {       } /* inhalt */

#bc {           } /* breadcrumb unten */
#nav-2 {        } /* 2. menue am ende vom main */

#abschluss {    } /* footer */
#elf42 {        } /* intern */