/* TODO */
/* 
    Phasen richtig formatieren, mit Rand (bei ipad) 
    Responsive alles
    Kontakt richtig
    clean code
    Beschreibung richtig
    neues richtiges video
    mehr abstand stats
    teammitgliedder mehr abstand
    beschreibung -> mehr abstand
    evt. Startfoto*/
   


   
   /* Grundkonfiguration & Variablen */
        :root {
            --primary: #007abc;
            --dark: #333;
            --white: #ffffff;
            --bg-light: #f9f9f9;
            --p1: linear-gradient(to top right, #006DAB 25%, #007ABC 50%, #5BAFE6);
            --p2: linear-gradient(to top right, #EB5D26 25%, #EE7327 50%, #F89355);
            --p3: linear-gradient(to top right, #78B242 25%, #92C24B 50%, #78B242);
            --p4: linear-gradient(to top right, #F6C021 25%, #FFD700 50%, #FFE559);
        }

        @font-face {
            font-family: 'Gilam';
            src: url(./GilamFont/GilamRegular.otf) format("opentype");
            font-weight: 500;
            font-display: swap;
        }

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

        body {
            font-family: 'Gilam', sans-serif;
            color: var(--dark);
            line-height: 1.6;
            background: #f4f4f4;
        }

        button{
            text-transform: uppercase;
        }

        /* NAVIGATION */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 70px;
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(10px);
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        header > div {
            max-width: 100%;
            margin: 0 auto;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2rem;
        }

        header img { height: 20px; }

        header nav ul {
            display: flex;
            gap: 2rem;
            list-style: none;
            align-items: center;
        }

        html{
            scroll-behavior: smooth;
        }


        header nav a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 500;
            font-size: 1rem;
            padding: 5px 0;
            position: relative;
        }

        header nav a::after {
            content: '';
            display: block;
            width: 0%;
            height: 3px;
            background: var(--primary);
            transition: width 0.3s;
            position: absolute;
            bottom: -5px;
            left: 0;
        }

        header nav a:hover::after { width: 100%; }


        section:first-of-type h1 { font-size: 3.5rem; margin-bottom: 1rem; }

        /* TITEL SECTION */
        section#nav-text {
            position: relative;
            height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding: 0 2rem;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
        }

        /* Farb-Overlay */
        section#nav-text::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(
                rgba(0,122,188,0.6),
                rgba(0,0,0,0.5)
            );
            z-index: 2;
        }

        /* Text über dem Bild */
        section#nav-text > div {
            position: relative;
            z-index: 3;
        }

        section#nav-text h1 {
            font-size: 3rem;
            text-shadow: 1px 1px 10px rgba(0,0,0,0.5);
        }

        section#nav-text p {font-size: 1.5rem; margin-bottom: 2rem;}
        section#nav-text button {
            width: 200px;
            height: 47px;
            border-radius: 5px;
            background: white;
            color: var(--primary);
            font-size: 1.2rem;
            padding: 2px;
            box-sizing: border-box;
            border: none;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.25);
        }

        section#nav-text button:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.35);
        }

        section.nav-text p {
            max-width: 700px;
            font-size: 1.1rem;
            line-height: 1.7;
            text-shadow: 1px 1px 8px rgba(0,0,0,0.4);
        }

        /* INTRO TEXT */
        section#intro-text {
            padding: 120px 2rem 80px;
            background: white;
        }

        section#intro-text > div {
            max-width: 900px;
            margin: 0 auto;
        }

        section#intro-text h2 {
            font-size: 2.2rem;
            color: var(--primary);
            margin-bottom: 30px;
        }

        section#intro-text p {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 20px;
            color: #444;
        }

        section#intro-text strong {
            color: var(--dark);
        }

        /* Section Beschreibung */
        section#beschreibung {
            padding: 80px 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        section#beschreibung #beschreibung-grid {
            display: flex;
            flex-direction: column;
            gap: 6rem;
        }

        #vergleich-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            align-items: stretch;
        }


        #vergleich-grid > div{
            display: flex;
            flex-direction: column;
            text-align: left;
            justify-content: space-between;
        }
        #vergleich-grid img{
            margin: 50px 0px;
            box-sizing: border-box;
            width: 100%;
            height: 100%; 
            max-height: 400px;
            object-fit: contain;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .alt img{
            padding: 20px 0px;
        }

        .neu img{
            padding-left: 3%;
        }

        #story-grid {
            display: grid;
            grid-template-columns: 0.7fr 1.3fr;
            grid-template-rows: auto auto;
            gap: 2rem;
            align-items: start;
        }

        .figur{
            grid-row: 1 / span 2;
        }

        .sprechblase{
            grid-row: 1;
        }

        .strasse{
            grid-row: 2;
        }

        .sprechblase blockquote {
            position: relative; /* nötig für das Dreieck */
            background: var(--bg-light);
            border: 2px solid var(--primary);
            padding: 20px;
            border-radius: 8px;
            max-width: 90%;
        }

        /* Dreieck nach links unten zeigend */
        .sprechblase blockquote::after {
            content: "";
            position: absolute;
            bottom: 0px;     
            left: -25px;    
            width: 0;
            height: 0;
            border-top: 20px solid transparent;   
            border-bottom: 30px solid transparent; 
            border-right: 25px solid var(--primary); 
        }


        /* Strasse Auto Animation */
        #strasse-container {
            margin: auto 0;
        }

        #strasse-container svg {
            width: 100%;
            height: auto;
            display: block;
        }


        #auto{
            position: absolute;
            width:  clamp(60px, 6vw, 100px);
            top: 0;
            left: 0;
            
            offset-path: path("M 79 15.5 S 76 16.7 72.9 17.3 S 66 19.8 58 22.8 S 43 32 38.3 36 S 30 45.4 26.5 51.5 S 21.3 61.8 19.5 67 S 16.8 78.8 15.8 87.3 S 16.3 107.3 16 107.3 S 17.8 127.3 17.8 127.3 S 22.8 137.8 29.3 147.3 S 43.3 159.8 43.3 159.8 S 56.5 169.8 64.8 173.3 S 80.8 176.8 81.3 176.8 S 100.3 179.8 101.3 179.8 S 116.3 180.8 116.8 180.8 S 144.3 177.8 144.8 177.8 S 173.3 174.8 173.3 174.8 S 209.3 169.8 209.3 169.8 S 235.8 166.8 235.8 166.8 S 263.8 163.8 263.8 163.8 S 293.3 160.3 293.3 160.3 S 319.3 156.8 319.3 156.8 S 342.8 154.8 342.8 154.8 S 369.8 153.8 370.8 153.8 S 402.3 153.8 402.3 153.8 S 410.8 153.8 419.5 154.5 S 441.3 155.8 442.8 155.8 S 466.8 159.3 468.3 159.3 S 491.5 166.8 496.8 167.3 S 514.8 170.8 514.8 170.8 S 541.8 178.3 542.3 178.3 S 567.8 184.8 567.8 184.8 S 596.8 189.8 596.8 189.8 S 625.8 193.3 625.8 193.3 S 656.3 189.3 656.3 189.3 S 664.8 185.5 675.3 179.5 S 689.3 165.3 689.3 165.3 S 699.8 145.8 697.3 152 S 701 133 700.8 125.3 S 697.3 99.3 697.3 99.3 S 691.5 87.5 678.8 76.3 S 656.5 64.3 644 60.5 S 617 60.3 606.8 58.3 S 581.8 57.8 580.8 57.8 S 568.8 57.8 561.8 57.8 S 534.8 57.3 533.8 57.3 S 508.3 57.3 507.3 57.3 S 483.3 58.8 483.3 58.8 S 467.8 59.3 458 60 S 421.3 60.3 420.8 60.3 S 397.8 61.3 397.3 61.3 S 372.8 61.8 371.3 61.3 S 339.3 61.3 339.3 61.3 S 304.3 58.3 304.3 58.3 S 272.3 51.5 266.5 49.5 S 238.8 43.5 231.3 41.8 S 208.8 37.3 208.8 37.3 S 182.3 29.3 182.3 29.3 S 148.3 19.8 148.3 19.8 S 121.3 14.3 121.3 14.3 S 107.3 10.8 97.8 11.8 S 83.4 15 78.9 15.4");
            animation: drive 12s linear infinite;
        }

        @keyframes drive {
        from {
            offset-distance: 0%;
        }
        to {
            offset-distance: 100%;
        }
        }


        /* PHASEN */
        
        #phases-section {
            padding: 80px 5rem;
            background: #f9f9f9;
        }

        #phases-section h2 {
            font-size: 2rem;
            margin-bottom: 40px;
            color: var(--primary);
            text-align: center;
        }

        .phases-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            align-items: stretch;
        }

        .phase-card {
            border-radius: 5px;
            overflow: hidden;
            background: white;
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .phase-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }

        .phase-header {
            padding: 12px 20px;
            font-size: 1.1rem;
            color: white;
        }

        .phase-img-box { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; }
        .phase-img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }

        .phase-overlay {
            position: absolute;
            bottom: -100%;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.55);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 15px;
            font-size: 0.95rem;
            transition: bottom 0.4s ease-out;
        }

        .phase-card:hover .phase-overlay { bottom: 0; }
        .phase-card:hover img { transform: scale(1.1); }

        .bg-blue { background: var(--p1); }
        .bg-orange { background: var(--p2); }
        .bg-green { background: var(--p3); }
        .bg-yellow { background: var(--p4); }

        /* FEATURES */
        section#features {
            padding: 100px 2rem;
            max-width: 900px;
            margin: 0 auto;
        }

        section#features h2 {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 50px;
            color: var(--primary);
        }

        section#features ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        section#features li {
            display: flex;
            gap: 20px;
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        section#features li:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0,0,0,0.1);
        }

        section#features img {
            width: 60px;
            height: 60px;
        }

        section#features strong { font-size: 1.1rem; margin-bottom: 5px; display: block; }

        /* AUFTRAGGEBER */
        section#auftraggeber {
            background: var(--dark);
            color: white;
            padding: 80px 2rem;
            display: flex;
            justify-content: center;
        }

        section#auftraggeber div {
            max-width: 1000px;
            display: flex;
            align-items: center;
            gap: 60px;
        }

        section#auftraggeber img { filter: brightness(0) invert(1); height: 50px; }

        section#auftraggeber blockquote {
            font-style: italic;
            font-size: 1.2rem;
            border-left: 5px solid var(--primary);
            padding-left: 20px;
        }

        #auftraggeber {
            scroll-margin-top: 80px;
        }

        /* STATISTIK */
        #stats-section {
            display: flex;
            justify-content: center;
            padding: 150px 2rem;
            background: #f4f4f4;
        }

        .stats-container {
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
            justify-content: center;
        }

        .stat-card {
            background: white;
            border-radius: 5px;
            padding: 2.5rem 2rem;
            width: 220px;
            text-align: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .stat-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }

        .stat-number { font-size: 2.5rem; font-weight: 800; color: var(--primary); margin-bottom: 0.5rem; }
        .stat-description { text-transform: uppercase; letter-spacing: 1px; font-size: 1rem; color: #555; }

        /* VIDEO */
        section#video {
            padding: 50px 2rem;
            padding-bottom: 100px;
            text-align: center;
        }

        section#video h2 { font-size: 2rem; margin-bottom: 40px; color: var(--primary); }
        section#video div { max-width: 900px; margin: 0 auto; aspect-ratio: 16/9; }

        /* SECTION FOOTER */
        section#footer {
            padding: 100px 2rem;
            text-align: center;
            background: var(--dark);
            clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
        }

        section#footer h2 { font-size: 2.5rem; margin-bottom: 20px; color: var(--bg-light); }
        section#footer p { font-size: 1.2rem; margin-bottom: 40px; color: var(--bg-light); }

        section#footer button {
        background: var(--primary);
        color: white;
        border: none;
        padding: 20px 50px;
        font-size: 1.2rem;
        font-weight: bold;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
        box-shadow: 0 10px 30px rgba(0,122,188,0.3);
        }

        section#footer button:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,122,188,0.5);
        }


        /* SECTION CONTACT */
        section#contact{
            margin-bottom: 100px;
        }

        section#contact h2 {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 50px;
            color: var(--primary);
        }


        section#contact > .contact-container{
            display: flex;
            flex-direction: row;
            gap: 10rem;
            flex-wrap: wrap;
            justify-content: center;
            text-align: center;
        }

        section#contact > .contact-container img{
            width: 15rem;
            height: auto;
            border-radius: 5px;
        }


 


        /* RESPONSIVE */
        @media (max-width: 970px) {
            .phases-grid { grid-template-columns: repeat(2, 1fr); }
            section#beschreibung > div:first-child { grid-template-columns: 1fr; gap: 50px; }
            header > div { flex-direction: row; align-items: center; gap: 10px; }
            header nav ul { flex-direction: row; gap: 10px; width: 100%; }
            header nav a {
                display: block;
                width: 100%;
                padding: 0.75rem 0;
                font-size: clamp(1rem, 4vw, 1.1rem);
            }

            section#beschreibung {
                padding: 60px 1.5rem;
            }

            section#beschreibung > div:first-child {
                gap: 24px;
            }

            #vergleich-grid .alt img{
                padding: 10px;
            }

            #vergleich-grid img {
                max-height: none;  /* Bilder skalieren proportional */
                width: 100%;
                height: auto;
            }

            blockquote {
                font-size: 0.95rem;
            }

            section#auftraggeber {
                padding: 60px 1.5rem;
            }

            section#auftraggeber div {
                gap: 40px;
            }

            section#auftraggeber img {
                height: 35px;
            }

            section#auftraggeber blockquote {
                font-size: 1.05rem;
            }

            section#nav-text {
                height: auto;
                min-height: 80vh;
                padding: 0 1.5rem;
            }

            section#nav-text h1 {
                font-size: 2.4rem;
            }

            section#nav-text p {
                font-size: 1.3rem;
            }

            section#nav-text button {
                width: 180px;
                height: 44px;
                font-size: 1.1rem;
            }

            section#intro-text {
                padding: 100px 1.5rem 60px;
            }

            section#intro-text h2 {
                font-size: 1.9rem;
            }

            section#intro-text p {
                font-size: 1.05rem;
            }

            section#contact > .contact-container{
                gap: 5rem;
                flex-direction: column;
            }
        }


        @media (max-width: 600px) {
            section#auftraggeber {
                padding: 60px 1.5rem;
            }

            section#auftraggeber div {
                flex-direction: column;
                text-align: center;
                gap: 30px;
            }

            section#auftraggeber img {
                height: 35px;
                width: 90%;
            }

            section#auftraggeber blockquote {
                font-size: 1.05rem;
                border-left: none;
                border-top: 3px solid var(--primary);
                padding-left: 0;
                padding-top: 20px;
            }
            .phases-grid { grid-template-columns: 1fr; }
            #phases-section {
                padding: 80px 2rem;
            }

            section#features ul { gap: 20px; }
            section#features li { flex-direction: column; align-items: center; text-align: center; }
            section#features img { margin-bottom: 10px; }
             


            header img { height: 12px; }


            /* Beschreibung */
            #vergleich-grid {
                grid-template-columns: 1fr;
                order: 1;
            }

            #vergleich-grid img {
                height: auto;
                object-fit: contain;
            }

            #vergleich-grid .alt img{
                padding: 20px;
            }
            
            #vergleich-grid .neu img{
                padding: 20px 0px;
            }

            #story-grid {
                display: grid;
                grid-template-columns: 0.6fr 0.4fr; 
                grid-template-rows: auto; 
                gap: 1.5rem;
                order: 2;
            }

            .strasse { 
                grid-row: 3; 
                grid-column: 1 / -1 ;
            }

            /* .sprechblase blockquote::after {
                top: auto;
                bottom: -20px; 
                left: 50%; 
                transform: translateX(-50%);
                border-top: 20px solid var(--primary); 
                border-bottom: 0; 
                border-left: 20px solid transparent; 
                border-right: 20px solid transparent;
            } */

            .sprechblase blockquote::after {
                top: 50%;
                transform: translateY(-50%);
            }

            blockquote {
                font-size: 0.9rem;
                padding: 15px;
            }

            /* NAV TEXT */
            section#nav-text {
                min-height: 100vh;
                padding: 0 1.2rem;
            }

            section#nav-text h1 {
                font-size: 2rem;
                line-height: 1.2;
            }

            section#nav-text p {
                font-size: 1.1rem;
                margin-bottom: 1.5rem;
            }

            section#nav-text button {
                width: 100%;
                max-width: 280px;
                height: 48px;
                font-size: 1.1rem;
            }

            /* INTRO */
            section#intro-text {
                padding: 90px 1.2rem 50px;
            }

            section#intro-text h2 {
                font-size: 1.6rem;
                line-height: 1.3;
            }

            section#intro-text p {
                font-size: 1rem;
            }

            /* Contact */
            section#contact > .contact-container{
                gap: 5rem;
            }

            section#footer h2 { font-size: 1.8rem; }
            section#footer p { font-size: 1rem; }

            section#footer button {
                padding: 20px 30px;
                font-size: 1rem;
                }

           
                
            }