h1 {
  background-color: #FDE70E !important;
  padding: 10px;
  border-radius: 5px;
}

/* Farbe der Learnr-Navigationstasten */
.learnr .btn-previous, .learnr .btn-next {
  background-color: #FDE70E !important;
  color: black;
  border: none;
  font-weight: bold;
}
 

.btn.btn-primary {
      background-color: #FDE70E !important;
      border-color: #FDE70E !important;
      color: black !important;
}

li.topic.current {
  background-color: #FDE70E !important;
}


body {
    font-family: 'Inter', sans-serif !important;
}

:root {
    --primary: #fde70e !important;
    --secondary: #4c4c4c !important;
}

 

body, p, a {
    color: #4c4c4c; /* FHNW dark gray */
}

a:hover {
    color: #262626; /* Slightly darker on hover */
}
 
h1, h2, h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #000000; /* Bold, black headings */
}


 
.navbar {
    background-color: #fde70e; /* FHNW yellow */
    color: #4c4c4c;
}
  
.btn:hover {
    background-color: #e3ce02; /* Darker yellow */
    color: #212529; /* Slightly darker text */
}


.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease-in-out;
}
.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}



html {
    scroll-behavior: smooth;
}


/*.section {
    background: linear-gradient(135deg, #fde70e, #fff);
}*/


input:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(253, 231, 14, 0.8);
}

a {
    transition: color 0.2s ease-in-out;
}
a:hover {
    color: #000000;
}



.fade-in {
    opacity: 0;
    animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
    100% {
        opacity: 1;
    }
}



.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #4c4c4c;
    color: #fff;
}



.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}


.parallax {
    background-image: url('your-image.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


.scroll-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    background-color: #fde70e;
    color: #4c4c4c;
    padding: 10px;
    border-radius: 50%;
    transition: 0.3s;
}
.scroll-top:hover {
    background-color: #e3ce02;
}




.loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #4c4c4c;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.sidebar {
    position: fixed;
    left: -250px;
    width: 250px;
    height: 100%;
    background-color: #4c4c4c;
    transition: 0.3s;
}
.sidebar.open {
    left: 0;
}


.sidebar a:hover {
    background-color: #fde70e;
    color: #4c4c4c;
    transition: 0.2s;
}


.sidebar-toggle {
    position: fixed;
    top: 20px;
    left: 20px;
    background-color: #fde70e;
    padding: 10px;
    cursor: pointer;
}


.sidebar a::before {
    content: url('data:image/jpeg;base64,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'); /* Path to your icon */
    margin-right: 10px;
}




.sidebar a.active {
    background-color: #fde70e;
    color: #000;
    font-weight: bold;
}



.submenu {
    display: none;
}
.sidebar a:hover + .submenu, .submenu.open {
    display: block;
}




.sidebar {
    position: fixed;
    overflow-y: auto;
}



.sidebar a {
    transition: background-color 0.3s ease;
}


.header {
    background: linear-gradient(135deg, #fde70e, #fff);
}



@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
}


/*.section {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}*/

html {
    scroll-behavior: smooth;
}





.box.box-danger,
.box.box-solid.box-danger {
    border-color: #4c4c4c !important;
    height: auto !important;
    margin-left: -15px; 
}

/* Passt den Header der 'box-danger' Boxen an */
.box.box-danger > .box-header {
    background-color: #fde70e !important;
    color: #4c4c4c !important;
}


.box-tools.pull-right .btn {
  background-color: #4c4c4c;
  color: #ffffff;
  border-color: #4c4c4c;
}

/* Verhindert Farbänderungen bei Hover und Fokus */
.box-tools.pull-right .btn:hover,
.box-tools.pull-right .btn:focus {
  background-color: #4c4c4c;
  color: #ffffff;
  border-color: #4c4c4c;
}


.widget-user-header.bg-light-blue {
    background-color: #fde70e !important;
    color: #4c4c4c !important;
}

.widget-user-header.bg-light-blue.href{
    background-color: #fde70e !important;
    color: #4c4c4c !important;
}

.widget-user-header.bg-light-blue.a:hover,
.widget-user-header.bg-light-blue.a:focus {
  color: #4c4c4c; /* Stellt sicher, dass die Farbe beim Hover und Fokus ebenfalls schwarz bleibt */
}