/*
Option ICON SIZE:
 .text-icon-small
 .text-icon-medium
 .text-icon-large
 - wird zusätzlich dem div mit der klasse .text-box mitgegeben

Option ICON ASIDE:
    .text-box-icon-aside-right
    .text-box-icon-aside-left
 - wird zusätzlich dem div mit der klasse .text-box mitgegeben
 - Keine Verlinkung der gesamten Box möglich
 - ICON SIZE hat keinen Einfluss auf die Icon-größe
 - option ICON ALIGNMENT: .text-box-icon-center wird wie gewohnt dargestellt


Option ICON ALIGNMENT:
 .text-box-icon-left
 .text-box-icon-center
 .text-box-icon-right
  - wird dem child div von .text-box mitgegeben

  .text-box-icon-top
  - wird dem child div von .text-box mitgegeben (steht nur zur Verfügung wenn .text-box keine bgcolor-x hat)


Option FULL BG COLOR
 .bgcolor-x (1-8)
 - wird zusätzlich dem div mit der klasse .text-box mitgegeben

 .full-bg:
 - Helfer-Klasse.
 - Differenzirung zwischen CONTENT BG COLOR und FULL BG COLOR, zur Positionierung von .text-icon
 - wird in das child von .text-box geschrieben, wenn .text-box zusätzlich die Klasse .bgcolor-x hat.

.bgcolor-padding:
 - wird der klasse .text-box-content mitgegeben, wenn .text-box zusätzlich die Klasse .bgcolor-x hat.


Option CONTENT BG COLOR:
 .bgcolor-x (1-8)
 - wird zusätzlich dem div mit der klasse .text-box-content mitgegeben

.bgcolor-padding:
 - wird der klasse .text-box-content mitgegeben, wenn .text-box-content zusätzlich die Klasse .bgcolor-x hat.


Option LINK
 - <a> wird nach .text-box angehängt und beinhaltet alle child-Elemente


Option ADDITIONAL PADDING
 - wird dem child von .text-box-content mitgegeben

 */

.same-col-height > div > div{
    height: 100%;
}

.text-box{
    float: left;
    width: 100%;
    box-sizing: border-box;
}

.text-box a .text-box-content{
    background-position: bottom right;
    background-repeat: no-repeat;
}

.text-box-icon-left{
    text-align: left;
    margin: 0 0 0 0;
}

.text-box-icon-center{
    text-align: center;
}

.text-box-icon-right{
    text-align: right;
    margin: 0 0 0 0;
}

.text-icon-small .text-box-icon-top .text-icon,
.text-icon-medium .text-box-icon-top .text-icon,
.text-icon-large .text-box-icon-top .text-icon{
    margin-top: 0;
    top: 0;
}

.text-icon-small .text-icon{
    position: relative;
    top: 30px;
    width: 60px;
    height: 60px;
}

.text-icon-medium .text-icon{
    position: relative;
    margin-top: -40px;
    top: 50px;
    width: 100px;
    height: 100px;
}

.text-icon-large .text-icon{
    position: relative;
    margin-top: -80px;
    top: 70px;
    width: 140px;
    height: 140px;
}

.text-icon-medium  div.full-bg{
    margin-top: 10px;
}

.text-icon-large  div.full-bg{
    margin-top: 30px;
}
.text-box-content{
    width: 100%;
    box-sizing: border-box;
    float: left;
}

.text-icon-small .text-box-content{
    padding: 40px 0 0 0;
}

.text-icon-medium .text-box-content{
    padding: 60px 0 0 0;
}

.text-icon-large .text-box-content{
    padding: 80px 0 0 0;
}

.bgcolor-padding .box-content{
    padding:20px;
}


/* ---- Icon aside ----- */

.text-box-icon-aside-left,
.text-box-icon-aside-right{
    display: grid;
    grid-template-areas: 'top top' 'left right';
}

.text-box-icon-aside-left{
    grid-template-columns: 16% 1fr;
}

.text-box-icon-aside-right{
    grid-template-columns: 1fr 16%;
}

/* lage icon */
.text-box-icon-aside-left.text-icon-large .text-box-icon-left,
.text-box-icon-aside-left.text-icon-medium .text-box-icon-left,
.text-box-icon-aside-left.text-icon-small .text-box-icon-left{
    box-sizing: border-box;
    padding: 0 0 0 20px;
    grid-area: left;
}

.text-box-icon-aside-left.text-icon-large .text-icon,
.text-box-icon-aside-left.text-icon-medium .text-icon,
.text-box-icon-aside-left.text-icon-small .text-icon,
.text-box-icon-aside-right.text-icon-large .text-icon,
.text-box-icon-aside-right.text-icon-medium .text-icon,
.text-box-icon-aside-right.text-icon-small .text-icon{
    width: 100%;
    max-width: 140px;
    height: auto;
    top: 0;
    margin-top: 0;
}

.text-box-icon-aside-left.text-icon-large div.full-bg,
.text-box-icon-aside-left.text-icon-medium div.full-bg,
.text-box-icon-aside-left.text-icon-small div.full-bg,
.text-box-icon-aside-right.text-icon-large div.full-bg,
.text-box-icon-aside-right.text-icon-medium div.full-bg,
.text-box-icon-aside-right.text-icon-small div.full-bg{
    margin-top: 20px;
}

.text-box-icon-aside-left.text-icon-large .text-box-content,
.text-box-icon-aside-left.text-icon-medium .text-box-content,
.text-box-icon-aside-left.text-icon-small .text-box-content{
    display: block;
    padding: 0;
    grid-area: right;
}

/* Icon right */

.text-box-icon-aside-right.text-icon-large .text-box-icon-right,
.text-box-icon-aside-right.text-icon-medium .text-box-icon-right,
.text-box-icon-aside-right.text-icon-small .text-box-icon-right{
    box-sizing: border-box;
    padding: 0 20px 0 0;
    grid-area: right;
}

.text-box-icon-aside-right.text-icon-large .text-box-content,
.text-box-icon-aside-right.text-icon-medium .text-box-content,
.text-box-icon-aside-right.text-icon-small .text-box-content{
    display: block;
    padding: 0;
    grid-area: left;
}


@media screen and (min-width: 0px) and (max-width: 720px) {

    .text-icon-large .text-icon{
        margin-top: -40px;
    }

    .bgcolor-2.text-icon-large .text-icon{
        margin-top: -80px;
    }

    .text-box-icon-aside-left.text-icon-large .text-icon,
    .text-box-icon-aside-left.text-icon-medium .text-icon,
    .text-box-icon-aside-left.text-icon-small .text-icon,
    .text-box-icon-aside-right.text-icon-large .text-icon,
    .text-box-icon-aside-right.text-icon-medium .text-icon,
    .text-box-icon-aside-right.text-icon-small .text-icon{
        margin-top: 0;
    }
}

@media screen and (min-width: 721px) and (max-width: 960px) {

    .col-08 .text-box-icon-aside-left{
        grid-template-columns: 0 1fr;
    }

    .col-08 .text-box-icon-aside-right{
        grid-template-columns: 1fr 0;
    }

    .col-08 .text-box-icon-aside-left.text-icon-large .text-box-icon-left,
    .col-08 .text-box-icon-aside-left.text-icon-medium .text-box-icon-left,
    .col-08 .text-box-icon-aside-left.text-icon-small .text-box-icon-left,
    .col-08 .text-box-icon-aside-right.text-icon-large .text-box-icon-right,
    .col-08 .text-box-icon-aside-right.text-icon-medium .text-box-icon-right,
    .col-08 .text-box-icon-aside-right.text-icon-small .text-box-icon-right{
        grid-area: top;
        margin: auto;
        padding:20px 0 0 0;
    }

    .col-08 .text-box-icon-aside-left.text-icon-large .text-icon,
    .col-08 .text-box-icon-aside-left.text-icon-medium .text-icon,
    .col-08 .text-box-icon-aside-left.text-icon-small .text-icon,
    .col-08 .text-box-icon-aside-right.text-icon-large .text-icon,
    .col-08 .text-box-icon-aside-right.text-icon-medium .text-icon,
    .col-08 .text-box-icon-aside-right.text-icon-small .text-icon {
        width: 100px;
    }


    /*.col-04
    .col-06
    .col-08*/
}