@font-face {
    font-family: DINNextLTPro-Condensed;
    src: url(https://aare.guru/webfonts/2D81A6_0_0.eot);
    src: url(https://aare.guru/webfonts/2D81A6_0_0.eot?#iefix) format("embedded-opentype"), url(https://aare.guru/webfonts/2D81A6_0_0.woff2) format("woff2"), url(https://aare.guru/webfonts/2D81A6_0_0.woff) format("woff"), url(https://aare.guru/webfonts/2D81A6_0_0.ttf) format("truetype"), url(https://aare.guru/webfonts/2D81A6_0_0.svg#wf) format("svg")
}

:root {
    --ag-c-txt-Primary: #0f405f;
    --ag-c-txt-Secondary: #0071b7;

    --ag-font-family: "DINNextLTPro-Condensed", Helvetica, sans-serif;


    --ag-c-bg-wasser: #2be6ff;
    --ag-c-bg-wetter: #aeffda;
    --ag-c-bg-charts: pink;
    --ag-c-bg-oraku: rgb(142, 218, 174);
    --ag-c-bg-info: #ff6a66;
    --ag-c-bg-body: rgb(255, 255, 255);

    --ag-bg-pattern: url("https://aare.guru/img/aareguru-pattern-quer.png");

    --ag-f-L: 2.7rem;
    --ag-f-M: 2.2rem;
    --ag-f-S: 1.5rem;
    --ag-f-XS: 1.15rem;
    --ag-f-XXS: 0.75rem;

}
body {
    font-family: var(--ag-font-family);
    background-color: var(--ag-c-bg-wasser);
    background-image: var(--ag-bg-pattern);
    background-size: cover;
    background-attachment: fixed;
    color: var(--ag-c-txt-Primary);
    margin: 0;
    padding: 0;
    margin: 0;
    min-height: 100vh;       /* parent fills the screen */
    display: grid;
    place-items: center;  
}
.logo {
    width: 200px;
    margin-bottom: 20px;
}   
.content {
    background-color: var(--ag-c-bg-body);
    padding: 20px;
    border-radius: 8px;
    max-width: 768px;
    margin: 40px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}
h1 {
    font-size: var(--ag-f-L);
    margin: 0 0 20px 0;
    font-weight: normal;
}
p, li {
    font-size: var(--ag-f-S);
    margin: 0;
}
.address {
    margin-bottom: 20px;
}
a {
    color: var(--ag-c-txt-Secondary);
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}
.memberList {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    border-top: 1px solid var(--ag-c-txt-Secondary);
    padding-top: 20px;
}
.linkList {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    border-top: 1px solid var(--ag-c-txt-Secondary);
    padding-top: 20px;
    width: 100%;
}
.kontakt {
    border-top: 1px solid var(--ag-c-txt-Secondary);
    padding-top: 20px;
    width: 100%;
}