/* =========================================
   Farbdefinitionen
========================================= */
:root {
    background: #f4f4f4;
    --primary: #003366;
    --primary-dark: #002244;
    --accent: #FFCC00;
    --text-light: #ffffff;
    --text-dark: #222;
}

/* =========================================
   Grundlayout
========================================= */
body {
    font-family: Arial, Helvetica, sans-serif;
    background: #3C97AA;
    color: var(--text-dark);
}

/* =========================================
   Header mit vertikalem Verlauf
========================================= */
.container-header {
    background: var(--gradient-blue);
    padding: 25px 0;
}

.site-title,
.site-description {
    color: var(--text-light);
}
.site {
  background-color: #3c97aa;
}
/* =========================================
   Navigation mit vertikalem Verlauf
========================================= */
.container-nav {
    background: var(--gradient-blue);
}

.mod-menu a {
    background-color: #2f3e46;
    padding: 1rem;
    color: var(--text-light) !important;
    display: block;
    font-weight: bold;
    text-transform: uppercase;
}

.mod-menu a:hover,
.mod-menu li.current a {
    background: var(--primary-dark);
    color: var(--accent) !important;
}

/* =========================================
   Überschriften mit vertikalem Textverlauf
========================================= */
h1, h2, h3, h4 {
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* =========================================
   Buttons mit vertikalem Verlauf
========================================= */
.btn,
button,
input[type="submit"] {
    background: var(--gradient-blue);
    color: var(--text-light);
    border: none;
    padding: 10px 18px;
    border-radius: 3px;
}

.btn:hover {
    background: var(--primary-dark);
}

/* =========================================
   Module
========================================= */
.moduletable {
    background: #fff;
    padding: 20px;
    border-left: 4px solid var(--primary);
    margin-bottom: 25px;
}

/* =========================================
   Footer
========================================= */
.container-footer {
    background: var(--primary-dark);
    color: var(--text-light);
    padding: 40px 0;
}

.container-footer a {
    color: var(--accent);
}

.sidebar-left,
.sidebar-right {
    background-color: #2f3e46;
}