﻿body {
    scroll-behavior: smooth;
    word-wrap:break-word;
    margin:0;
    padding:0;
    font-size: 1.4rem;
    line-height: 160%;
    color:#333333;
    background-color:#FFFFFF;
    xfont-family: 'Courgette' , arial;  /* schräg*/
    xfont-family: arial;
    Xfont-family: arial,sans-serif;
    font-family: work sans;

}

h1 {
    font-size:2rem;
    text-align:center;
    font-weight:400;
    margin-top:0;
    margin-bottom:0;
    font-family:Courgette,arial;
    color:blue;

}
h2 {
    font-size:1.8rem;
    text-align:center;
    font-weight:400;

}
h3 {
    font-size:1.6rem;
    text-align:center;
    font-weight:400;

}

.header {
    background-color:#ddeefc;
    padding:2rem;
}

#footer{
    margin-top:20px;
    text-align: center;
    background-color:#ddeefc;
    vertical-align:middle;
    padding:10px;
}

.schmal {
    box-sizing: border-box;
    overflow-wrap: break-word;
    width:1200px;
    max-width:100%;
    padding:5%;
    margin: 0 auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

img{ height: 100px;  }

.parent {
    display: flex;
    gap: 20px;
}

.col {
    flex: 1;
    padding: 20px;
    background: #eee;
    box-sizing: border-box;
}

/* Unter 800px: Spalten untereinander */
@media (max-width: 800px) {
    .parent {
        flex-direction: column;
    }
}



@media (max-width: 800px)
{
    body { font-size:1.0rem;}
    h1 { font-size:1.5rem;}
    h2 { font-size:1.2rem;}
    h3 { font-size:1.1rem;}

}

@media (max-width: 630px)
{
    #left{ clear:right; width:100%; }
    .next{ width:100%; }
}



