/* Modernes Greyscale Business-Design mit IT-Netzwerk Hintergrund */

/* Allgemeines Layout */
html, body {
    height: 100%;
    margin: 0;
    /*font-family: 'Roboto', sans-serif; /* Moderne, serifenlose Schriftart für professionellen Look */
    font-family: 'Roboto', sans-serif;
    background-color: #f9f9f9; /* Sehr helles Grau für den Hintergrund */
    color: #333333; /* Dunkelgrauer Text */
    display: flex;
    flex-direction: column;
}

/* Header */
header {
    background-color: #333333; /* Dunkelgrau für den Header */
    color: #ffffff; /* Weißer Text */
    text-align: center;
    padding: 20px 0;
    font-size: 2em;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/*.navbar {
    display: inline-block;
    padding: 10px 20px;
    color: white;
    background: linear-gradient(to bottom right, #57a672, #344962, #e79e47, #d35849);
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}*/

/* Navigation (Navbar) */
.navbar {
    background-color: #444444; /* Etwas helleres Dunkelgrau für die Navbar */
    border-bottom: 2px solid #bbbbbb; /* Dezenter grauer Rand für die Navbar */
}

.navbar-nav .nav-link {
    color: #ffffff !important;
    font-weight: bold;
}

.navbar-nav .nav-link:hover {
    color: #b0b0b0 !important; /* Graues Highlight beim Hover */
    text-decoration: none;
}

main {
    flex: 1; /* Füllt den verfügbaren Platz zwischen Header (Navbar) und Footer aus */
    padding: 0px;
    /*background-color: #858484; /* Optional: Hintergrundfarbe */
    /*background-image: url('../images/itil-banner.png');*/
    /*background-image: url('../images/insights_01.png');*/
    background-image: url('../images/background.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
    border-radius: 0;
    overflow-y: scroll;
    display: inline-block;
    /*padding: 10px 20px;*/
    color: white;
    /*background: linear-gradient(to bottom right, #57a672, #344962, #e79e47, #d35849);*/
    /*border-radius: 5px;*/
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.jumbotron {
    background-color: rgba(255, 255, 255, 0.8);
    color: #444444;
}

.carousel {
    background-color: rgba(255, 255, 255, 0.8);
    color: #444444;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev{
    display:block;
}

.carousel-item {
    text-align: justify;
}

.img-thumbnail {
    background: linear-gradient(to bottom right, #57a672, #344962, #e79e47, #d35849); 
    border: none;
}

.carousel-control-prev-icon { 
    /*background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%444444' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"); */
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%444444' viewBox='0 0 512 512'%3E%3Cpath d='M267.5 440.6c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29l0-320c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4l-192 160L64 241 64 96c0-17.7-14.3-32-32-32S0 78.3 0 96L0 416c0 17.7 14.3 32 32 32s32-14.3 32-32l0-145 11.5 9.6 192 160z'/%3E%3C/svg%3E");    
}

.carousel-control-next-icon { 
    /*background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%444444' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");*/
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%444444' viewBox='0 0 512 512'%3E%3Cpath d='M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416L0 96C0 83.6 7.2 72.3 18.4 67s24.5-3.6 34.1 4.4l192 160L256 241l0-145c0-17.7 14.3-32 32-32s32 14.3 32 32l0 320c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-145-11.5 9.6-192 160z'/%3E%3C/svg%3E");
}

/* Cards */
.card {
    background-color: rgba(255, 255, 255, 0.8); /* Weißer Hintergrund für die Cards */
    border: 1px solid #e0e0e0; /* Heller grauer Rand für die Cards */
    border-radius: 8px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Dezenter Schatten für Cards */
    margin-bottom: 20px;
}

.card-header {
    background-color: rgb(33, 37, 41, 0.8); /* Sehr helles Grau für die Card-Header */
    color: #444444; /* Dunkelgrauer Text */
    font-size: 1.2em;
    font-weight: bold;
}

.card-body {
    color: #333333;
    padding: 20px;
}

#imageModal .modal-dialog {
  max-width: 90%; /* Setzt eine maximale Breite des Modals */
  width: 80%;     /* Definiert eine feste Breite (80% der Bildschirmbreite) */
}

#imageModal .modal-content {
    background-color: rgba(255, 255, 255, 0.8);
    color: #444444;
}


.img-mod {
    cursor: pointer;
    transition: filter 0.3s ease;
}
.img-mod:hover {
    filter: grayscale(100%);
}

.img-mod {
    cursor: pointer;
    transition: filter 0.3s ease, transform 0.3s ease;
}

.img-mod:hover {
    filter: grayscale(100%);
    transform: scale(1.015);
}

modalImage img {
    width: 100%;
    height: 100%;
}

a {
    text-decoration: none;
}

/* Links */
ul li a {
    text-decoration: none;
    color: #444444; /* Dunkelgrau für Links */
    font-weight: normal;
}

ul li a:hover {
    text-decoration: underline;
    color: #777777; /* Grauer Hover-Effekt */
}

.lead a {
    text-decoration: none;
    color: #444444; /* Dunkelgrau für Links */
}

.lead a:hover {
    color: #777777; /* Grauer Hover-Effekt */
}

/* Footer */
footer {
    background-color: #333333; /* Dunkelgrau für den Footer */
    color: #ffffff; /* Weißer Text */
    font-size: 1em;
    padding: 15px 0;
    text-align: center;
}

#offcanvasFooter {
    height: auto;
}

.accordion-button:focus,
.accordion-button:not(.collapsed) {
    border: 0px solid white !important;
    box-shadow: none;
    color: white;
    background-color: #343a40; /* Dunkler Hintergrund */
}

/* Buttons */
.btn-primary {
    background-color: #444444;
    border: 2px solid #444444;
    color: #ffffff;
    text-transform: uppercase;
    padding: 10px 20px;
    font-weight: bold;
}

.btn-primary:hover {
    background-color: #bbbbbb; /* Helles Grau beim Hover */
    border: 2px solid #bbbbbb;
    color: #333333; /* Dunklerer Text beim Hover */
}

/* Sticky Sidebar */
.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .navbar-nav {
        text-align: center;
    }

    header h1 {
        font-size: 2em;
    }

    .card-header {
        font-size: 1em;
    }
    
    main img {
        width: 80vw;
        height: auto;
    }

@media (max-width: 576px) {
    #standardFooter {
        display: none;
    }
}