/*
Theme Name: ibsoft
Author: Peter Büttiker
Description: Das ist die offizielle Website für 'i-Bsoft.com'!
Version: 1.0
*/

body {
    background-color: #0A6DF7;
    /*background-color: #F5F5F5;*/
}


/*.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;
}

/* 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: 90px;
}

/* 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: 'JosefinSans-ExtraLight';
    src: url("assets/JosefinSans-ExtraLight.ttf");
}

.josefinSans-ExtraLight {
    font-family: JosefinSans-ExtraLight, sans-serif;
    color: white;
}


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

/* Firmenname neben Logo */
.logoname {
    font-family: Rajdhani-Bold, sans-serif;
    font-size: 3rem;
    color: #FFFFFF;
    /*color: #173AFF;*/
    /*color: #000000;*/
    font-weight: 700;
}

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

}


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

}

#border-field-contact7 {
    color: #000000;
    border: 1px solid #000000;
    border-radius: 5px;
}

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

#form-submit {
    border: 1px solid #0b5ed7;
    border-radius: 5px;
    background-color: #0b5ed7;
    color: #FFFFFF;
    font-family: Rajdhani-Medium, sans-serif;
    font-size: 1.2rem;
}

/* 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-Farbe für Footer */
.b4-footerfarbe {
    /*background-color: #FC4A03;*/
    background-color: #000000;
    /*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;
}

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

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

/* Schriftfarbe des aktiven Menupunktes von Bootstrap 5 geändert! FOOTER-Navigation */
.nav-link.active {
    color: red;
}

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

/* 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: #000000;*/
    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;
}

/* Hintergrundfarbe Website */
.pb-hintergrund {
    background-color: #0A6DF7;
}

/* Schriftfarbe für Hintergrund */
.pb-schriftfarbe {
    color: white;
}

/* Hintergrundfarbe 'Gradient' */
.pb-navihintergrund {
    /*background-color: rgba(123, 45, 10, 0.1);*/
    /*background-image: linear-gradient(to right, blue, yellow);*/
    /*background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(10,109,247,1) 0%, rgba(0,212,255,1) 100%);*/
    /*background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(10,109,247,1) 35%, rgba(0,212,255,1) 100%);*/
    /*background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(10,109,247,1) 35%, rgba(2,127,166,1) 100%);*/
    background-color: rgba(1, 58, 100, 1);
}

/* 'Underline' im Link vom Kontaktseite wurde die Farbe direkt in bootstrap.css geändert! */

/* Schriftart für 'Büttiker' in der Navigation */
.pb-schriftlogo {
    /*font-family: "Avenir Next", sans-serif;*/
    /*font-family: JosefinSans-ExtraLight, sans-serif;*/
    /*font-family: "Comic Sans MS", sans-serif;*/
    /*font-family: "Chakra Petch", sans-serif;*/
    font-family: "Josefin Sans", sans-serif;
    font-weight: 100;
    /*font-style: italic;*/
    font-size: 2.8rem;
}

/* Code von Bootstrap CSS - Abgeändert! */
/*.navbar-dark {
    --bs-navbar-color: rgba(255, 255, 255, 0.55);
    --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 1);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}*/

/* 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;
}

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