:root {
    --page-background:  #f7f7f8;
    --text-color:       #226F54;
    --text-achtung:     #DA2C38;
    --link-color:       #87C38F;
    --border-color:     #43291F;
    --link-background: #F4F0BB;
    --form-background: #F4F0BB;
    --form-button: #333; /* Dunkelgrau */

/*
    #DA2C38
    #226F54
    #87C38F
    #F4F0BB
    #43291F
    #f7f7f8

    */
}

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

/*
background: #C3C9E9 #E1E4F4
text: #373F47
link: #6C91C2
rahmen: #8B8982
sonst #AAABBC
*/
/* Standard-Link (nicht besucht) */
a:link {
    color:   var(--link-color);
    text-decoration: none; /* Kein Unterstrich */
}

/* Besuchter Link */
a:visited {
    color:   var(--link-color);
}

/* Wenn der Benutzer mit der Maus über den Link fährt */
a:hover {
    text-decoration: underline; /* Unterstrichen bei Hover */
}   

/* Aktiver Link (z.B. beim Klicken) */
a:active {
    font-weight: bold;
}


body, html {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:   var(--page-background);
    color:              var(--text-color);
    
}

.square-box {
    display: grid;
    grid-template-columns:  calc(2*100%/26) 1fr calc(2*100%/26);
    grid-template-rows:     calc(2*100%/26) 1fr calc(2*100%/26);

    width:  95vmin;
    height: 95vmin;

}
.rahmenecken {
    display: grid;
    grid-template-columns:  1fr 1fr;
    grid-template-rows:     1fr 1fr;
}
.rahmenwaagrecht {
    display: grid;
    grid-template-columns:  repeat(22, 1fr);
    grid-template-rows:     repeat(2,  1fr);
}   
.rahmensenkrecht {
    display: grid;
    grid-template-columns:  repeat(2,  1fr);
    grid-template-rows:     repeat(22, 1fr);
}   

.langbox {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1px;
    border: 1px solid  var(--border-color);
    font-size:  1.2vmin;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #226F54;
}
.rahmenecken div:nth-child(-2n + 2),
.rahmenecken div:nth-child(2n + 3),
.rahmenwaagrecht div:nth-child(-2n + 22),
.rahmenwaagrecht div:nth-child(2n + 23),
.rahmensenkrecht div:nth-child(4n-1),
.rahmensenkrecht div:nth-child(4n+2) {
    background-color: #DA2C38;
}
.aktlang {
    background-color:var(--link-background) !important;
}

.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size:  3vmin;
    font-family: Arial, Helvetica, sans-serif;
}

.persHL {
    color: var(--text-achtung);
    display: inline-block;
/*    padding: 0 1vmin; */
}

#danksagung {
/*    border: 1px solid red; */
    min-width: 90%;
    text-align: center;
}
#wissenwollen {
/*    border: 1px solid red; */
    width: 90%;
    text-align: center;
}
.frage{
    margin-bottom: 1vmin;
}
.formbox{
    display: flex;
}
.formTF {
    width: 80%;
    padding: 10px;
    box-sizing: border-box;
    font-size:  2vmin;
    margin-right: 1vmin;
    background-color:var(--form-background);

    border-radius: 1vmin;
    border-width: 1px;
}
.formBT {
    width: 20%;
    padding: 10px;
    cursor: pointer;
    box-sizing: border-box;
    font-size:  2vmin;

    border-radius: 1vmin;
    border-width: 1px;
}


.jemandanders {
    margin-top: 16vmin;
    font-size:  2vmin;
    cursor: pointer;
}
.jemandanders:hover {
    text-decoration: underline;
}
#uberwen {
/*    border: 1px solid green; */
    display: none;
    min-width: 90%;
    text-align: center;
}