/* =========================
           CSS VARIABLEN
           ========================= */
        /* new-rocker-regular - latin */
        @font-face {
          font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
          font-family: 'New Rocker';
          font-style: normal;
          font-weight: 400;
          src: url('../fonts/new-rocker-v17-latin-regular.eot'); /* IE9 Compat Modes */
          src: url('../fonts/new-rocker-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
               url('../fonts/new-rocker-v17-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
               url('../fonts/new-rocker-v17-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
               url('../fonts/new-rocker-v17-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
               url('../fonts/new-rocker-v17-latin-regular.svg#NewRocker') format('svg'); /* Legacy iOS */
        }
        /* saira-300 - latin */
        @font-face {
          font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
          font-family: 'Saira';
          font-style: normal;
          font-weight: 300;
          src: url('../fonts/saira-v23-latin-300.eot'); /* IE9 Compat Modes */
          src: url('../fonts/saira-v23-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
               url('../fonts/saira-v23-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
               url('../fonts/saira-v23-latin-300.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
               url('../fonts/saira-v23-latin-300.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
               url('../fonts/saira-v23-latin-300.svg#Saira') format('svg'); /* Legacy iOS */
        }
        /* saira-regular - latin */
        @font-face {
          font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
          font-family: 'Saira';
          font-style: normal;
          font-weight: 400;
          src: url('../fonts/saira-v23-latin-regular.eot'); /* IE9 Compat Modes */
          src: url('../fonts/saira-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
               url('../fonts/saira-v23-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
               url('../fonts/saira-v23-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
               url('../fonts/saira-v23-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
               url('../fonts/saira-v23-latin-regular.svg#Saira') format('svg'); /* Legacy iOS */
        }
        /* nova-flat-regular - latin */
        @font-face {
            font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
            font-family: 'Nova Flat';
            font-style: normal;
            font-weight: 400;
            src: url('../fonts/nova-flat-v26-latin-regular.eot'); /* IE9 Compat Modes */
            src: url('../fonts/nova-flat-v26-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
               url('../fonts/nova-flat-v26-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
               url('../fonts/nova-flat-v26-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
               url('../fonts/nova-flat-v26-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
               url('../fonts/nova-flat-v26-latin-regular.svg#NovaFlat') format('svg'); /* Legacy iOS */
        }
        
        
        :root {
            --bg-primary-color: #10120F;
            --bg-secondary-color: #C2CABB;
            --primary-color: #fff;
            --secondary-color: #000;
            --accent-color: #E5E4E2;

            --font-main: 'Saira', sans-serif;
            --font-title: 'Nova Flat', sans-serif;
            --font-size-base: 16px;

            --container-width: 1800px;
        }
        

        /* =========================
           RESET
           ========================= */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-main);
            font-size: var(--font-size-base);
            background-color: var(--bg-primary-color);
            color: var(--primary-color);
        }

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

        /* =========================
           HEADER / NAVIGATION
           ========================= */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            background: var(--bg-color);
            border-bottom: 1px solid #eaeaea;
            z-index: 1000;
            background-color: var(--bg-primary-color);
        }

        .header-container {
            max-width: var(--container-width);
            margin: 0 auto;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            
        }

        /* Logo */
        .logo {
            font-family: var(--font-title);
            font-size: 3rem;
            font-weight: 700;
            display:flex;
        }
        .wappen{
            width: 40px;
            padding-left:5px;
        }

        /* Navigation */
        nav ul {
            list-style: none;
            display: flex;
            gap: 30px;
        }

        nav a {
            text-transform: uppercase;
            font-weight: 500;
            color: var(--primary-color);
            position: relative;
            display: inline-block;
        }
        nav a:before,
        nav a:after{
            content: '';
            position: absolute;
            width: 100%;
            height: 1px;
            background: linear-gradient(to right, #fff, #2a3019);
            bottom: -5px;
            left: 0;
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.4s ease-out;
        }
        nav a:before {
            top: -5px;
            transform-origin: left;
        }
        nav a:hover::after,
        nav a:hover::before {
            transform: scaleX(1);
        }

        nav a:hover {
            color: var(--accent-color);
        }

        /* =========================
           SECTIONS
           ========================= */
        section .container {
            padding: 120px 20px;
            max-width: var(--container-width);
            margin: 0 auto;
        }

        #hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }
        .face-left{
                height:90vh;
                object-fit: cover;
                position: absolute;
                bottom: 0;
                left: 0;
                will-change: transform;              
        }
        #about{
            background-color: var(--bg-secondary-color);
            color: var(--secondary-color);
            position: relative;
            height: 100vh;
            overflow: hidden;
        }
        #about .container{
            position: relative;
            z-index: 2;
        }
        #about p {color: var(--secondary-color);}
        /* Container für Dreiecke */
        .triangles {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
        }
        
        /* Dreieck-Form */
        .triangle {
            position: absolute;
            width: 0;
            height: 0;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            border-bottom: 45px solid #111; /* FARBE */
            opacity: 0.15;
            will-change: transform;
        }
        
        /* Zufällige Positionen */
        .triangle:nth-child(1) { left: 10%; top: -50px; }
        .triangle:nth-child(2) { left: 30%; top: -120px; }
        .triangle:nth-child(3) { left: 55%; top: -80px; }
        .triangle:nth-child(4) { left: 75%; top: -150px; }
        .triangle:nth-child(5) { left: 90%; top: -60px; }
        
        .typewriter {
            opacity: 1;
            white-space: pre-wrap;
        }
        #projects{
            
        }
        #contact{
            background-color: var(--bg-secondary-color);
        }

        h1 {
            font-size: 3rem;
            margin-bottom: 20px;
        }

        h2 {
            font-size: 2rem;
            margin-bottom: 20px;
        }

        p {
            max-width: 700px;
            line-height: 1.6;
            color: var(--primary-color);
        }

        /* =========================
           FOOTER
           ========================= */
        footer {
            padding: 40px 20px;
            text-align: center;
            border-top: 1px solid #eaeaea;
            color: var(--secondary-color);
        }

        /* =========================
           RESPONSIVE
           ========================= */
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
                gap: 15px;
            }

            nav ul {
                gap: 15px;
            }

            h1 {
                font-size: 2.2rem;
            }
        }