/* Custom Überschrift */
.customHeader {
    display: flex;
    width: 100vw;
    height: 20px;
    align-items: center;        /* vertikal mittig */
    justify-content: center;    /* horizontal mittig */
    column-gap: 10px;                /* optional: kleiner Abstand zwischen Bild und Text */
    margin-top: 35px;
  margin-bottom: 10px;
}
.customHeaderFont {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* klare moderne Schrift */
    font-size: 1.5rem;       /* etwas größer als normaler Text */
    font-weight: 600;        /* halbfett für Betonung */
    color: var(--base);      /* nutzt dein definiertes Basisblau */
}
.customHeaderLine {
    width: 15vw;
    height: 2px;
    background-color: var(--base);      /* nutzt dein definiertes Basisblau */
}

/* h1 Überschrift eingefärbt */
h1 {
    color: var(--base);
}

/* Custom Button */
.btn {
    background-color: var(--base);
    color: var(--white);
    border: 0px;
    border-radius: 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
    width: 200px;
    height: 40px;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* klare moderne Schrift */
    font-size: 1rem;       /* etwas größer als normaler Text */
    text-align: center;         /* falls mehrzeilig */
}
.btn:hover {
    background-color: var(--darker_lighter_hover);
    cursor: pointer;
}


.logout-img {
  position: absolute;
  top: 60px;
  right: 3px;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.logout-img:hover {
  opacity: 0.7;
}