/* --- Basislayout -------------------------------------------------------- */
*{box-sizing:border-box}
body{
    font-family:Arial,Helvetica,sans-serif;
    font-size:.9em;
    line-height:1.5;
    margin:0 auto;
    padding:0 1rem;
    min-width:400px;
    max-width:640px;
    width:100vw;
}
h1{margin-top:1rem}
footer{margin-top:2rem;text-align:center;color:#666}

/* --- Intro-Text --------------------------------------------------------- */
.intro{margin:1.5rem 0}

/* --- Chart-Block & Legende --------------------------------------------- */
.chartblock{
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem;
    justify-content:center;
}

/* Fixe Größe des Kuchen-Diagramms */
#kuchenChart {
  width: 320px;
  height: 320px;
}


.legend{
    flex:1 1 200px;
    min-width:200px;
    max-width:240px;
    background:#eee;
    border-radius:6px;
    padding:1rem;
}
.legend-title{font-weight:700;font-size:1.1em;margin-bottom:.5rem}
.legend-entry{
    display:flex;
    align-items:center;
    margin-bottom:.6em;
    font-size:1.1em;
}
.legend-box{
    width:1.2em;
    height:1.2em;
    margin-right:.5em;
    border-radius:.3em;
    display:inline-block;
}
.legend-sublist{
    font-size:.8em;
    color:#666;
    margin:0 0 .6em 1.5em;
    list-style:disc inside;
}

/* --- Kuchenliste -------------------------------------------------------- */
.liste{margin-top:2rem}
.cake-category{margin-bottom:.7rem}
.cake-category h3{margin:0;color:#333;font-size:1em}
.cake-category h3 span{color:#666;font-weight:400}
.liste ul{margin:.2rem 0 .4rem 1.5rem}

/* --- Formular ----------------------------------------------------------- */
.spendenformular{
    max-width:400px;
    margin-top:2rem;
}
label{display:block;margin:.8rem 0 .3rem;font-weight:700;}
fieldset{border:none;padding:0;margin:0}
.kuchenart-row{margin-bottom:.5em}
.explain{font-size:.8em;color:#666;margin-left:.3em}
input[type=text]{width:100%;padding:.4rem;font-size:1.2em;}
button{margin-top:1rem;padding:.6rem 1.2rem;font-size:1.2em;}

/* --- Hinweis-Box -------------------------------------------------------- */
.hinweis,.datenschutz{
    background:#f9f9f9;
    border-radius:.3em;
    padding:1rem;
    margin-top:1rem;
    color:#666;
}
.nochkeine{font-style:italic}

/* --- Dankeseite --------------------------------------------------------- */
body.danke .dankebox{margin:2rem 0}
@media(max-width:900px){
    .chartblock{flex-direction:column}
}