/*  *********************************************************************************** 
    6KA Softwareentwicklung und Digitalisierung                                      
    htcbau.de                                                                        

    Viewport-Priorisierung (Screen Size Prioritization): Desktop first
    style.css - v1.0.1 - 27.01.2026                                                 
    ************************************************************************************/

/*  ************************************************************************************
    System - Grundeinstellungen / System - Basic settings
    ************************************************************************************/
    @font-face  {   font-family: 'Roboto';
                    font-style: normal;
                    font-weight: 500; 
                    
                    src: url('fonts/roboto-v50-latin-500.woff2') format('woff2'); 
                    font-display: swap; }

        
    @font-face  {   font-family: 'Roboto';
                    font-style: normal;
                    font-weight: 700; 
                    
                    src: url('fonts/roboto-v50-latin-700.woff2') format('woff2');
                    font-display: swap; }

    :root   { 
            --htc_primary: #fc8f00;        
            --htc_primary_marker: #ff9102; 
            --htc_secondary: #ffcc00;     
            --htc_dark: #333333;          
            --htc_white: #ffffff;
            --htc_bg_light: #f8f8f8;
            --htc_text: #333333;
            --htc_transition: all 0.3s ease;

            /*  *********************************
                HEAD
                *********************************/
            --htc_container_head_w: 100%;
            --htc-header-offset: 24px;          /* Desktop-Wert: Sprungmarke dynamisch anpassen */

            /*  *********************************
                Main
                *********************************/
            --htc_container_w: 1200px; }

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

    html    {
            scroll-behavior: smooth; 
            font-size: 16px; }

    body    {
            font-family: 'Roboto', sans-serif;
            color: var(--htc_text);
            background-color: var(--htc_white);
            line-height: 1.6; }

    h1, h2, h3, h4 {
            font-weight: 900;
            text-transform: uppercase;
            color: var(--htc_dark); }

    a       {
            text-decoration: none;
            transition: var(--htc_transition); }

    ul      {
            list-style: none; }

    img     {
            max-width: 100%;
            display: block;
            border-radius: 4px; }

/*  ************************************************************************************
    HEADER Grundeinstellungen - Basic settings
    ************************************************************************************/
    #htc_header {
            background: var(--htc_white);
            padding: .3rem 1.2rem .3rem 1.2rem;            
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1); }

    #htc_ueber_uns,
    #htc_leistungen,
    #htc_maschinen,
    #htc_referenzen,
    #htc_kontakt {
            scroll-margin-top: var(--htc-header-offset); }

    .htc_header_container {
            max-width: var(--htc_container_head_w);
            width: 90%;
            margin: 0 auto; }

    .htc_nav_flex {
            display: flex;
            justify-content: space-between;
            align-items: center; }

    .htc_logo {
            max-width: 15rem;
            transition: var(--htc_transition); }

    .htc_logo img {
            height: 4rem; }

    .htc_logo span {
            color: var(--htc_primary); }

    .htc_nav_list {
            display: flex;
            gap: 2rem; }

    .htc_nav_link, 
    .htc_nav_link_marker {
            font-weight: 700;
            font-size: 0.85rem;
            text-transform: uppercase;
            color: var(--htc_dark); }

    .htc_nav_link:hover {
            color: var(--htc_primary); }            

    .htc_nav_link_marker {
            text-decoration: underline;
            text-underline-offset: 0.25em; 
            text-decoration-color: #000000;   
            text-decoration-thickness: 2px;   
            text-underline-offset: 4px;       
            transition: all 2s;
            color: var(--htc_primary_marker); }            

/*  ************************************************************************************
    RESPONSIVE Desktop first
    ************************************************************************************/
    @media (max-width: 1100px) {

        :root {
                --htc-header-offset: 48px; }

        .htc_nav_flex { 
                flex-direction: column; 
                align-items: flex-start; } 

        #htc_main_nav { 
                margin-top: .5rem;
                margin-bottom: .5rem; }
    }

    @media (max-width: 768px) {

        :root {
                --htc-header-offset: 60px; }

        .htc_logo {
            max-width: 14rem;
            transition: var(--htc_transition); 
            margin-right: 2rem; }

        .htc_logo img {
                height: 4rem; }

        .htc_nav_list{
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 2px 14px; /* Zeile / Spalte */ }

        .htc_nav_flex { 
                flex-direction: row; } 

        #htc_main_nav { 
                margin-top: 1rem;
                margin-bottom: 0.5rem; }
    }

    @media (max-width: 680px) {

        .htc_logo {
            max-width: 12rem;
            transition: var(--htc_transition); 
            margin-right: 2rem; }
    }

    @media (max-width: 580px) {

        :root {
                --htc-header-offset: 72px; }

        .htc_nav_list {
                flex-direction: column; 
                grid-template-columns:none; 
                gap: 2px 14px;}
    }

    @media (max-width: 420px) {

        .htc_logo {
            max-width: 10rem;
            transition: var(--htc_transition); 
            margin-right: 2rem; }
    }













        



        .htc_container {
            max-width: var(--htc_container_w);
            width: 90%;
            margin: 0 auto; }

        /* HERO SECTION */
        #htc_hero {
            height: 90vh;
            min-height: 600px;
            background: linear-gradient(rgba(51, 51, 51, 0.75), rgba(51, 51, 51, 0.5)), 
                        url('../img/landing.avif') center/cover no-repeat;
            display: flex;
            align-items: center;
            color: var(--htc_white);
            text-align: center;
        }

        .htc_hero_content {
            max-width: 850px;
            margin: 0 auto;
        }

        .htc_hero_h1 {
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            margin-bottom: 1.5rem;
            color: var(--htc_white);
        }

        .htc_hero_h1 span {
            color: var(--htc_secondary);
        }

        .htc_hero_p {
            font-size: 1.4rem;
            margin-bottom: 2.5rem;
            font-weight: 300;
            opacity: 0.9;
        }

        /* BUTTONS */
        .htc_btn_group {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .htc_btn {
            padding: 1rem 2.5rem;
            font-weight: 900;
            text-transform: uppercase;
            font-size: 0.9rem;
            border-radius: 4px;
            display: inline-block;
        }

        .htc_btn_primary {
            background: var(--htc_primary);
            color: var(--htc_white);
        }

        .htc_btn_primary:hover {
            background: var(--htc_secondary);
            color: var(--htc_dark);
        }

        .htc_btn_outline {
            border: 2px solid var(--htc_white);
            color: var(--htc_white);
        }

        .htc_btn_outline:hover {
            background: var(--htc_white);
            color: var(--htc_dark);
        }

        /* SEKTIONEN */
        .htc_section {
            padding: 100px 0;
        }

        .htc_section_light {
            background-color: var(--htc_bg_light);
        }

        .htc_h2 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            color: var(--htc_dark);
            position: relative;
            padding-bottom: 15px;
        }

        .htc_h2::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 80px;
            height: 6px;
            background: var(--htc_primary);
        }

        /* GRÜNDER / VISION */
        .htc_grid_2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .htc_founder_image_box {
            position: relative;
        }

        .htc_founder_image_box img {
            width: 100%;
            border-radius: 8px;
            box-shadow: 25px 25px 0 var(--htc_dark);
        }

        .htc_quote_box {
            background: var(--htc_white);
            padding: 2.5rem;
            border-left: 8px solid var(--htc_primary);
            margin: 2rem 0;
            font-style: italic;
            font-size: 1.25rem;
            font-weight: 500;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        }

        /* WERTE GRID */
        .htc_grid_3 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
            margin-top: 4rem;
        }

        .htc_value_card {
            background: var(--htc_white);
            padding: 4rem 2rem;
            text-align: center;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            transition: var(--htc_transition);
        }

        .htc_value_card:hover {
            transform: translateY(-10px);
        }

        .htc_icon_xl {
            font-size: 4rem;
            margin-bottom: 1.5rem;
            display: block;
        }

        /* MASCHINENPARK */
        .htc_machine_grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
            gap: 1.5rem;
            margin-top: 3rem;
        }

        .htc_machine_card {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            aspect-ratio: 16/9;
        }

        .htc_machine_card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .htc_machine_overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(transparent, rgba(51, 51, 51, 0.95));
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 2rem;
            color: var(--htc_white);
        }

        .htc-card{
            color: var(--htc_white);
        }

        .htc_machine_card:hover img {
            transform: scale(1.1);
        }

        /* REFERENZEN */
        .htc_ref_list {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .htc_ref_item {
            background: var(--htc_white);
            padding: 2rem 3rem;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-left: 8px solid var(--htc_primary);
            box-shadow: 0 4px 15px rgba(0,0,0,0.04);
        }

        .htc_ref_year {
            font-weight: 900;
            color: var(--htc_primary);
            font-size: 1.5rem;
        }

        /* FOOTER */
        #htc_footer {
            background-color: var(--htc_dark);
            color: var(--htc_white);
            padding: 80px 0 30px;
        }

        .htc_footer_grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 4rem;
            margin-bottom: 4rem;
        }

        .htc_footer_h4 {
            color: var(--htc_primary);
            margin-bottom: 1.5rem;
        }

        .htc_footer_text {
            opacity: 0.7;
            font-size: 0.95rem;
            margin-bottom: 0.8rem;
        }

        .htc_footer_link {
            color: var(--htc_white);
            opacity: 0.7;
            display: block;
            margin-bottom: 0.6rem;
        }

        .htc_footer_link:hover {
            color: var(--htc_primary);
            opacity: 1;
        }

        #htc_copyright {
            color: var(--htc_text);
            border-top: 1px solid rgba(255, 255, 255, 0.91);
            padding-top: 25px;
            padding-bottom: 10px;
            text-align: center;
            font-size: 0.8rem;
            opacity: 0.8;
        }

        /* RESPONSIVE */
        @media (max-width: 1100px) {
            .htc_grid_2, .htc_footer_grid { grid-template-columns: 1fr; }
            
            .htc_h2 { font-size: 2rem; }
            .htc_btn_group { flex-direction: column; }
            .htc_btn { width: 100%; text-align: center; }
        }