/* Allgemeine Stile für alle Medien */
:root {
    --color-succes: #468847;
    --color-background-succes: #dff0d8;
    --color-border-succes: #d6e9c6;
    --color-error: #b94a48;
    --color-background-error: #f2dede;
    --color-border-error: #eed3d7;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: 0.25s ease-in-out;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    font: 90% "open sans", arial, helvetica, sans-serif;
    word-wrap: break-word;
}

main {
    margin: 1em 0 1em 0;
    padding: 0.2em;
    max-width: 75em;
    box-shadow: 0 4px 13px 1px rgba(0, 0, 0, 0.25);
}

.card {
    display: flex;
    flex-wrap: wrap;
    margin: 0.2em;
    padding: 0.2em;
    border: 1px solid gray;
}

.card > * {
    flex: 1 1 20em;
}

figure {
    text-align: right;
}

h1,
h2 {
    margin: 0;
    padding: 0.5em;
    text-align: center;
}

table,
tr,
td {
    margin: 0.2em;
    padding: 0.2em;
    border-collapse: collapse;
    border: 1px solid gray;
}

td.spalte1 {
    width: 30%;
    text-align: center;
}

td.spalte2 {
    width: 70%;
}

label {
    margin: 0.25em;
    font-weight: bold;
}

select,
input,
button {
    display: inline-block;
    margin: 0.2em;
    padding: 0.2em;
    height: 23px;
    font-size: inherit;
    font-family: inherit;
    border: 1px solid;
    border-radius: 3px;
}

input[type="text"],
input[type="number"] {
    width: 99%;
    min-width: 99%;
}

input[type="email"],
input[type="date"] {
    width: 49%;
    min-width: 49%;
}

input:optional {
    border-color: gray;
}

input:focus,
select:focus {
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

input:required:valid,
select:required:valid {
    color: var(--color-succes);
    border-color: var(--color-border-succes);
}

input:invalid,
select:invalid {
    color: var(--color-error);
    border-color: var(--color-border-error);
}

input:invalid::placeholder {
    color: var(--color-error);
}

input:focus:invalid,
select:focus:invalid {
    color: var(--color-error);
    border-color: var(--color-border-error);
}

input:required:focus:valid,
select:focus:valid {
    background: url("../img/hand-up.svg") no-repeat 95% 50% var(--color-background-succes);
    background-size: 20px;
}

input:focus:invalid,
select:focus:invalid {
    background: url("../img/hand-down.svg") no-repeat 95% 50% var(--color-background-error);
    background-size: 20px;
}

.captcha {
    display: block;
    margin: 0.1em;
    padding: 0.1em;
    border-radius: 0.25em;
}

.buttons {
    text-align: center;
}

ol,
ul,
li {
    margin: 0.5em;
    padding: 0.5em;
}

.alert-success {
    margin: 0 0 18px 0;
    padding: 8px;
    max-width: 75em;
    color: var(--color-succes);
    text-align: center;
    font-weight: bold;
    background-color: var(--color-background-succes);
    border: 1px solid #fbeed5;
    border-color: var(--color-border-succes);
}

.alert-error {
    margin: 0 0 18px 0;
    padding: 8px;
    max-width: 75em;
    color: var(--color-error);
    text-align: center;
    font-weight: bold;
    background-color: var(--color-background-error);
    border: 1px solid #fbeed5;
    border-color: var(--color-border-error);
}

/* Bildschirmspezifische Stile */
@media screen {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        transition: 0.25s ease-in-out;
    }

    body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        font: 90% "open sans", arial, helvetica, sans-serif;
        word-wrap: break-word;
    }

    /* Hier den restlichen Inhalt des style-Blocks einfügen */
    /* ... */
}

/* Bestehendes CSS für Druckausgabe beibehalten */
@media print {
    :root {
        --color-text-default: #000000;
        --color-background: transparent !important;
        --color-border: #000000;
    }
    * {
        margin: 0;
        padding: 0;
    }
    html,
    body {
        height: 100%;
    }
    body {
        font: 85% "times new roman", times, serif;
        color: var(--color-text-default);
        background-color: var(--color-background);
    }
    main {
        margin: auto;
        max-width: 75em;
    }
    .card {
        display: flex;
        flex-wrap: wrap;
        margin: 0.2em;
        padding: 0.2em;
        border: 1px solid black;
    }
    .card > * {
        flex: 1 1 20em;
    }
    figure {
        text-align: right;
    }
    h1,
    h2 {
        margin: 0;
        padding: 0.5em;
        text-align: center;
    }
    table,
    tr,
    td {
        margin: 0.25em;
        padding: 0.25em;
        border-collapse: collapse;
        border: 1px solid black;
    }
    table {
        page-break-after: always;
    }
    td.spalte1 {
        width: 30%;
    }
    td.spalte2 {
        width: 70%;
    }
    label {
        font-weight: bold;
    }
    input,
    select,
    button {
        margin: 0.2em;
        padding: 0.2em;
        font-size: inherit;
        font-family: inherit;
        border: 1px solid;
        border-radius: 3px;
    }
    input[type="text"],
    input[type="number"] {
        width: 98%;
        min-width: 98%;
    }
    input[type="email"],
    input[type="date"] {
        width: 48%;
        min-width: 48%;
    }
    ol,
    ul,
    li {
        margin: 0.5em;
        padding: 0.5em;
    }
    select,
    button,
    .captcha,
    .captchatext {
        display: none;
    }
}