/* CSS Document */

::root{
--bg-body: #f0f1f8;
--font-color: #000;
--bg-icon: #fff;
--icon-hover: #ffd43b;
/* === colors === */
--dark: #000000;
--middle: #a7a7a7;
--light: #f2f2f2;
--darkblue: #000099;
/* Farben für Beispiele */
--language-html: #8b1aa1;
--cs: #02b19e;
--cs-1: #da9423;
--elem: #2222bb;
}

body{background-color:  #f0f1f8}/*#FFF8E7*/

@media (min-width: 1402px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 75%;
  }
}



/* ====================================== */
.lizenz-style-col{display: block;}

.lizenz{
color: #000;
background-color: #fff;
padding-top: 3px;
padding-bottom: 5px;
border: none;
border-radius: 50px;
margin-top: 7px;
margin-bottom: 7px;
}

.lizenz:hover{
color: #000;
background-color: #fff;
cursor: default;
}

.style{
color: #000;
background-color: rgba(255,255,255,1.0);
padding-top: 3px;
padding-bottom: 5px;
border: none;
border-radius: 50px;
cursor: pointer;
}
.style::after{
font: var(--fa-font-regular);
content: "\f058";
margin-left: .75rem;
}
.style:hover{
color: #fff;
background-color: rgba(0,0,140,0.75);
cursor: pointer;
}

.style-visit{
color: #fff;
background-color: rgba(0,0,140,0.75);
padding-top: 3px;
padding-bottom: 5px;
border: none;
border-radius: 50px;
margin-top: 7px;
margin-bottom: 7px;
}

.style-visit::after{
font: var(--fa-font-regular);
content: "\f058";
margin-left: .75rem;
}

.style-visit:hover{
color: #fff;
background-color: rgba(0,0,140,0.75);
}

.style-visit a{
color: #fff;
text-decoration: none;
}

.kat{
color: #000;
background-color: rgba(255,255,255,1.0);
padding-top: 3px;
padding-bottom: 5px;
border: none;
border-radius: 50px;
margin-top: 7px;
margin-bottom: 7px;
}

.kat .icon::before{
font: var(--fa-font-regular);
content: "\f058";
}

.kat:hover{
color: #fff;
background-color: rgba(211,0,3,0.75);
cursor: pointer;
}

.kat:hover .icon::before{
font: var(--fa-font-regular);
content: "\f057";
}

.kat-visit{
color: #fff;
background-color: rgba(0,0,140,0.75);
padding-top: 3px;
padding-bottom: 5px;
border: none;
border-radius: 50px;
}

.kat-visit .icon::before{
font: var(--fa-font-regular);
content: "\f058";
}

.kat-visit:hover{
color: #fff;
background-color: rgba(211,0,3,0.75);
cursor: pointer;
}

.kat-visit:hover .icon::before{
font: var(--fa-font-regular);
content: "\f057";
}

/* Kategorien Übersichtsseite =========== */

.kat-col .kat-link{
color: #000;
border-radius: 11px;
float: left;
width: 100%;
padding: 0;
background-color: #fff;
text-decoration: none;
}

.kat-link:hover .kat-icon{
border-top:solid 3px #0090ff;
border-left:solid 3px #0090ff;
border-right:solid 3px #0090ff;
color: #ffaa33;
}
.kat-link:hover .kat-name{
border-left: solid 3px #0090ff;
border-right: solid 3px #0090ff;
border-bottom: solid 7px #0090cf;
}
.kat-icon{
background-color: #181858;
color: #fff;
border-radius: 12px 12px 0 0;
border-top:solid 3px #f0f1f8;
border-left:solid 3px #f0f1f8;
border-right:solid 3px #f0f1f8;
}
.kat-name{
border-radius: 0 0 12px 12px;
border-left: solid 3px #f0f1f8;
border-right: solid 3px #f0f1f8;
border-bottom: solid 7px #cfcfcf;
}

@media (min-width: 400px){
.kat-col{flex: 0 0 auto;
width: 47.33333333%;}
}

@media (min-width: 576px){
.kat-col{flex: 0 0 auto;
width: 47.33333333%;}
}

@media (min-width: 768px){
.kat-col{flex: 0 0 auto;
width: 47.33333333%;}
}

@media (min-width: 992px){
.kat-col{flex: 0 0 auto;
width: 25%;}
}

@media (min-width: 1200px){
.kat-col{flex: 0 0 auto;
width: 16.66666667%;}
}

@media (min-width: 1400px){
.kat-col{flex: 0 0 auto;
width: 16.66666667%;}
}
/* ====================================== */

.icon-card{
flex: 0 0 auto;
width: 100%;
background-color: #fff;
padding: 0;
margin-bottom: 11px;
border-radius: 11px;
margin-right: 1.00000000%
}

@media (min-width: 400px){
.icon-card{
flex: 0 0 auto;
width: 47.33333333%;
}
.lizenz-style-col{
display: none;
}
}

@media (min-width: 576px){
.icon-card{
flex: 0 0 auto;
width: 31.33333333%;
}
.lizenz-style-col{
display: none;
}
}

@media (min-width: 768px){
.icon-card{
flex: 0 0 auto;
width: 18.33333333%;
}
.lizenz-style-col{
display: none;
}
}

@media (min-width: 992px){
.icon-card{
flex: 0 0 auto;
width: 18.33333333%;
}
.lizenz-style-col{
display: block;
}
}

@media (min-width: 1200px){
.icon-card{
flex: 0 0 auto;
width: 15.33333333%;
}
.lizenz-style-col{
display: block;
}
}

@media (min-width: 1400px){
.icon-card{
flex: 0 0 auto;
width: 10.11111111%!important;
margin-right: 1.00000000%
}
.lizenz-style-col{
display: block;
}
}

.icon-card .icon-link{
padding: 24px 0 12px;
width: 100%;
float: left;
margin: 0;
color: #000;
text-decoration: none;
cursor: pointer;
}

.icon-card:hover{
background-color: #ffd43b;
}

.icon-card .icon-link .fas{font-size: 2.25rem;}
.icon-card .icon-link .far{font-size: 2.25rem;}

.icon-card .icon-name{
margin-top: 12px;
padding: 3px 5px 5px;
font-size: 12px;
}
/* ============================================== */

.icon::before {
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}

.stilemenu .kat-item {
font-size: 16px;
color: #555555;
}

.submenu .navbar .nav{
width: 100%;
}

.stilemenu .nav-item .nav-link{
text-decoration: none;
color: #000000;
padding: 0.25rem;
}

.stilemenu .nav-item{
border: solid thin #f0f1f8;
border-radius: 11px;
margin-bottom: 0.25rem;
}

.stilemenu .nav-item:hover{
border: solid thin #cccccc;
}

.stilemenu .nav-item .active{
font-weight: 700;
color: #ffffff;
background-color: rgba(0,0,140,1.0);
border-radius: 11px;
}

.stilemenu .kat-item .fa-solid{
font-size: 16px;
color: #555555;
}

.kat-solid::before{
font: var(--fa-font-solid);
content: "\f111"; /* -- circle -- */
margin-right: 0.5rem;
color: #555555;
}

.kat-regular::before{
font: var(--fa-font-regular);
content: "\f042";/* -- circle-half-stroke -- */
margin-right: 0.5rem;
color: #555555;
}

.kat-link-show::before{
font: var(--fa-font-solid);
content: "\f14a";
margin-right: 0.5rem;
color: #ffffff;
}

.kat-item:hover .kat-link-pr1::before{
font: var(--fa-font-regular);
content: "\f0c8";
padding-right: 3px;
}
.kat-item:hover .kat-link-p1::before{
font: var(--fa-font-regular);
content: "\f0c8";
padding: 1px;
}

.kat-item:hover .kat-link::before{
font: var(--fa-font-regular);
content: "\f0c8";
}

/* ========================================================= */
/* Border ==================================================
 Border #cfcfcf ============================================ */
.border{border:solid thin #cfcfcf!important;}
.border-top{border-top:solid thin #cfcfcf!important;}
.border-bottom{border-bottom:solid thin #cfcfcf!important;}
.border-start{border-left:solid thin #cfcfcf!important;}
.border-end{border-right:solid thin #cfcfcf!important;}
.border-1{border:solid 1px #cfcfcf!important;}
.border-1-top{border-top:solid 1px #cfcfcf!important;}
.border-1-bottom{border-bottom:solid 1px #cfcfcf!important;}
.border-1-start{border-left:solid 1px #cfcfcf!important;}
.border-1-end{border-right:solid 1px #cfcfcf!important;}
.border-2{border:solid 2px #cfcfcf!important;}
.border-2-top{border-top:solid 2px #cfcfcf!important;}
.border-2-bottom{border-bottom:solid 2px #cfcfcf!important;}
.border-2-start{border-left:solid 2px #cfcfcf!important;}
.border-2-end{border-right:solid 2px #cfcfcf!important;}
.border-3{border:solid 3px #cfcfcf!important;}
.border-3-top{border-top:solid 3px #cfcfcf!important;}
.border-3-bottom{border-bottom:solid 3px #cfcfcf!important;}
.border-3-start{border-left:solid 3px #cfcfcf!important;}
.border-3-end{border-right:solid 3px #cfcfcf!important;}
.border-4{border:solid 4px #cfcfcf!important;}
.border-4-top{border-top:solid 4px #cfcfcf!important;}
.border-4-bottom{border-bottom:solid 4px #cfcfcf!important;}
.border-4-start{border-left:solid 4px #cfcfcf!important;}
.border-4-end{border-right:solid 4px #cfcfcf!important;}
.border-5{border:solid 5px #cfcfcf!important;}
.border-5-top{border-top:solid 5px #cfcfcf!important;}
.border-5-bottom{border-bottom:solid 5px #cfcfcf!important;}
.border-5-start{border-left:solid 5px #cfcfcf!important;}
.border-5-end{border-right:solid 5px #cfcfcf!important;}
/* Ende Border =============================================== */
/* ########################################################### */
.cleaner-1{
margin-top: 1rem;
margin-bottom: 1rem;}

.cleaner-2{
margin-top: 2rem;
margin-bottom: 2rem;}

.cleaner-3{
margin-top: 3rem;
margin-bottom: 3rem;}

.cleaner-4{
margin-top: 4rem;
margin-bottom: 4rem;}

.cleaner-5{
margin-top: 5rem;
margin-bottom: 5rem;}

/* =========================================================== */
/* == CSS Document fuer Navigation mit .navbar-light Klasse == */

.bg-light .navbar-brand {
color: rgba(0,0,0,1.00) !important;
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
margin-right: 3%;
border: solid thin rgba(255,175,0,1.0);
border-radius: 5rem;
background-color: rgba(255,255,255,1.00);
padding: 5px 11px 7px 11px;
}

.bg-light .navbar-brands:hover{background-color: rgba(255,175,0,1.0) !important;}

.bg-light .navbar-nav .nav-item .nav-link.active{font-weight: 600!important;}

.bg-light{background-color: rgba(255,255,255,1.0)!important;}

.brand-icon::before{
font: var(--fa-font-regular);
content: "\f58c";
margin-right: 0.75rem;
}

.hauptnav::before{
cursor: pointer;
font: var(--fa-font-solid);
content: /*"\f141"*/"\f0c9";
}
.submenu::before{
font: var(--fa-font-regular);
content: "\f141";
cursor: pointer;
}
/* == Ende CSS Document fuer Navigation mit .navbar-light Klasse == */
/* ###################################################################### */
/* Icon Seiten Navigation =============================================== */
.pagination .page-lost{
margin-top: -8px;
border-radius: 5px;
}

.pagination .page-lost .page-link{
font-size: 1.25rem!important;
border-radius: 5px;
}
.p-75{
padding-top: .75rem!important;
padding-bottom: .75rem!important;
padding-left: 1rem!important;
padding-right: 1rem!important;
}
/* Ende Icon Seiten Navigation ========================================== */
/* ###################################################################### */
/* Footer */

.footer{max-width: 100%;padding: 1rem!important;}
.footer-dark{background-color: #000!important;color: #ffffff;}

/* ########### Modale ################################################### */
.icon-style{
font-size: 1.25em!important;
font-weight: 600;
padding-top: 10px;
padding-bottom: 10px;
}

.icon-name {
font-size: 2em;
font-weight: 700;
}
.icon-unicode{
font-weight: 600;
padding-top: 10px;
}
.close{
cursor: pointer;
padding-top: 10px;
}

.day{
padding-top: 3rem;
border: solid thin  rgba(20,40,80,1.00);
border-radius: 11px;
}
.night{
display: none;
padding-top: 3rem;
border: solid thin  rgba(20,40,80,1.00);
border-radius: 11px;
background-color: rgba(20,40,80,1.00);
color: white;
}
.to-night,.to-day{
cursor: pointer;
}

.code-html-css-button{
background-color: rgba(20,40,80,1.00);
border: solid thin #cccccc;
border-radius: 11px;
height: 250px;
}

.code{
color: #ffffff;
width: auto;
margin-right: 7px;
font-weight: 500;
}

.code-html-off{
display: none;
cursor: pointer;
}

.code-html-show{
font-weight: 600;
color: aquamarine;
cursor: pointer;
}

.code-css-show{
display: none;
font-weight: 600;
color: aquamarine;
cursor: pointer;
}

.code-css-off{
cursor: pointer;
}

.c-l-h{
color: white;
}
.fs{
color: aquamarine;
}
.ff{
color:rgba(245,229,192,1.00);
}

.code-html,.code-css{
font-weight: 600;
font-size: 21px;
}

.code-html{
padding-top: 2rem;
}

.code-css{
display: none;
}

.modal-kat-nav{
padding-left: 11px;
padding-right: 11px;
padding-bottom: 5px;
border-radius: 11px;
background-color: green;
color: white;
}

.modal-kat-nav:hover{
color: white;
}

.kategorien-nav{
display: none;
}