/* =======================================
   Variablen und Basis-Styles
======================================= */
:root {
    /* Farbvariablen als zentrale Steuerung der Farben */
    --primary-color: #1d1e1c;
    --secondary-color: #f9f9f9;
    /* --primary-color: #f9f9f9;  */
    /* --secondary-color: #1d1e1c; */
    --primary-highlight: #ef8e02;
    --secondary-highlight: #38cbb8;
    --primary-background: #000000;
    
    /* Max- und Min-Breiten zur Begrenzung des Layouts */
    --max-width: 1480px;
    --min-width: 30px; /* Kleinere Mindestbreite fuer mobile Geraete */
}

/* Moderner CSS Reset: Box-Sizing auf border-box setzen fuer einfachere Breitenberechnung */
html {
    box-sizing: border-box;
    /* overflow-x: hidden;  */
    /* Verhindert horizontales Scrollen global */
}

/* Alle Elemente erben Box-Sizing, Raender und Abstaende werden auf 0 gesetzt */
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

/* =======================================
   Layout und Container
======================================= */
body {
    /* Grid Layout mit 3 Reihen (Header, Content, Footer) */
    display: grid;
    grid-template-rows: auto auto 1fr;

    /* Typografie-Einstellungen */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--secondary-color);
    background-color: var(--primary-background);

    /* Mindesthoehe fuer viewport Hoehe sicherstellen */
    min-height: 100vh;
    /* overflow-x: hidden;  */
    /* Absicherung gegen horizontalen Ueberlauf */
}

body h1 {
    font-family: 'Archivo', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 2.4rem;
    line-height: 1.1;
    margin: 20px 0;
}

body h2 {
    font-family: 'Archivo', Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size:  1.6rem;
    margin: 20px 0;
}

body h3 {
    font-family: 'Archivo', Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size:  1.2rem;
}

body p {
    font-family: Helvetica, Arial, sans-serif;
    font-size:  1.2rem;
    line-height: 1.6;
    margin: 20px auto;
}



/* Link Styling ohne Unterstreichung und mit Transition fuer Hover-Effekt */
a {
    text-decoration: none;
    color: var(--secondary-color);
    transition: color 0.3s ease;
}

/* Listen ohne Aufzaehlungszeichen */
ul {
    list-style: none;
}

/* Klasse fuer Flexbox Layout mit zentrierter Ausrichtung */
.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Containerklasse mit max-Breite, zentriert, Farbgebung und Polsterung */
.container {
    color: var(--secondary-color);
    margin: 0 auto;
    padding: 0 20px;
    max-width: var(--max-width);
    width: 100%;
}

/* =======================================
   Navigation
======================================= */
.navbar {
    background-color: var(--primary-color);
    height: 50px;
    width: 100%;
    /* position: fixed; */
    /* z-index: 1000;  */
    /* Stellt sicher, dass die Navbar immer oben bleibt */
}

/* Flex-Ausgleich fuer Navbar und Footer: Abstand zwischen Elementen erzeugen */
.navbar .flex,
.footer .flex {
    justify-content: space-between;
}

/* Navigations- und Footer-Listen als horizontale Flex-Container */
.navbar ul,
.footer ul {   
    display: flex;
}

/* Link-Styling in Navbar und Footer mit Hover-Effekt */
.navbar a,
.footer a {
    color: var(--secondary-color);
    font-size: 0.9rem;
    margin: 0 20px;
    transition: all 0.3s ease;
}

.navbar a:hover,
.footer a:hover {
    color: var(--primary-highlight);
    border-bottom: 1px solid var(--primary-highlight);
}

/* Logo-Größe anpassen */
.logo {
    display: flex;
    height: 30px;
}

/* =======================================
   Hero-Bereich (Header mit Hintergrundbild)
======================================= */
.hero {
    display: flex;
    align-items: center;
    margin: auto;
    padding: 0 20px;
    width: 100%;
    min-height: 100vh; /* Dynamische Höhe statt fester Pixelwert */
    overflow: hidden;  /* Verhindert horizontalen Überlauf */
    /* Hintergrundbild zentriert und skaliert */
    background: url("./images/img_01.png") no-repeat center center/cover;
    background-color: #000000;
}

/* Inhalt innerhalb des Hero-Bereichs als Grid mit zwei Spalten */
.hero-content {
    /* border:2px solid green; */
    
    height: auto;              /* Kein fester Pixelwert mehr */
    margin: 0 auto;            /* Kein fester margin-top mehr */
    padding: 120px 0 60px 0;   /* Platz fuer fixe Navbar oben */
    display: grid;
    grid-template-columns: 1fr 1.5fr;  /* Nur eine Spalte – leere Spalte entfernt */
    width: 100%;
    max-width: var(--max-width);
}

/* Textcontainer ueber dem Bild */
.hero-textbox {
    /* border:2px solid orange; */
    
    height: 100%;
    text-align: right;
    width: 100%;
    display: flex; 
    flex-direction: column;
    justify-content:center;
    align-items:end;
    color: var(--primary-color);
    padding: 0 20px;
}

/* Hero-Typografie */
.hero-textbox h1 {
    margin: 0 auto;
    font-size: clamp(1.5rem, 3vw, 3rem); /* Schriftgroesse passt sich der Breite an */
    text-align: right;
    letter-spacing: 2px;
    line-height: 1;
    font-weight:300;
}

.hero-textbox h2 {
    margin: 20px 0;
    font-size: clamp(1.2rem, 2vw, 2rem); /* Schriftgroesse passt sich der Breite an */
    line-height: 1.2;
}



/* =======================================
   DfAM-Bereich (Header mit Hintergrundbild)
======================================= */
.dfam {
    display: grid;
    grid-template-columns: 1fr;

    text-align: left;
    margin: 100px auto;
    min-width: none;
    max-width: 800px;
}

.dfam .btn{
    /* align-self: center; */
    color: var(--secondary-color);
}

/* .margin120-top-bottom {margin:120px auto;} */

.section-header {
    margin-top: 120px;

}
.section-title {
    margin: 0;
}
  /* ─── SUSTAINABILITY ─── */
  .sustainability {
    margin: 0 auto;
  }

.sustain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 60px;
    background: var(--primary-background);
  }

.sustain-card {
    
    /* border: 2px solid white; */
    background: var(--primary-color);
    padding: 24px 24px;
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* position: relative; */
    overflow: hidden;
    transition: ease 0.3s;
  }

.sustain-card:hover {
    /* color:var(--secondary-highlight); */
    scale: 0.97;
    /* background: var(--secondary-highlight); */
  }

.sustain-icon {
    width: 100px;
    height: 100px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 26px;
    /* border:2px solid green; */
  }

.sustain-card img {
    height: 90px;
    
  }

.sustain-card h3 {
    font-size:1.2rem;
    font-weight: 300;
    /* letter-spacing: -0.5px; */
    margin-bottom: 12px;
  }

.sustain-card p {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255,255,255,0.55);
  }


.image_middle {
    margin:0 auto; 
    max-width: 1000px;
}

.usecase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 60px;

    }

.usecase-card {
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    height: 600px;
}

.usecase-image img{
    height: 800px;
}




  /* section 2 column */

.section-two-column {
    background-color: #000;

    padding:120px 0;    
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 30px;
    width: 100%;  /* Verhindert Ueberlauf des Grid-Containers */
}

.section-two-column-title {
    /* align-self: flex-start; */
    /* width: 30vw; */
    /* margin:0 40px; */
    text-align: center;
}
.section-two-column-text {
    margin: 0 20px; 
    /* Reduzierter Abstand, kein fester vw-Wert */
}


 /* Section Gripper */

.gripper {
    background-color: var(--primary-color);
    padding:30px 0;
}

.gripper h1 {
    margin:0;
}

.gripper-image {
    width: 100%;
    display: block;       
    /* Verhindert unerwuenschten Whitespace unter dem Bild */
    object-fit: cover;
}


/* =======================================
   CTA Button
======================================= */
.btn {
    margin-top: 40px;
    margin-right: 20px;
    padding: 16px 48px;
    max-width: 280px;
    border: 2px solid var(--primary-highlight);
    border-radius: 3px;
    color: #000;
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.3s ease; /* Transition im Grundzustand definieren */
    /* background-color: var(--secondary-color); */
    background-color: none;
    cursor: pointer;
}

.flex .btn {
    height: auto;
}

/* Hover-Effekt fuer den Button: Farbe aendern, Schatten hinzufuegen und Transformation*/
.btn:hover {
    background: var(--primary-highlight);
    color: var(--secondary-color);
    transform: translateY(-2px) scale(0.97);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.20);
}

/* =======================================
   Footer
======================================= */
.footer {
    background-color: var(--primary-color);
    min-height: 120px;
}

.footer p {
    font-size: 0.9rem;
}

/* =======================================
   Unterseiten
======================================= */
.impressum {
    grid-template-rows: auto 1fr auto;
    
    max-width: 1000px;
    margin: 100px auto;
    /* padding: 60px 5%; */
}

.impressum h1 {
    font-size: 4rem;
    font-weight: 300;
    margin: 60px 0;
}

.impressum h2 {
    margin: 20px 0;
}

.impressum p {
    font-size: 1rem;
    margin: 20px 0;
}




/* =======================================
   Media Queries fuer Responsives Design
======================================= */
@media (max-width: 760px) {

    body h1 {font-size: 1.8rem;}
    body h2 {font-size: 1.2rem;}
    body h3 {font-size: 1rem;}

    body p {font-size: 1rem;}


    /* Anpassungen fuer kleine Bildschirme */
    .hero {
        width: 100%;
        padding: 20px 0;
        min-height: 100svh; /* Auf Mobile: small viewport height fuer korrekte Hoehe */
    }

    .hero-content {
        grid-template-columns: 1fr;
        margin: 0 auto;
        padding: 120px 20px 60px 20px;
    }

    .hero-textbox {
        text-align: center;
        align-items: center;
        margin:auto;
        width: 80vw;
        padding: 0;
    }

    .navbar .flex,
    .footer .flex {
        flex-direction: column;
        padding: 10px 0;
    }

    .navbar {
        height: auto;
    }

    .navbar ul,
    .footer ul {
        margin-top: 15px;
        flex-direction: column;
        text-align: center;
    }

    .navbar li,
    .footer li {
        margin: 5px 0;
    }

    .footer p {
        margin: 10px 0;
    }
    
    /* Schriftgroessen und Padding fuer mobile Endgeraete anpassen */
    
    .hero-textbox h1 {
        text-align: center;
    }

    .sustain-grid { grid-template-columns: 1fr; }

    .sustain-card img {height: 80px;}

    .section-two-column {
        grid-template-columns: 1fr;
}
    
    .btn {
        margin-right: 0;    /* Kein rechter Aussenabstand auf Mobile */
        margin-left: 0;     /* Kein linker Aussenabstand auf Mobile */
        padding: 12px 36px;
        width: 100%;        /* Volle Breite auf Mobile */
        max-width: 280px;
        text-align: center;
    }

    .impressum {
        margin: 60px auto;
        padding: 60px 20px;
    }

    .impressum h1 {
        font-size: 2.4rem;
    }

}