/* Variablen */
:root {
    --color-text-white: white; 
    --color-text-grey: #373737;
    --color-blue-primary: #135988; /* dunkelblau #135988 */
    --color--grey-primary:  #373737; /* dark grey */ 
    --color-grey-secondary: #cbcaca;/* light grey */ 
}

/* day date banner */
.date-banner {
    background-color: var(--color-blue-primary); /* Dunkelgrauer Hintergrund #484848; */
    color: var(--color-text-white); /* Weiße Schrift */
    text-align: left; /* Text zentriert */
    font-size: 1.2em; /* Schriftgröße etwas größer */
    font-weight: bold; /* Fettgedruckt */
    padding: 2px; /* Abstand oben und unten */
    margin: 2px 0px; /* Abstand des nachfolgenden/darüberliegenden nach oben und unten */
    border-radius: 0px; /* Abgerundete Ecken */
}

/* Horizontal line between blog posts */
hr {
    border: none;
    border-top: 3px solid var(--color-grey-secondary); /* Grauer, dünner Strich */
    margin: 10px 0; /* Abstand vor und nach dem Strich */
}


h1 {
    color: var(--color--grey-primary);
}

h2 {
    color: var(--color--grey-primary);
}

ul {
    list-style: disc; /*  Bulletpoints */
    padding: 0px;
    list-style-position: inside;    /*  nicht über linken rand hinaus */
}


a {
    text-decoration: none;
    color: var(--color-text-grey);
}

/* Hinzufügen von Padding für den Hauptinhalt */
body {
    padding-top: 0px; /* Platz für den fixierten Header schaffen */
}

/* BOOTSTRAP3 */
.navbar-btn {
    padding: 5px 8px; /* Vertikal: 2px, Horizontal: 10px */
    font-size: 12px;  /* Optional: Schriftgröße anpassen */
    line-height: 1.8; /* Optional: Zeilenhöhe anpassen */
    border-radius: 0px; /* Beispiel für abgerundete Ecken */
}

/* ******************** */
/* H E A D E R          */
/* ******************** */
header.navbar {
    width: 100%;      /* Header über die gesamte Breite */
    z-index: 1030;    /* Sicherstellen, dass der Header immer über anderen Elementen liegt */
    border-radius: 0;
   transition: top 0.5s; /* scrollToTopBtn : Header beim Scrollen ausblenden -> Sanfte Übergänge beim Ein- und Ausblenden */
}

/* Logo im Header */
.navbar-header img {
    height: 28px; /* Höhe des Logos anpassen */
    margin-right: 7px; /* Abstand zwischen Logo und Text */
    vertical-align: middle; /* Vertikale Ausrichtung */
}

/* Header Element */
.navbar {                                       
    background-color: var(--color-blue-primary); 
    color: var(--color-text-white); /* Farbe Text im footer "2024" */
}

/* Stil für den Schriftzug oben links im Header */
.navbar-brand {
    color:var(--color-text-white) !important; /* Neue Schriftfarbe, z. B. Weiß */
    font-weight: bold; /* Text fett machen */
    text-decoration: none; /* Option: Entfernt Unterstreichung */
}

/* Optional: Hover-Farbe für den Schriftzug */
.navbar-brand:hover {
    color: var(--color-grey-secondary) !important; /* Hover over; per !important Standardstil überschreien */
}

/* Allgemeine Farbe der Links im Header */
header.navbar .nav > li > a {
    color: var(--color-text-white);   /* Ändert die Schriftfarbe der Links */
    font-weight: bold; /* Fettgedruckt */
}

/* Farbe beim Hover-Effekt */
header.navbar .nav > li > a:hover {
    color: var(--color-grey-secondary); /* Ändert die Farbe der Links, wenn der Mauszeiger darüber ist */
}

/* ******************** */
/* F O O T E R          */
/* ******************** */
footer.navbar {
    background-color: var(--color-grey-secondary); /*  */
    padding: 0px 0px;       /* Vertikale und horizontale Abstände reduzieren */
    padding-top: 9px; /* Vergrößert den Abstand des Textes zur Oberkante */
    padding-bottom: -50px; /* Optional: Schmaler Abstand zur Unterkante */
    min-height: 10px;     /* Mindesthöhe des Footers */
    font-size: 13px;      /* Optional: Schriftgröße verkleinern */
    font-weight: bold;
    line-height: 0.30;     /* Optional: Texthöhe anpassen */
}

footer.navbar a {
    margin: 0 5px;               /* Horizontaler Abstand zwischen Links */
    text-decoration: none;       /* Unterstreichung entfernen */
    color: var(--color-text-white);              /* Schriftfarbe anpassen */
}

footer.navbar a:hover {
    color: var(--color-blue-primary);              /* Farbe beim Hovern */
}

/* ******************** */
/* scrollToTopBtn       */
/* ******************** */

/* scrollToTopBtn  */
#scrollToTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none; /*  none / block;  Button ist anfangs nicht sichtbar */
    background-color:  var(--color-blue-primary);
    opacity: 0.5; /* Transperency  */
    border: none;
    border-radius: 15%;
    padding: 10px;
    font-size: 20px;
    cursor: pointer; /* pointer */
    color: var(--color-text-white); /* color pointer */
    z-index: 1000;  /* Sicherstellen, dass der Button vor anderen Elementen liegt */
}

#scrollToTopBtn:hover {
    background-color: var(--color-grey-secondary);  /* Optional: Hover-Farbe */
}