/* ==================================================
   Blue Lagoon Design System für Cassiopeia
   ================================================== */

/* ==================================================
   1. Farbvariablen + Cassiopeia / Bootstrap Overrides
   ================================================== */
:root {
    /* Eigene Farbpalette */
    --blue-fresh:  #00a6fb;
    --blue-steel:  #0582ca;
    --blue-baltic: #006494;
    --blue-deep:   #003554;
    --blue-ink:    #051923;

    /* Cassiopeia Basisfarben */
    --cassiopeia-color-primary: var(--blue-baltic);
    --cassiopeia-color-hover:   var(--blue-steel);
    --cassiopeia-color-dark:    var(--blue-ink);
    --cassiopeia-color-link:    var(--blue-steel);

    /* Layout-Grundfarben */
    --body-bg:    #f8f9fa;
    --body-text:  #333333;
    --header-bg:  var(--blue-ink);
    --footer-bg:  var(--blue-ink);

    /* Bootstrap Link-Variablen */
    --bs-link-color-rgb: 0, 100, 148;
    --bs-link-color: --blue-baltic; /* bewusst unverändert gelassen */
    --bs-link-hover-color-rgb: 5, 130, 202;
    --bs-link-hover-color: #0582ca;
}

/* ==================================================
   2. Basis-Typografie
   ================================================== */
body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: var(--body-text);
}

h1,
h2,
h3 {
    color: var(--blue-deep);
    font-weight: 700;
}

/* ==================================================
   3. Header / Navigation
   ================================================== */
.header {
    background-color: var(--header-bg);
    color: #ffffff;
    border-bottom: 3px solid var(--blue-fresh);
}

.header a {
    color: #ffffff !important;
}

.header a:hover {
    color: var(--blue-fresh) !important;
}

.container-header .grid-child {
    padding: 0;
}
/* ==================================================
   4. Footer
   ================================================== */
.footer {
    background-color: var(--footer-bg);
    color: #e0e0e0;
    padding: 0;
    border-top: 5px solid var(--blue-fresh);
}
.footer .grid-child {
    padding: 0;
  }
/* ==================================================
   5. Buttons
   ================================================== */
.btn-primary {
    background-color: var(--blue-baltic);
    border-color: var(--blue-baltic);
    border: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--blue-steel);
    border-color: var(--blue-steel);
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--blue-baltic);
    --bs-btn-border-color: none;
}

/* ==================================================
   6. Karten / Card Header
   ================================================== */
.card-header {
    background-color: var(--blue-deep);
    color: #ffffff;
    border-bottom: 3px solid var(--blue-fresh);
    padding: 1rem;
    padding-bottom: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card:hover .card-header {
    background-color: var(--blue-baltic);
    transition: background-color 0.3s ease;
}

/* ==================================================
   7. Artikel- und Seitenüberschriften
   ================================================== */
.item-title,
.page-header h1 {
    color: var(--blue-baltic);
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--blue-baltic);
    display: inline-block;
}

.item-title a:hover {
    color: var(--blue-deep);
    text-decoration: none;
}

/* ==================================================
   8. Globale Link-Darstellung
   ================================================== */
a {
    text-decoration: none !important;
}

a:hover {
    text-decoration: none;
}

/* ==================================================
   9. MetisMenu / aufgeklappte Menüpunkte
   ================================================== */
.metismenu .mm-collapse.mm-show {
    background-color: var(--blue-fresh) !important;
    padding-bottom: 5px;
}

.metismenu .mm-collapse.mm-show a {
    color: #ffffff !important;
}
.metismenu.mod-menu .mm-toggler{
  color:#ffffff;
  }
/* ==================================================
   10. Bootstrap Utility Overrides
   ================================================== */
.bg-primary {
    background-color: var(--blue-baltic) !important;
}

.bg-primary,
.bg-primary a {
    color: #ffffff !important;
}

.border-primary {
    border-color: var(--blue-baltic) !important;
}