/* ===============================
   Globales Layout
   =============================== */

body{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
    background:#ffffff;
    padding:40px;
    margin:0;
    color:#333;
}

.container{
    max-width:760px;
    margin:auto;
    background:#fff;
    padding:30px;
    border-radius:14px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

/* ===============================
   Typografie
   =============================== */

h1{
    margin-top:0;
    font-size:1.8rem;
}

h3{
    margin-top:30px;
    margin-bottom:10px;
}

p{
    font-size:0.9rem;
    line-height:1.6;
    margin:6px 0;
}

small{
    font-size:0.75rem;
    color:#666;
}

/* ===============================
   Inhaltsboxen
   =============================== */

.section{
    background:#f7f9fb;
    padding:20px;
    border-radius:12px;
    margin-top:20px;
}

.center{
    text-align:center;
}

/* ===============================
   Bilder
   =============================== */

img{
    max-width:100%;
    height:auto;
    border-radius:10px;
}

.image-block{
    text-align:center;
    margin-top:20px;
}

.image-block p{
    font-size:0.75rem;
    color:#666;
    margin-bottom:6px;
}

/* ===============================
   Links
   =============================== */

a{
    color:#2a7fff;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

/* ===============================
   Footer
   =============================== */

footer{
    margin-top:40px;
    font-size:0.8rem;
    color:#666;
    text-align:center;
}

/* ===============================
   Thumbnail-Galerie
   =============================== */

.gallery{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin-top:20px;
}

.thumb{
    margin:14px;
    text-align:center;
}

.thumb img{
    width:350px;
    height:auto;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    transition:transform .2s ease, box-shadow .2s ease;
}

.thumb img:hover{
    transform:scale(1.03);
    box-shadow:0 8px 18px rgba(0,0,0,.25);
}

.thumb p{
    margin-top:6px;
    font-size:0.75rem;
    color:#555;
}

/* ===============================
   Hinweisbox (Urheberrecht etc.)
   =============================== */

.notice{
    margin-top:30px;
    padding:15px;
    background:#f7f9fb;
    border-radius:12px;
    font-size:0.75rem;
    color:#444;
}

/* ===============================
   Formulare
   =============================== */

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

label{
    font-size:0.8rem;
    color:#555;
}

input{
    padding:8px;
    border-radius:6px;
    border:1px solid #ccc;
    width:100%;
}

button{
    margin:20px auto 0;
    display:block;
    padding:10px 25px;
    background:#2a7fff;
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
}

button:hover{
    background:#1f66cc;
}

/* ===============================
   SVG Diagramm
   =============================== */

svg{
    display:block;
    margin:25px auto;
}

/* ===============================
   Legende
   =============================== */

.legend ul{
    list-style:none;
    padding-left:0;
    margin:10px 0 0;
}

.legend li{
    margin-bottom:6px;
    font-size:0.85rem;
}

.legend span{
    display:inline-block;
    width:15px;
    height:2px;
    margin-right:6px;
}