*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:Arial, sans-serif;
background:#f4f7fb;
line-height:1.6;
color:#333;
}

/* HEADER */

header{
background:#dbeafe;
padding:40px 20px;
text-align:center;
}

header h1{
color:#082b63;
font-size:3rem;
margin-bottom:10px;
}

header p{
font-size:1.2rem;
}

/* NAVIGATION */

.navigation{
background:#082b63;
padding:15px;
text-align:center;
}

.navigation a{
color:white;
text-decoration:none;
margin:0 15px;
font-weight:bold;
}

.navigation a:hover{
text-decoration:underline;
}

/* CONTAINER */

.container{
max-width:1200px;
margin:auto;
padding:40px 20px;
}

/* SECTIONS */

section{
background:white;
padding:30px;
margin-bottom:30px;
border-radius:15px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

h2{
color:#082b63;
margin-bottom:15px;
font-size:2rem;
}

h3{
color:#0b4aa2;
margin-top:20px;
margin-bottom:10px;
}

p{
margin-bottom:15px;
}

ul{
margin-left:20px;
margin-bottom:15px;
}

/* INFO BOX */

.info-box{
background:#dbeafe;
padding:20px;
border-radius:12px;
margin-top:20px;
margin-bottom:20px;
font-weight:bold;
}

/* ZURÜCK BUTTON */

.back-button,
.back-link{
display:inline-block;
padding:12px 20px;
background:#082b63;
color:white;
text-decoration:none;
border-radius:10px;
font-weight:600;
transition:0.3s;
margin-bottom:25px;
}

.back-button:hover,
.back-link:hover{
background:#0b4aa2;
transform:translateY(-2px);
}

/* BILDER STANDARD */

.subject-image{
width:100%;
aspect-ratio:16/5;
overflow:hidden;
border-radius:12px;
margin-top:20px;
margin-bottom:20px;
}

.subject-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* OBEN */

.image-top{
width:100%;
aspect-ratio:16/5;
overflow:hidden;
border-radius:12px;
margin-top:20px;
}

.image-top img{
width:100%;
height:100%;
object-fit:cover;
object-position:top;
display:block;
}

/* MITTE */

.image-center{
width:100%;
aspect-ratio:16/5;
overflow:hidden;
border-radius:12px;
margin-top:20px;
}

.image-center img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
}

/* UNTEN */

.image-bottom{
width:100%;
aspect-ratio:16/5;
overflow:hidden;
border-radius:12px;
margin-top:20px;
}

.image-bottom img{
width:100%;
height:140%;
object-fit:cover;
object-position:bottom;
display:block;
}

/* GANZ UNTEN */

.image-very-bottom{
width:100%;
aspect-ratio:16/5;
overflow:hidden;
border-radius:12px;
margin-top:20px;
}

.image-very-bottom img{
width:100%;
height:170%;
object-fit:cover;
object-position:bottom;
display:block;
}

/* EXTREM UNTEN */

.image-extreme-bottom{
width:100%;
aspect-ratio:16/5;
overflow:hidden;
border-radius:12px;
margin-top:20px;
}

.image-extreme-bottom img{
width:100%;
height:230%;
object-fit:cover;
object-position:bottom;
display:block;
}

/* VON UNTEN BEGINNEND */

.image-from-bottom{
width:100%;
aspect-ratio:16/5;
overflow:hidden;
border-radius:12px;
margin-top:20px;
position:relative;
}

.image-from-bottom img{
width:100%;
height:auto;
position:absolute;
left:0;
bottom:0;
display:block;
}

/* PLATZHALTER */

.image-placeholder{
width:100%;
height:250px;
background:#dbeafe;
border:2px dashed #082b63;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
margin-top:20px;
font-weight:bold;
color:#082b63;
}

/* FOOTER */

.footer-content{
display:flex;
justify-content:space-between;
align-items:center;
max-width:1200px;
margin:auto;
}

.footer-link{
color:white;
text-decoration:none;
font-weight:500;
transition:0.3s;
}

.footer-link:hover{
color:#c9ddff;
text-decoration:underline;
}

/* TABLET */

@media(max-width:900px){

.image-top,
.image-center,
.image-bottom,
.image-very-bottom,
.image-extreme-bottom,
.image-from-bottom,
.subject-image{
border-radius:10px;
}

.image-bottom img{
height:150%;
}

.image-very-bottom img{
height:175%;
}

.image-extreme-bottom img{
height:240%;
}

}

/* HANDY */

@media(max-width:600px){

header h1{
font-size:2rem;
}

header p{
font-size:1rem;
}

.image-top,
.image-center,
.image-bottom,
.image-very-bottom,
.image-extreme-bottom,
.image-from-bottom,
.subject-image{
border-radius:8px;
}

.image-bottom img{
height:160%;
}

.image-very-bottom img{
height:180%;
}

.image-extreme-bottom img{
height:250%;
}

.back-button,
.back-link{
width:100%;
text-align:center;
}

}
/* TEST SECTION */

.test-section{
background:white;
padding:40px;
border-radius:20px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.test-section h2{
color:#082b63;
margin-bottom:15px;
font-size:2rem;
}

.intro-text{
margin-bottom:30px;
font-size:1.1rem;
color:#555;
}

/* FRAGEN */

.question-box{
background:#f8fbff;
padding:25px;
border-radius:15px;
margin-bottom:25px;
border-left:6px solid #082b63;
}

.question-box label{
font-weight:bold;
display:block;
margin-bottom:15px;
font-size:1.1rem;
color:#082b63;
}

select{
width:100%;
padding:14px;
border-radius:10px;
border:1px solid #ccc;
font-size:1rem;
background:white;
}

/* RADIO BUTTONS */

.answer-group{
display:flex;
flex-direction:column;
gap:12px;
margin-top:10px;
}

.radio-option{
background:white;
padding:12px;
border-radius:10px;
border:1px solid #dbeafe;
cursor:pointer;
transition:0.3s;
font-weight:normal !important;
}

.radio-option:hover{
background:#dbeafe;
transform:translateX(5px);
}

.radio-option input{
margin-right:10px;
}

/* BUTTON */

button{
margin-top:30px;
padding:15px 25px;
background:#082b63;
color:white;
border:none;
border-radius:10px;
font-size:1rem;
cursor:pointer;
transition:0.3s;
}

button:hover{
background:#0b4aa2;
transform:scale(1.05);
}

/* ERGEBNIS */

.result{
margin-top:30px;
padding:25px;
background:#dbeafe;
border-radius:15px;
font-size:1.3rem;
font-weight:bold;
text-align:center;
color:#082b63;
}

/* FOOTER */

.back-link{
display:inline-block;
margin:20px 0;
padding:12px 20px;
background:#082b63;
color:white;
text-decoration:none;
border-radius:10px;
font-weight:bold;
transition:0.3s;
}

.back-link:hover{
background:#0b4aa2;
transform:scale(1.05);
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial, sans-serif;
background:#f4f7fb;
line-height:1.6;
color:#333;
}
/* HEADER */

header{
background:#dbeafe;
padding:50px 20px;
text-align:center;
}

header h1{
font-size:3rem;
color:#082b63;
margin-bottom:10px;
}


header p{
font-size:1.2rem;
}

/* NAVIGATION */

nav{
background:#082b63;
padding:15px;
text-align:center;
}


nav a{
color:white;
text-decoration:none;
margin:0 15px;
font-weight:bold;
}

nav a:hover{
text-decoration:underline;
}


/* CONTAINER */
.container{
max-width:1100px;
margin:auto;
padding:40px 20px;
}


footer{
background:#082b63;
color:white;
padding:25px 8%;
margin-top:40px;
}

.footer-content{
max-width:1200px;
margin:auto;

display:flex;
justify-content:space-between;
align-items:center;
}

.footer-content p{
margin:0;
}

.footer-link{
color:white;
text-decoration:none;
font-weight:500;
transition:0.3s;
}

.footer-link:hover{
color:#c9ddff;
text-decoration:underline;
}

/* Responsive */

@media(max-width:600px){

.footer-content{
flex-direction:column;
gap:10px;
text-align:center;
}

}