body {
    padding-bottom: 80px; /* Adjust this value based on your footer's actual height */
}

/* Footer styles */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #222222; /* Darker background for the footer */
    padding: 1rem 0; /* Add some padding */
    text-align: center;
    z-index: 1000; /* Ensure it stays on top of other content */
}

footer .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5rem;
}

footer ul li a {
    color: var(--pico-color); /* Use the main text color */
    text-decoration: none;
}

footer ul li a:hover {
    text-decoration: underline;
}

:root {
    /* Deine Wunschfarbe als Hintergrund & Rand */
    --pico-primary-background: #9169f5;
    --pico-primary-border: #9169f5;

    /* HOVER: Eine dunklere Variante für den Hover-Effekt */
    --pico-primary-hover-background: #764cdc;
    --pico-primary-hover-border: #764cdc;

    /* Textfarbe im Button (Weiß für guten Kontrast) */
    --pico-primary-inverse: #ffffff;

    /* --- 2. TEXTFELDER (INPUTS) --- */
    /* Der Rand ist IMMER in deiner Farbe #9169f5 */
    --pico-form-element-border-color: #9169f5;

    /* Beim Hineinklicken (Focus) wird der Rand etwas dunkler (wie beim Button Hover) */
    --pico-form-element-active-border-color: #764cdc;

    /* Der "Leucht"-Ring beim Hineinklicken (Deine Farbe mit 25% Deckkraft) */
    /* RGB Werte für #9169f5 sind 145, 105, 245 */
    --pico-form-element-focus-color: rgba(145, 105, 245, 0.25);
    --pico-typography-spacing-vertical: 1.5rem;
    --pico-form-element-spacing-vertical: 0.4rem;
    --pico-form-element-spacing-horizontal: 0.6rem;
    --pico-background-color: #2d2d28;
    --pico-color: #fae6cd;
    --pico-font-size: 0.9rem;
    --pico-line-height: 1.2;
    --pico-primary: #9169f5;
    --pico-border-color: #9169f5;
    --pico-primary-hover: #7a58d1;
    --pico-primary-focus: rgba(145, 105, 245, 0.25);

    /* Custom table colors */
    --pico-table-border-color: #4a4a43;
    --pico-table-row-stripped-background-color: #33332d;
}

h1 {
    --pico-font-weight: 400;
    --pico-typography-spacing-vertical: 0.5rem;
}

a[role=button] {
    --pico-background-color: #9169f5;
    --pico-border-color: #9169f5;
}

button {
    --pico-font-weight: 700;
    --pico-background-color: #9169f5;
    --pico-border-color: #9169f5;
}

a {
    min-height: 10px;
}

.my-header-grid {
    display: grid;
    grid-template-columns: 80% 20%;
    gap: 1rem; /* optional */
}

.my-body-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem; /* optional */
}

.my-client-grid {
    display: grid;
    grid-template-columns: 10% 80%;
    gap: 1rem; /* optional */
}

.my-grid {
    padding-bottom: 30px;
}

.button-red {
    --pico-background-color: #e53935;   /* Rot */
    --pico-border-color: #b71c1c;       /* Dunkleres Rot */
    --pico-color: white;                /* Text */
}

.button-red:hover {
    --pico-background-color: #b71c1c;
}

.btn-left {
    position: absolute;
    @media (min-width: 1280px) {
        .container {
            max-width: 1200px;
        }
    }
    @media (min-width: 1024px) {
        .container {
            max-width: 950px;
        }
    }
    @media (min-width: 768px) {
        .container {
            max-width: 700px;
        }
    }
    @media (min-width: 576px) {
        .container {
            max-width: 510px;
            padding-right: 0;
            padding-left: 0;
        }
    }
}

.btn-center {
    position: absolute;
    right: 45%;
}

.btn-right {
    position: absolute;
    @media (min-width: 1280px) {
        .container {
            left: 1280px;
        }
    }
    @media (min-width: 1024px) {
        .container {
            left: 950px;
        }
    }
    @media (min-width: 768px) {
        .container {
            left: 700px;
        }
    }
    @media (min-width: 576px) {
        .container {
            left: 510px;
            padding-right: 0;
            padding-left: 0;
        }
    }
    left: 1280px;
}

.no-pico-wrapper,
.no-pico-wrapper *,
.no-pico-wrapper *::before,
.no-pico-wrapper *::after {
    all: revert;
}

/* Minimaler Standardwert, damit body-Abhängigkeiten nicht stören */
.no-pico-wrapper {
    display: block;
}

.bg-white {
    background: #fff;
}

#achim-kraemer-image {
    width: 70px;
}

.heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 20px;
}

/* Improved Table Design */
table {
    --pico-border-color: var(--pico-table-border-color);
    --pico-striped-table-background-color: var(--pico-table-row-stripped-background-color);
}

table thead th {
    background-color: #3a3a33;
    color: #fae6cd;
    border-bottom: 2px solid var(--pico-primary);
}

tbody tr:hover {
    background-color: #404039;
}

/* Sidebar Styles */
.sidebar {
    width: 200px;
    background-color: #333;
    padding: 20px;
    border-radius: 10px;
}

.sidebar nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar nav ul li a {
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.sidebar nav ul li a:hover {
    background-color: #555;
}

.sidebar nav ul li a i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}