@font-face {
    font-family: 'herz-Regular';
    src: url('herz-Regular.woff2') format('woff2');
    font-weight: auto;
    font-style: auto;
}

@font-face {
    font-family: 'Times New Roman';
    src: url('TimesNewRomanMTStd-Bold.woff2') format('woff2');
    font-weight: auto;
    font-style: auto;
}

body {
    font-family: 'Times New Roman', serif;
    color: #ff0000;
}

.secResults{
    justify-content: flex-start;
    min-height: 70vh;
    height: fit-content;
    padding: 0;
    gap:5em;
}

form{
    display: flex;
    flex-direction: column;
}

.question{
}

h2{
    color: #f00;
    font-size: 6em;
    display: inline-flex;
    width: 3.5em;
    height: 3.5em;
    border: 0.1em solid red;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin: 20px;


}

section {

    display: flex;
    /* width: 100vw;*/
    height: 100vh;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    padding:3em 6em;
    box-sizing: border-box;
    min-height: fit-content;
}

#results {
    display: flex;
    /* width: 100vw; */
    /* height: 100vh; */
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}

#resultBtn{
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

h3 {
    font-size: 6em;
    color: #ff0000;
    margin:0;
    text-align: center;
    line-height: 1em;
}

p{
    font-weight: bold;
    padding: 0.3em;
    font-size: 3em;
    color: #ff0000;
    line-height: 1.1em;
}

.abteilungInfo{
    text-align: left;
}

.abteilungInfo{
    text-align: center;
}

.radio-button-group {
    display: flex;
    gap: 10em;
    margin: 20px 0;
    flex-direction: row-reverse;
}

.radio-button {
    font-family: 'herz-Regular', serif;
    position: relative;
    font-size: 12em;
    color: #ff0000;
    display: flex;
    border-color: red;
    border: 0.05em solid #ff0000;
    border-radius: 10em;
    justify-content: center;
    align-items: center;
    background: white;
}

.radio-button input {
    position: absolute;
    opacity: 0;
}

.radio-button label {
    display: inline-flex;  /* Flex container */
    align-items: center;     /* Vertical centering */
    justify-content: center;  /* Horizontal centering */
    width: 1.7em;            /* Ensure full width (adjust if needed) */
    height: 1.5em;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    font-weight: normal;
    border-radius: 10em;
    padding-bottom: 0.2em;
    background: white;
}


.radio-button input:checked + label {
    background: #ff4444;
    color: white;
    border-color: #ff0000;
    box-shadow: 0 2px 5px rgba(255, 0, 0, 0.2);
}

.radio-button label:hover {
    background: #ff0000;
    color: white;
}