body {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
}

a:link, a:visited {
    color: black;
    text-decoration: none;
}

.footer {
    font-size: 12px;
    position: absolute;
    bottom: 4px;
    left: 0px;
    width: 100%;
    text-align: right;
}

.footer a:hover { color: red; }

.container {
    display: grid;
    height: calc(100vh - 30px);
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px 4px;
    grid-auto-flow: dense;
    grid-template-areas:
        "oben-links oben-rechts"
        "unten-links unten-rechts";
}

.container > a:link {
    cursor: pointer;

    /* mittig anordnen: */
    align-items: center;
    display: grid;
    justify-items: center;

    /* schrift: */
    font-weight: bold;
    font-size: 40px;
    color: black;
}

.container > a:hover {
    /* heller beim drüberfahren: */
    color: blue;
    filter: brightness(125%);
}

.unten-links {
    /* privates */
    background-color: #dabbe8;
    grid-area: unten-links;
}

.unten-rechts {
    /* kontakt */
    background-color: #98ff98;
    grid-area: unten-rechts;
}

.unten-rechts span::first-letter {
    text-decoration: line-through;
}

.oben-rechts {
    /* portfolio */
    background-color: #ebdb9e;
    grid-area: oben-rechts;
}

.oben-links {
    /* politik */
    background-color: #cdecff;
    grid-area: oben-links;
}