:root {
    --petrol: #17384d;
    --blue: #1D4F91;
    --blue-light: #EAF3FA;
    --blue-soft: #F5F9FC;
    --text: #233746;
    --muted: #667985;
    --line: #D8E3EA;
    --white: #fff;
    --shadow: 0 14px 35px rgba(47,85,110,.12);
    --radius: 18px;
    --max: 1120px;
}


/* ========================================
   GRUNDLAGEN
   ======================================== */

* {
    box-sizing: border-box;
}

html {
    max-width: 100%;
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: #fff;
    line-height: 1.6;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding-top: 60px;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: #fff;
    line-height: 1.6;
    max-width: 100%;
    overflow-x: hidden;
}

a {
    color: inherit;
}

.abschluss-bereich {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 20px;
}

/* =========================================================
   HERO-MAIN CONTAINER
========================================================= */

.hero-main-container {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}