:root {
            --uds-blue: #004876;
            --uds-darkblue: #01283f;
            --uds-red: #c71748;
            --uds-yellow: #d7df23;
            --uds-dark-gray: #6e6e6e;
            --uds-medium-gray: #919191;
            --uds-light-gray: #bebebe;
            --uds-lightest-gray: #e6e6e6;
            --text-dark: #000000;
            --text-light: #ffffff;
            --border: #e5e7eb;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: "Open Sans",Helvetica,Arial,sans-serif;
            color: var(--text-dark);
            background-color: #ffffff;
            line-height: 1.6;
         }
         
        /* Header */
        .header-inner {
            background-color: var(--uds-darkblue);
            max-width: none;  /* 1100px */
            margin: 0 auto;
            padding-top: 10px;
            padding-bottom: 12px;
            padding-left: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            position: relative;
        }

        .logo {
            height: 58px;
            width: auto;
            padding-right: 10px;
        }

        .site-title a,
        .site-title a:link,
        .site-title a:visited,
        .site-title a:hover,
        .site-title a:active {
            font-size: 1.6rem;
            font-weight: 300;
            color: var(--uds-lightest-gray);
            letter-spacing: 0.5px;
            text-decoration: none;
        }

        /* Language */
        .language-switcher {
            margin-left: auto;
            right: 50px;
            white-space: nowrap;
            padding-left: 10px;
            padding-right: 100px;
        }

        .language-switcher a,
        .language-switcher a:link,
        .language-switcher a:visited,
        .language-switcher a:hover,
        .language-switcher a:active {
            color: var(--uds-lightest-gray);
            font-weight: 300;
            text-decoration: none;
        }

        .language-switcher a + a::before {
           content: "|";
           color: var(--uds-lightest-gray);
           margin: 0px 16px;
           pointer-events: none;   /* separator is not clickable */
        }

        .language-switcher a.current-lang {
            text-decoration: underline;
            padding: 0px 0px 0px 0px;
        }

        /* Hauptinhalt */
        main {
            max-width: 1100px;
            margin: 0 auto;
            padding: 48px 24px;
            flex: 1;
            min-height: calc(100vh - 70px - 128px);
        }

        main h1 {
            font-size: 2rem;
            font-weight: 600;
            margin-top: 0;
            margin-bottom: 1.2rem;
        }

        main h2 {
            font-size: 1.6rem;
            font-weight: 600;
            margin-top: 2.5rem;
            margin-bottom: 0.8rem;
        }

        main h3 {
            font-size: 1.3rem;
            font-weight: 600;
        }

        main p {
            max-width: 720px;
        }

        main a,
        main a:link,
        main a:visited,
        main a:hover,
        main a:active {
            color: var(--uds-blue);
            font-weight: 600;
            text-decoration: none;
        }

        main a:hover {
            text-decoration: underline;
        }

        /* Footer */
        footer {
            background-color: var(--uds-darkblue);
            color: var(--uds-lightest-gray);
            margin-top: 64px;
        }

        .footer-inner {
            margin: 0 auto;
            padding: 16px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
        }

        footer a,
        footer a:link,
        footer a:visited,
        footer a:hover,
        footer a:active {
            color: inherit;
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }