/* =========================================================
   BASIS & DESIGN-TOKENS
   ========================================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font: inherit;
}



:root {
    /* Layout */
    --container: 1180px;
    --gutter: 24px;
    /* Farben (global) */
    --color-bg: #eff2fb;
    --color-text: #0e1726;
    --color-primary-700: #2b6aa3;
    --color-line: #e6edf5;
    /* Footer-Farben */
    --c-bg: #EFF2FB;
    --c-line: #dbe7f4;
    --c-text: #152a45;
    --c-blue: #4c8fcc;
}

/* #region KOMPONENTE: BUTTONS/LAYOUT.UTILS */
/* =========================================================
   LAYOUT-UTILS
   ========================================================= */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Buttons (nur genutzte Variante) */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 999px;
    border: 1.5px solid #cfe2f5;
}

.btn--outline {
    background: #fff;
    border-color: #cfd9e6;
    color: var(--color-primary-700);
}
/* #endregion */






.bg-shape {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: linear-gradient(180deg, #2f5d88, #3f6fa4);
    /* Ecken anschneiden */
    clip-path: polygon( 
        25% 0, /* oben links etwas rein */
        40% 0, /* oben rechts etwas rein */
        100% 10%, 
        100% 90%, 
        45% 100%, 
        25% 100%, 
        0 90%, 
        0 10% );
}