@font-face {
    font-family: 'Quicksand';
    src: url('/fonts/Quicksand-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    /*background-image: url('img/liniennetzhg.svg');
    background-size:contain;           
    background-position:center;      
    background-repeat: no-repeat;     
    background-attachment: fixed;  */   
    min-height: 100vh;                
    min-width: 600px;
    max-width: 900px;
    font-family: 'Quicksand', sans-serif;              /* Schriftart */
    margin: 0 auto;
    justify-content: space-between;
    display: flex;
    flex-direction:column;
    gap: 1rem;
    --color10:rgba(0, 152, 70, 0.5);                 /* Farbe 1 */  
    --color20:rgba(165, 2, 126, 1);               /* Farbe 2 */ 
    --color30:rgba(247, 243, 18, 0.5);               /* Farbe 3 */
    --color40:rgba(138, 162, 40, 0.4);
    --color49:rgba(138, 162, 40, 1);
}

.kopf{
    background-color: var(--color40); /* Hintergrundfarbe */
    color: white;              /* Textfarbe */
    padding: 12px 24px;        /* Innenabstand */
    border: none;              /* Kein Rahmen */
    border-radius: 8px;        /* Abgerundete Ecken */
    font-size: 16px;           /* Schriftgröße */
    cursor: pointer;           /* Mauszeiger als Hand */
    transition: background-color 0.3s ease; /* Weicher Hover-Effekt */
    margin: 8px;
    white-space: nowrap;
    list-style: none;
    padding: 8px 14px;
    display:flex;
    flex-wrap: wrap;
    text-decoration: none;
}

.kopf:hover,
.kopf:focus {
    background-color: var(--color49);
    /*transform: translateY(-2px);*/
}

.kopfa{
    background-color:var(--color20); /* Hintergrundfarbe */
    color: white;              /* Textfarbe */
    padding: 12px 24px;        /* Innenabstand */
    border: none;              /* Kein Rahmen */
    border-radius: 8px;        /* Abgerundete Ecken */
    font-size: 16px;           /* Schriftgröße */
    cursor: pointer;           /* Mauszeiger als Hand */
    transition: background-color 0.3s ease; /* Weicher Hover-Effekt */
    margin: 8px;
    white-space: nowrap;
    list-style: none;
    padding: 8px 14px;
    display:flex;
    flex-wrap: wrap;
    text-decoration: none;
}

.wrapper{
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.ueber0{
    color:antiquewhite;
    margin:16px;
    font-weight: 900;
}

.ueber1{
    margin:16px;
    font-weight: 900;
}

.txt1{
    margin:16px;
}

.img10{   /* BBG-Symbol*/
    width: 100%;
    }
@media(min-width:100px){
    .img10{
        padding-top:24px;
        max-width: 300px;
    }
}

.img20{    /* Kleinbus an Haltestelle */
    width: 100%;
    }
@media(min-width:500px){
    .img20{
        margin-top: 40px;
        width:100vw;
        max-width: 500px;
    }
}

.cont10{
    margin-left: 16px;
    margin-top: 64px;
    font-size:24px;
    font-weight:bolder;
    white-space: nowrap;
}   

.list{
    list-style-type: none;
    padding: 8px 14px;
    display:flex;
    flex-wrap:nowrap;
    gap: 12px;
    flex-direction: row;
}

.sec11{
    color:black;
    gap:16px;
    display:flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content:space-between;
}

@media (max-width: 720px) {
    .sec11{
        flex-direction: column;
    }
}

.sec12{
    gap: 16px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content:space-between;
}

@media (max-width: 720px) {
    .sec12{
        flex-direction: column;
    }
}

.sec13{
    margin: 16px;
}


.sec14{
    display:flex;
    flex-direction: row;
    justify-content:flex-start;
    margin: 16px;
}

.sec15{

}

.sec16{
    bottom:0;
    width:100%; 
    margin-bottom: 16px;
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
    align-items:end;
    
}

.imgBildsymbol{

}

.imgBackground1{
    
}

a:link, a:visited, a:hover, a:active{
    font-weight:bolder;
    font-size:x-large;
    text-decoration: none;
    
}



.footer{
    color:darkgrey;
}