:root {
    --color-surface: #ffffff;
    --color-text: #3F3F3F;
    --color-text-muted: #4d4d4d;
    --color-border: #e2e2e2;

    --color-primary: #3F3F3F; /* Blue AA on white */
    --color-primary-hover: #009de0;

    --color-secondary: #6c757d; /* Grayish secondary */
    --color-secondary-hover: #ff9800;

    --color-strom: #cd0a0a;
    --color-gas: #f7d400;
    --color-wasser: #0A73CFFF;
    --color-waerme: #9E3169FF;

    --color-success: #2e7d32;
    --color-warning: #ff9800;
    --color-error: #d32f2f;
    --color-info: #0288d1;

    --font-body:'Inter', Arial, sans-serif;

    --color-text-on-surface: var(--color-text);
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

.button {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px !important;
    border: 2px solid var(--color-primary) !important;
    margin: 30px !important;
    min-height: 4rem !important;
    transition: all .2s;
}

.button:hover, .wcag-button:hover {
    background: var(--color-primary) !important;
    color: white !important;
}

.bs-styles .card, .bs-styles .progressBS {
    box-shadow: none !important;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--color-border);
}
.dz-success-mark, .dz-error-mark {
    display: none;
}