body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ebebeb;
    margin: 0; padding: 0; color: #212e41;
}

.container {
    max-width: 500px;
    margin: 40px auto;
    padding: 20px 25px;
    background-color: #ebebeb;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

h1,h2 { text-align: center; margin-bottom:60px; color:#212e41; }

form {
    display: grid;
    grid-template-columns: 1fr; /* single column by default */
    gap: 15px;
}

form .grid-row {
    display: grid;
    grid-template-columns: 1fr; /* two equal columns */
    gap: 10px;
}

label { font-weight: 500; display:block; margin-bottom:5px; }

input, textarea {
    transition: border-color 0.3s;
    border: 1px solid #ccc;
    width: 100%;
    outline: none;
    background-color: #f2f2f2;
    padding: 10px;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
}

input:focus, textarea:focus { border-color:#2d9a70; }

button {
    padding:12px;
    background-color: #2d9a70;
    color:white;
    border:none;
    border-radius:6px;
    font-size:1rem;
    cursor:pointer;
    transition: background-color 0.2s ease;
}

button:hover { background-color:#1c8960; }

span.error { color:#d8000c; font-size:0.875rem; }
.success { text-align:center; color:#155724; background-color:#d4edda; border:1px solid #c3e6cb; padding:10px; border-radius:6px; }

canvas {
    display:block;
    width:100%;
    height:150px;
    border-radius:6px;
    background-color:#fffbea; /* paper-like background */
}

@media (max-width:600px) {
    form .grid-row {
        grid-template-columns: 1fr; /* stack on mobile */
    }
}
.checkbox-container {
    display: flex;
    align-items: flex-start; /* top-align checkbox with first line of text */
    gap: 8px;                /* space between checkbox and text */
    font-size: 0.9rem;       /* slightly smaller text */
}

.checkbox-container input[type="checkbox"] {
    margin-top: 3px;         /* adjust vertical alignment with text */
    flex-shrink: 0;          /* prevent shrinking */
}

.signature-container {
    position: relative;
    width: 100%;
    border: 2px solid #003366; /* dark blue border */
}

/* Signature canvas stays full width */
.signature-container canvas {
    width: 100%;
    height: 150px;
    border-radius: 6px;
    background-color: #fffbea; /* paper-like background */
}

/* Clear button small, dark blue, right aligned */
.signature-container #clear {
    position: absolute;
    top: 8px;              /* adjust vertical alignment if needed */
    right: 8px;            /* align to the right edge */
    padding: 4px 8px;      /* smaller than normal buttons */
    font-size: 0.8rem;     /* smaller text */
    background-color: #003366; /* dark blue */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: background-color 0.2s ease;
}

.signature-container #clear:hover {
    background-color: #002244;
}


/* Hide the native checkbox */
.checkbox-container input[type="checkbox"] {
    appearance: none; /* remove default look */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #003366; /* dark blue border */
    border-radius: 8px;
    background-color: #fff; /* paper-like */
    cursor: pointer;
    position: relative;
}

/* Checkmark indicator */
.checkbox-container input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    width: 5px;
    height: 10px;
    border: solid #003366; /* dark blue check */
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Optional: hover effect */
.checkbox-container input[type="checkbox"]:hover {
    background-color: #e6f0ff;
}
.impressum {
    padding-top: 1rem;
    text-align: center;
    font-size: 0.7rem;
}

a {
    color: #212e41;
}