body {
    margin: 0 40px;
    font-family: 'Quicksand', sans-serif; /* Light, friendly sans-serif font */
    background-color: #f7f9fc; /* Very light, cool background */
    color: #4a4a68; /* Soft blue-gray for primary text */
}

header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 18px 60px; /* Adjusted padding */
    background: linear-gradient(to right, #e0f2f7, #e6f7ff); /* Soft blue gradient header */
    box-shadow: 0 4px 15px rgba(175, 220, 240, 0.5); /* Gentle blue shadow */
    border-bottom: none; /* Remove sharp border */
    border-radius: 0 0 25px 25px; /* Rounded bottom corners for header */
}

h1 {
    font-size: 60px; /* Slightly adjusted heading size */
    color: #6a6a99; /* Muted purple-blue for main headings */
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(106, 106, 153, 0.2); /* Soft text shadow */
}

h2 {
    font-size: 46px;
    color: #6a6a99;
    font-weight: 600;
}

h3 {
    font-size: 34px;
    color: #6a6a99;
    font-weight: 600;
}

h4 {
    font-size: 20px;
    color: #8c8cd9; /* Lighter, more vibrant purple-blue */
    font-weight: 500;
}

p {
    max-width: 680px; /* Wider paragraphs */
    font-size: 17px;
    color: #6c7b8b; /* Softer gray-blue for paragraphs */
    line-height: 1.7;
}

label {
    font-size: 16px;
    color: #7b7b96; /* Muted purple-gray for labels */
    font-weight: 600;
    text-transform: none; /* No uppercase for a softer feel */
    margin-bottom: 6px; /* Adjusted margin */
}

a {
    color: #a0a0ff; /* Light, vibrant blue-purple for links */
    text-decoration: none;
    transition: color 0.3s ease, transform 0.2s ease; /* Added transform for hover */
    font-size: 16px;
    font-weight: 600;
}

a:hover {
    color: #7d7dc7; /* Darker blue-purple on hover */
    text-decoration: underline;
    transform: translateY(-2px); /* Slight lift effect */
}

---

## Tables, Forms, and Navigation

```css
/* --- Table Styles --- */
table {
    margin: 0 auto;
    border-collapse: separate; /* Use separate for border-spacing */
    border-spacing: 0 10px; /* Adds space between rows */
    width: 100%;
    background-color: #ffffff; /* Clean white table background */
    border-radius: 18px; /* Significantly more rounded corners */
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(175, 220, 240, 0.4); /* Pronounced, soft blue shadow */
    border: none; /* Remove sharp table border */
}

table:hover {
    box-shadow: 0 18px 45px rgba(175, 220, 240, 0.6); /* More intense blue shadow on hover */
}

th, td {
    padding: 18px 28px;
    text-align: left;
    border-bottom: none; /* Remove internal borders */
}

th {
    background-color: #e6f7ff; /* Light blue header background */
    color: #7c7cb6; /* Muted purple-blue for header text */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.8px; /* Slightly less spaced out */
}

td {
    color: #5d5d81; /* Darker blue-gray for cell text */
}

tr:hover {
    background-color: #f0f7fb; /* Very light blue on row hover */
    transform: scale(1.01); /* Slight scaling on hover */
    transition: all 0.2s ease-out;
}

/* --- Form Styles --- */
form {
    background-color: #ffffff; /* White form background */
    padding: 35px;
    border-radius: 20px; /* Very rounded corners */
    margin-top: 30px; /* Adjusted margin */
    margin-right: 24px;
    width: 440px;
    box-shadow: 0 10px 25px rgba(175, 220, 240, 0.4); /* Soft blue shadow for forms */
    border: none;
}

input[type=text],
input[type=number],
input[type=password],
select#kaubagrupp {
    width: calc(100% - 40px); /* Adjust width for padding */
    margin-bottom: 18px; /* Adjusted margin */
    background-color: #f0f7fb; /* Light blue input background */
    border: 2px solid #cce8f4; /* Soft blue border */
    border-radius: 12px; /* Rounded input fields */
    padding: 15px 20px;
    font-size: 16px;
    color: #4a4a68;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth cubic-bezier transition */
    outline: none;
    margin-top: 6px;
}

input[type=text]:hover,
input[type=number]:hover,
input[type=password]:hover,
select#kaubagrupp:hover {
    background-color: #eaf5fb; /* Slightly darker on hover */
    border-color: #a0a0ff; /* Light blue-purple border on hover */
    box-shadow: 0 0 10px rgba(160, 160, 255, 0.3); /* Soft blue-purple glow */
}

input[type=text]:focus,
input[type=number]:focus,
input[type=password]:focus,
select#kaubagrupp:focus {
    border-color: #7d7dc7; /* Darker blue-purple on focus */
    box-shadow: 0 0 15px rgba(125, 125, 199, 0.5); /* Stronger blue-purple glow */
    background-color: #eaf5fb;
    color: #4a4a68;
}

input[type=submit],
input[type=button] {
    cursor: pointer;
    font-weight: bold;
    background: linear-gradient(to right, #a0a0ff, #8080ff); /* Light blue-purple gradient for buttons */
    color: #ffffff; /* White text on buttons */
    border: none;
    border-radius: 12px; /* Rounded buttons */
    padding: 16px 25px;
    font-size: 17px;
    width: 100%;
    transition: all 0.3s ease-in-out;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 6px 15px rgba(128, 128, 255, 0.3); /* Soft button shadow */
}

input[type=submit]:hover,
input[type=button]:hover {
    background: linear-gradient(to right, #8080ff, #6a6ad9); /* Darker blue-purple gradient on hover */
    box-shadow: 0 8px 20px rgba(106, 106, 217, 0.5); /* More prominent shadow on hover */
    transform: translateY(-2px); /* Subtle lift on hover */
}

input[type=radio] {
    accent-color: #a0a0ff; /* Light blue-purple radio buttons */
    transform: scale(1.2); /* Slightly larger radio buttons */
}

/* --- Navigation Menu --- */
.menu {
    list-style: none;
    display: flex;
    gap: 0;
    margin: 0;
    padding-top: 15px;
}

.menu li {
    position: relative;
}

.menu > li > a {
    color: #6c7b8b; /* Soft gray-blue for menu items */
    text-decoration: none;
    font-weight: 600;
    padding: 16px 20px; /* Generous padding */
    display: block;
    transition: color 0.3s, background-color 0.3s, transform 0.2s;
    width: 150px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.menu > li > a:hover {
    color: #8080ff; /* Blue-purple on hover */
    background-color: #f0f7fb; /* Light background on hover */
    transform: translateY(-2px); /* Slight lift */
}

.menu li:hover .dropdown {
    display: block;
}

.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 180px; /* Slightly wider dropdown */
    border-radius: 0 0 15px 15px; /* Rounded bottom corners */
    background: #ffffff; /* White dropdown background */
    box-shadow: 0 10px 25px rgba(175, 220, 240, 0.3); /* Soft blue shadow */
    z-index: 99;
    border-top: none; /* Remove sharp border */
}

.dropdown li a {
    display: block;
    padding: 14px 20px;
    color: #6c7b8b; /* Soft gray-blue for dropdown items */
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: left;
    text-transform: none; /* No uppercase for dropdown items */
}

.dropdown li a:hover {
    color: #ffffff; /* White text on hover */
    background: linear-gradient(to right, #a0a0ff, #8080ff); /* Blue-purple gradient on hover */
}

/* --- Footer --- */
footer {
    margin-top: 80px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #8c9cb3; /* Muted blue-gray for footer text */
    padding-bottom: 30px;
    border-top: 1px dashed #dbe3eb; /* Dashed, light border above footer */
    padding-top: 25px;
}