/*
Theme Name: B4Coding
Author: Peter Büttiker
Description: Das ist die offizielle Website B4Coding inklusive Kursangebote!
Version: 1.0
*/



body {
    /*background-color: #0A6DF7;*/
    /*background-color: #F5F5F5;*/
    /*background-color: rgb(var(--bs-body-bg));*/
    background-color: #FAFAFA;
    /*font-family: Xolonium-Regular, sans-serif;*/
    font-family: "Roboto-Regular", sans-serif;
}


/*.pb-color-container {
    background-color: white;
    !*opacity: 80%;*!
}*/

.schrift {
    color: #dd3d36;
}

/* Navigationleiste in der Höhe einstellen */
.navbarhoehe {
    min-height: 90px;
}

/* Navigationsleiste auf 40px Höhe unter einer Breite von 790px! */
@media screen and (max-width: 790px) {
    .navbarhoehe {
        min-height: 40px;
    }
}

/* Links ohne Unterstrich */
.nodecoration {
    text-decoration: none;
}

/* Fonts */
.ueberschrift {
    /*font-family: Chalkboard, sans-serif;*/
    /*font-family: Bonzai, Tahoma, sans-serif;*/
    /*font-family: Tahoma, sans-serif;*/
    font-family: Futura, sans-serif;
    font-size: 5rem;
}

/* Alle Unterstriche bei den Links verschwinden! */
a {
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Abstand zur Navigationsleiste, damit der obere Seiteninhalt nicht verdeckt wird! */
/* Desktop Version */
.abstandnavigation {
    padding-top: 110px;
    /*padding-top: 79px;*/
}

/* Abstand zur Navigationsleiste, damit der obere Seiteninhalt nicht verdeckt wird! */
/* Mobile Version */
@media screen and (max-width: 768px) {
    .abstandnavigation {
        padding-top: 110px;
    }
}

/* Abstand zum Footer, damit der untere Seiteninhalt nicht verdeckt wird! */
/* Desktop Version */
.abstandfooter {
    padding-bottom: 150px;
}

.farbekategorie {
    color: red;
}

/* Footer in der Höhe einstellen */
.footerhoehe {
    min-height: 50px;
}

/* Footer auf 40px Höhe unter einer Breite von 790px! */
@media screen and (max-width: 790px) {
    .footerhoehe {
        min-height: 40px;
    }
}

/* START - Google Fonts importieren, die auf lokal gespeichert sind! */

/*@font-face {
    font-family: 'ReggaeOne';
    src: url("assets/ReggaeOne-Regular.ttf");
}*/

/*.reggae {
    font-family: ReggaeOne, sans-serif;
    color: #0EB1F0;
    font-size: 5rem;
}*/

@font-face {
    font-family: 'Rajdhani-Light';
    src: url("assets/Rajdhani-Light.ttf");
}

.rajdhani-light {
    font-family: Rajdhani-Light, sans-serif;
    color: #0c0c0c;
    font-size: 18.4px;
    font-weight: 400;
}

@font-face {
    font-family: 'Rajdhani-Medium';
    src: url("assets/Rajdhani-Medium.ttf");
}

.rajdhani-medium {
    font-family: Rajdhani-Medium, sans-serif;
    color: #0c0c0c;
    font-size: 18.4px;
    font-weight: 400;
}

@font-face {
    font-family: 'Rajdhani-SemiBold';
    src: url("assets/Rajdhani-SemiBold.ttf");
}

.rajdhani-semibold {
    font-family: Rajdhani-SemiBold, sans-serif;
    color: #0c0c0c;
    /*font-size: 18.4px;*/
    font-weight: 600;
}

@font-face {
    font-family: 'Rajdhani-Bold';
    src: url("assets/Rajdhani-SemiBold.ttf");
}

.rajdhani-bold {
    font-family: Rajdhani-Bold, sans-serif;
    color: #0c0c0c;
    /*font-size: 18.4px;*/
    font-weight: 700;
}

@font-face {
    font-family: 'Bangers-Regular';
    src: url("assets/Bangers-Regular.ttf");
}

.bangers-regular {
    font-family: Bangers-Regular, sans-serif;
    color: #bb2d3b;
    font-size: 40px;
    /*font-size: larger;*/

}

@font-face {
    font-family: AllertaStencil-Regular;
    src: url("assets/AllertaStencil-Regular.ttf");
}

.allertastencil-regular {
    font-family: AllertaStencil-Regular, sans-serif;
    color: #0A6DF7;
    font-size: 45px;
    font-weight: bold;
}

@font-face {
    font-family: Xolonium-Regular;
    src: url("assets/Xolonium-Regular.ttf");
}

.xolonium-regular {
    font-family: Xolonium-Regular, sans-serif;
    color: #0A6DF7;
    font-size: 40px;
}

@font-face {
    font-family: Xolonium-Bold;
    src: url("assets/Xolonium-Bold.ttf");
}

.xolonium-bold {
    font-family: Xolonium-Bold, sans-serif;
    color: #0A6DF7;
    font-size: 50px;
}

@font-face {
    font-family: Tahoma Regular font, sans-serif;
    src: url("assets/Tahoma Regular font.ttf");
}

@font-face {
    font-family: "Lato-Light"; /* Name der Schrift frei wählbar. Jedoch empfohlen den richtigen Schriftnamen zu verwenden. */
    src: url("assets/Lato-Light.ttf") format('truetype'); /* nicht 'ttf', sondern 'truetype' hinschreiben. */
}



@font-face {
    font-family: IBMPlexSans-Light, sans-serif;
    src: url("assets/IBMPlexSans-Light.ttf") format('truetype');
}

@font-face {
    font-family: "Orbitron";
    src: url("assets/Orbitron-VariableFont_wght.ttf") format("truetype");
}

.ibmplexsans-light {
    font-family: IBMPlexSans-Light, sans-serif;
    /*color: #0A6DF7;*/
    /*font-size: 45px;*/
}

.b4-accordion {
    font-family: IBMPlexSans-Light, sans-serif;
    color: #9747ff;
    font-size: 1.7rem;
}

.b4-accordion-2 {
    font-family: "Lato-Light", sans-serif;
    font-size: 1.3rem;
    color: #99ac41;
}

.b4-accordion-3 {
    font-family: "Orbitron", sans-serif;
    color: #007cba;
    /*font-size: 2rem;*/
}

@font-face {
    font-family: "Roboto-Light";
    src: url("assets/Roboto-Light.ttf") format("truetype");
}

.b4-accordion-4 {
    font-family: "Roboto-Light", sans-serif;
    color: #183ad6;
}

@font-face {
    font-font: "Roboto-Regular";
    src: url("assets/Roboto-Regular.ttf") format("truetype");
}

.b4-font-body {
    font-family: "Roboto-Regular", sans-serif;
    font-size: 1rem;
}

/* ENDE - Google Fonts importieren, die auf lokal gespeichert sind! */

.b4-textfont-test {
    font-size: 1rem;
    color: orange;
    /*font-size: 2rem;*/
    /*color: white;*/
}

.b4-farbe {
    color: #00d084;
}

/* Firmenname neben Logo */
.logoname {
    font-family: Xolonium-Bold, sans-serif;
    font-size: 2rem;
    color: #0A6DF7;
    /*color: #0d6efd;*/
    font-weight: 700;
    /*color: #009EFF;*/
    /*color: #000000;*/
}

/* Logotitel ausblenden, wenn Bildschirmgrösse zu klein wird! 830px */
/* Logotitel mit kleinerer Schrift anzeigen, wenn Bildschirmgrösse kleiner wird!  */
@media (max-width: 950px) {
    /* 400px */
    .no-logotitel {
        /*display: none;*/
        font-family: Xolonium-Bold, sans-serif;
        font-size: 1rem;
        color: #0A6DF7;
        font-weight: 700;
    }
}

/* Logotitel ausblenden, wenn Bildschirmgrösse zu klein wird! */
@media (max-width: 835px) {
    /* 990px */
    .no-logotitel {
        display: none;
    }
}


/* START - Contact Form 7 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    /*background-color: #fff;*/
    color: #0c0c0c;
    width: 100%; /* Breite Bildschirm für responsive! */
    /*border-radius: 50px;*/
    /*border-color: red;*/
    /*border-width: 1px;*/
    font-family: Rajdhani-Medium, sans-serif;

}

.wpcf7-not-valid-tip {
    color: #FFFF00;
}

.wpcf7-response-output {
    color: #FFFFFF;
}

.wpcf7-text {
    color: #000000;
    border: 1px solid #000000;
    border-radius: 5px;
}

.wpcf7-textarea {
    color: #000000;
    border: 1px solid #000000;
    border-radius: 5px;
}

.wpcf7 label {
    font-family: Rajdhani-Bold, sans-serif;
    color: #FFFFFF;
}

/* Styling 'submit' button */
.wpcf7-submit {
    border: 3px solid #FFFFFF;
    border-radius: 5px;
    background-color: #FFFFFF;
    color: #0b5ed7;
    font-family: Rajdhani-Medium, sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 8px;
}

/* ENDE - Contact Form 7 */


/* Kreisbild 'About' Seite ausblenden, wenn Bildschirmgrösse zu klein wird! */
@media (max-width: 830px) {
    .no-kreis {
        display: none;
    }

}


/* Front-Page zeigt kein Bild mehr an, wenn eine bestimmte Bildschirmgrösse kommt! */
@media (max-width: 830px) {
    .noimagefront {
        display: none;
    }
}

.schriftimpressum {
    font-size: 0.8em;
}


/* Abstand Bild ganzseitig zur Navigation */
.abstandnavbild {
    padding-top: 70px;
}

/* Boxen / Schatten */
.schatten {
    box-shadow: 10px 20px 15px silver;
    border-radius: 20px;
}

/* Font-Size Überschrift 'Kontakt' */
.titel-kontakt {
    font-size: 72px;
}

@media (max-width: 320px) {
    .titel-kontakt {
        font-size: 43px;
    }
}

/* Background-Farbe für Navigation */
.b4-navigationfarbe {
    /*background-color: #0EB1F0;*/
    /*background-color: #FFFFFF;*/
    background-color: rgba(1, 58, 100, 1);
}

/* Background-Farbe für Footer */
.b4-footerfarbe {
    /*background-color: #FC4A03;*/
    /*background-color: #000000;*/
    background-color: #068199;
    /*background-color: #F2F2F2;*/
}

/* Schriftfarbe Menu von Bootstrap 5 geändert! HEADER-Navigation! */
.navbar-nav a.nav-link {
    /*color: #2a4ce7;*/
    /*color: white;*/
    /*color: #000000;*/
    /*color: #FFFFFF;*/
    /*color: #7700aa;*/
    /*color: #1D438A;*/
    color: #0A6DF7;
}

/* Schriftfarbe Menu Bootstrap 5 geändert! Hover-Farbe! HEADER-Navigation! */
.navbar-nav .nav-link:hover {
    color: #9B30FF;
}

/* Schriftfarbe des aktiven Menupunktes von Bootstrap 5 geändert! HEADER-Navigation */
.navbar-nav .nav-link.active {
    color: #D43800;
    /*color: #FF5900;*/
    /*color: #FF8C00;*/
    /*color: red;*/
}

/* Schriftfarbe des aktiven Menüpunktes von Bootstrap 5 geändert! FOOTER-Navigation */
.nav-link.active {
    color: #ffff00;
}

/* Schriftfarbe der Menüpunkte von Bootstrap 5 geändert! FOOTER-Navigation */
a.nav-link {
    color: #FFFFFF;
}

/* Schriftfarbe der Menüpunkte beim Hover von Bootstrap 5 geändert! FOOTER-Navigation */
.nav-link:hover {
    color: #FFE1FF;
}

/* Achtung! Testcode hier... */
a.nav-footer-text {
    /*color: #FFFFFF;*/
    /*color: tomato;*/
    /*font-size: 20px;*/
}


/* Firmenname neben Logo */
.b4-ueberschrift {
    font-family: Rajdhani-Bold, sans-serif;
    font-size: 2.5rem;
    color: #FFFFFF;
    font-weight: 700;
}

/* Footer - farblicher Abstand oben! */
.farbgap-footer {
    /*background-color: #0EB1F0;*/
    border-top: solid 5px #B0E2FF;

}

/* Schriftfarbe - 'Untertitel' */
.b4-untertitel {
    color: #000000;
}

/* Überschrift für Smartphones verkleinert */
@media (max-width: 430px) {
    .ueberschrift {
        font-size: 2rem;
    }
}

/* Hintergrundfarbe, Font-Family - Sidebars */
.sidebar-color {
    background-color: #D3D3D3;
    font-family: Rajdhani-Medium, sans-serif;
}

/* H4 Font-Family - Sidebars */
.sidebar-color h4 {
    font-family: Rajdhani-Bold, sans-serif;
}


.widget-wrapper h4 {
    color: red;
    font-family: Rajdhani-Bold, sans-serif;
}

/* CSS Newsletter Widget */
.widget-wrapper {
    color: #00a32a;
    /*font-family: Rajdhani-Light, sans-serif;*/
}

.pb-newsletter {
    color: #0b5ed7;
    font-family: Rajdhani-Bold, sans-serif;
}

/* Hintergrundfarbe für iOS Apps */
.pb-background-apps {
    /*background-color: #bfefff;*/
    background-image: linear-gradient(#00bfff, #98f5ff);
    border-radius: 15px;
    /*opacity: 0.5;*/
}

/* Hintergrundfarbentest */
.pb-background-test {
    background-color: #7EA1C4;
}

.pb-background-test2 {
    background-color: #ff7f50;
}

/* Schriftgrösse Rubrik 'Leistungen' - Titel und andere Überschriften! */
.title-leistung {
    font-size: 4.5rem;
    color: #0d6efd;
}

/* Icon-Farben auf der Seite 'Leistungen'! */
.icon-farben {
    color: #FFFFFF;
}

/* Hintergrund 'Liste' in Kontakte */
.hintergrund-kontaktliste {
    /*background-color: #F5F5F5;*/
    background-color: #0A6DF7;
}

/* Hintergrundfarbe für das Accordion */
.color-accordion {
    /*background-color: #F5F5F5;*/
    background-color: #0A6DF7;
}

/* Code von Bootstrap CSS - Abgeändert! */
/* START - Navigationsmenu mobile Farben geändert */
.navbar-light .navbar-toggler-icon {
    /*background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");*/

}

.navbar-light .navbar-toggler {
    /*border: 1px solid #ffffff;*/
    border: 2px solid black;
}

/* ENDE - Navigationsmenu mobile Farben geändert */

/* Schriftfarbe Titel in Rubrik 'Leistungen' */
.pb-titelleistungen {
    color: #00FF98;
}

/* Schriftfarbe Texte und teilweise Überschriften */
.pb-textfarben {
    /*color: #FFFFFF;*/
    color: #000000;
}

/* Accordion Textfarbe Button */
.pb-accordionbutton {
    color: #00FF98;
}

/* Schriftgrösse in der Haupt-Navigation!*/
.pb-navbar-font {
    font-size: 1.0em;
}

/* Hintergrundfarbe in der Hauptnavigation */
.pb-backgroundcolor-navigation {
    background-color: white;
}

/* Rahmen unterhalb der Hauptnavigation sowie Rahmenschatten unten! */
.pb-bordernavigation {
    border-bottom: #BEBEBE 1px solid;
    box-shadow: rgba(0, 0, 0, 0.19) 0 10px 20px, rgba(0, 0, 0, 0.23) 0 6px 6px;
}

/* Test-Codes für Hintergrundbild etc.! */
.pb-about {
    background-color: #0A6DF7;
}

.pb-about-background {
    background: url("images/pb_backgroundimage_2.png");
}

.pb-title-about {
    font-family: Bangers-Regular, sans-serif;
    font-size: 7rem;
    color: white;
}

.pb-text-about-one {
    font-family: Rajdhani-Bold, sans-serif;
    font-size: 3rem;
    color: white;
}

.pb-text-about-two {
    font-family: Rajdhani-Light, sans-serif;
    font-size: 2rem;
    color: white;
}

/* Hintergrundfarbe auf der Kontakt-Seite!  */
.pb-left {
    left: 0;
    /*background-color: #0A6DF7;*/
    /*background-color: #f0f0f0;*/
    background-color: rgba(240, 240, 240, 0.6);

}

.pb-right {
    background-color: #068199;

}

.pb-kontakt-oben {
    padding-top: 75px;
}

.pb-titel-tutorial {
    color: #104e8b;
}

/* START Titel-Banner */
.pb-titel-banner {
    font-family: Xolonium-Bold, sans-serif;
    font-size: 3.4rem;
    color: white;
    height: 115px;
    background-color: #068199;

}

.pb-book-banner-abstand {
    height: 55px;
    background-color: #068199;
}

@media (max-width: 435px) {

    .pb-titel-banner {
        font-size: 1.5rem;
    }
}

@media (max-width: 845px) {

    .pb-titel-banner {
        font-size: 1.3rem;
    }
}

@media (max-width: 883px) {

    .pb-titel-banner {
        font-size: 1.2rem;
    }
}

/* ENDE Titel-Banner */

/* hr in der Rubrik 'Blog' */
.b4-one {
    border: 5px solid gray;
    height: 3px;
}