html, body {
    max-width:100%;
    overflow-x: hidden;
}

body {
    font-family: 'Roboto', sans-serif;    
    margin-right:32px;
    margin-left:32px;
}

span.superscript {
    position: relative; 
    margin-left:0px !important;
    top: -0.5em; 
    font-size: 80%; 
}

p.longText{
    margin-top:10px !important;
}


/*******************************
 *  Content-Head
 ******************************/
div.content {
    position:absolute;
    top:180px;
}

ul.subLinks {
    list-style: none; 
    font-size: 1em;
    padding-left:0;
}
li.subSectionLink:before {
    content: '\00BB';
    padding-right: 8px;
}

li.subSectionLink {
    color: rgb(220,140,16);
    font-weight: 700;
}

li.subSectionLink a {
    text-decoration: none;
    color:inherit;
}

li.subSectionLink  a:after {
    content: ":";
    padding-right: 8px;
    color: rgb(220,140,16);
    font-weight: 700;
}

li.subSectionLink  div {
    display:inline;
    font-weight: 300;
    color: Black;
}

code  {
    font-size:120%;
    font-weight: lighter !important;
}


ol.dsgvoList > li {
    margin-left:32px !important;
}

/*******************************
 *  Content-Tabelle
 ******************************/

div.contentTable {
    display:table;
    font-size: 1em;
    position:relative;
    margin-top:20px;
    margin-right:32px;
    border-spacing: 0 40px; /* NOTE: syntax is <horizontal value> <vertical value> */
}

div.contentTr {
    display:table-row;
}


div.contentTd {
    display:table-cell;
    border: 0;
    vertical-align:top;  
}

div.contentTd:nth-child(n+2) {
        display: block;
}


div.contentIcon img {
    margin-top:10px;    /* 50 */
    width:200px;       /* 100 */
    border-radius: 15px;
    background-color:rgb(240,240,240);
}


div.contentDescription * {
    color: Black;
    font-weight:300;
    margin:0;
    padding:0;
}

div.contentDescription p, div.contentDescription ul, div.contentDescription img.contentSubIcon {
    margin-left:10px;    
}

div.contentDescription {
    padding:10px 0px 10px 10px;
}


div.contentCaption {
    color:rgb(0,48,95);
    font-size: 1.2em;   /* 2.0 */
    font-weight:700;
    margin-top:0px; /* 75 */
    margin-bottom:-10px; /* 50 */
    border-bottom: 2px solid rgb(220,140,16);
}

div.contentSubCaption {
    color: Black;
    font-size: 1.1em;   /* 1.3 */
    font-weight:700;
    margin-left:30px;
    text-indent:-19px;
    margin-top:10px;    /* 30 */
}

div.contentTable.accordion div.contentTr div.contentTd div.contentSubCaption {
    cursor: pointer;
}

div.contentTable.accordion div.contentTr div.contentTd div.contentSubCaption:before {
    padding-left: 1em;
    text-indent:-1em;
    content:'\25B6\FE0E';    /* 25BA */
    font-size:75%;
    display: inline-block;
    transition: .3s ease-in-out;
    margin-right:5px;
}

div.activeAccordion:before {
    padding-left: 1em;
    text-indent:-1em;
    content:'\25B6\FE0E';
    font-size:75%;
    display: inline-block;
    transform: rotate(90deg);
    transition: .3s ease-in-out;
    margin-right:5px; 
}


p.sub2Caption {
    color:rgb(220,140,16);
    font-weight:700;
    margin-top:1em;
    margin-left:10px;    
}

p.contentInfo {
   font-style:italic; 
}

div.contentDescription ul *{
    list-style: none;
}

div.contentDescription ul li ul li{
    font-family: 'Roboto Condensed', sans-serif;    
}

span#dsgvo::before { 
  display: block; 
  content: " "; 
  margin-top: -60px; 
  height: 60px; 
  visibility: hidden; 
  pointer-events: none;
}

span.email {
    letter-spacing:-4px;
     position: relative;
     white-space:nowrap;
}

/*******************************
 *  Icon-Tabelle
 ******************************/
 
div.iconFlex {
    display: flex;
    flex-flow:row wrap;
    align-items:stretch;
    justify-content:space-between;
}


div.iconFlexCell {
    display:flex;
    max-width:150px;
    margin: 5px;
    padding: 15px;
    border:2px solid rgb(220,140,16);
    /*
    box-shadow: 5px 5px 10px rgb(220,140,16);
    */
    border-radius:15px;
}


div.iconFlexCell picture {
    align-self:center;
}

div.iconFlexCell img {
    align-self:center;
    width: 100%;
    height: auto;
    margin: auto;  
}



/*******************************
 *  Kontakt
 ******************************/
#contactForm .contact td,
#contactForm .contact th {
  border-bottom: thin dotted #606060;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  vertical-align:top;
}
#contactForm .contact tr {
  max-width: 200px;
  padding-right:10px;
}
#contactForm .contact th {
  max-width: 150px;
  text-align:right;
}

#contactForm input, #contactForm textarea {
  border: thin solid Gray;
  width: 195px;
  padding-top: 3px;
  padding-bottom: 3px;
}

#contactForm textarea {
  height:150px;
}

#contactForm #button,
#contactForm .button  {
   width: 70px;
}

#contactForm .CFerror,  #contactForm .CFtooltip  {
   color: Red;
}

#contactForm .fieldErr{ background-color: LightPink;  }

#contactForm .CFtitle p {
    border: 2px solid Green;
    background-color: LightGreen;
    margin: 10px;
    padding: 10px;
    border-radius:5px;
}


/*******************************
 *  Anti-Spam
 ******************************/
span.addat:before {
    content:"\ff20";
} 

span.adddot:before {
    content:".";
} 

/*******************************
 *  Kleine Bildschirme
 ******************************/

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

    body {
        font-size: 80%;
        margin-right:8px;
        margin-left:8px;
    }
    
    li.subSectionLink div:before {
        content: ' ';
        display:block;
    }
    li.subSectionLink div {
        content: ' ';
        display:block;
        clear: both;
        padding-left: 16px;
    }
    
    div.contentTable {
        margin-right:8px;
    }
    div.contentCaption {
        margin-top: 20px;
        margin-bottom: -10px;
    }

    /* Force table to not be like tables anymore */
    div.contentTable, div.contentTr,  div.contentTd {
        display: block;
        /* border: 1px solid green; */
    }

    div.contentIcon {
        position: relative;
        text-align:left;
        flex:2;
    }
    
    div.contentIcon img {
        width:150px;   /* 50 */
        margin:0 0 0 0;
        border: 0;
    }

    div.contentSection {
        border-top: 1px solid Black;
        padding-top:40px;
        margin-top:40px;
    }
    
    div.iconFlexCell {
        max-width:100px;
    }
}