/* --- BASIS & RESET --- */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box; /* Wichtig für moderne Layouts */

}



body {

    background-color:#e3fae3 !important;

    background: #f0f7f0 url('img/bg.gif'); /* Dein helles Bio-Grün */

    color: #333;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    font-size: 16px; /* Größer für bessere Lesbarkeit 2026 */

    line-height: 1.6;

}



a {

    color: #2e7d32;

    text-decoration: none;

    transition: 0.3s;

}



a:hover {

    color: #1b5e20;

    text-decoration: underline;

}







/* --- STRUKTUR --- */

.container {

    max-width: 1150px; /* Breiter für moderne Monitore */

    margin: 20px auto;

    background: #fff;

    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

    border-radius: 12px;

    overflow: hidden;

}



/* Header Bild */

.header {

    background: url('imgheaders/Schmuinzlar.png') center center no-repeat;

    background-size: cover; /* Füllt den Bereich aus */

    display: flex;

    align-items: center;

    justify-content: center;

    height: 300px; 

    width: 100%;

    border-bottom: 3px solid #2e7d32; /* Schöner grüner Abschluss */

}



.header h1 {

    color: #fff;

    font-size: 3.5rem;

    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);

    background: rgba(0,0,0,0.2);

    padding: 20px 40px;

    border-radius: 10px;

}



/* --- NAVIGATION OBEN --- */

.navigation {

    display: flex;

    background: #4A91C3;

}



.navigation a {

    flex: 1;

    color: #fff;

    padding: 15px;

    text-align: center;

    font-weight: bold;

    border-right: 1px solid rgba(255,255,255,0.2);

}



.navigation a:hover {

    background: #27ae60;

    text-decoration: none;

}



/* --- MAIN LAYOUT (FLEXBOX) --- */

/* --- NEUE NAVIGATION (OVERLAY) --- */

.main {

    display: block; /* Flexbox weg, damit Content die volle Breite nutzt */

    padding: 20px;

    position: relative;

}



.sidenav {

    position: fixed; /* Klebt am Bildschirmrand */

    left: -280px;    /* Startet versteckt außerhalb des Sichtfelds */

    top: 0;

    width: 280px;

    height: 100%;

    background: #fff;

    box-shadow: 5px 0 15px rgba(0,0,0,0.2);

    z-index: 999;    /* Liegt über allem */

    transition: 0.4s; /* Schiebt sich weich rein */

    padding: 20px;

}



/* Wenn das Menü aktiv ist */

.sidenav.open {

    left: 0;

}



/* Der Button zum Öffnen */

.menu-toggle-btn {

    position: fixed;

    top: 20px;

    left: 20px;

    z-index: 1000;

    background: #2e7d32;

    color: white;

    border: none;

    padding: 10px 15px;

    border-radius: 5px;

    cursor: pointer;

    font-weight: bold;

    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}



/* Der Hintergrund wird dunkel, wenn Menü offen ist */

.overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,0.5);

    z-index: 998;

}



.overlay.active {

    display: block;

}



/* Content nutzt nun 100% Platz */

.content {

    width: 100%;

    max-width: 1200px; /* Erhöhe diesen Wert, damit 2 Boxen Platz haben */

    margin: 0 auto;

    display: block;    /* Sicherstellen, dass hier kein altes Flex stört */

}



/* --- DROPDOWN MENÜ --- */

.dropdown-btn {

    width: 100%;

    padding: 5px;

    font-size: 1.1rem;

    font-weight: bold;

    color: #333;

    background: #eee;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 5px;

    transition: 0.2s;

}



.dropdown-btn:hover {

    background: #e0e0e0;

}



.dropdown-btn::after {

    content: '▼';

    font-size: 0.8rem;

}



.dropdown-btn.active::after {

    content: '▲';

}



.dropdown-container {

    display: none;

    list-style: none;

    padding: 5px 0 15px 15px;

}



.dropdown-container li a {

    display: block;

    padding: 8px 0;

    color: #666;

}



/* --- GALERIE / SLIDER --- */

.galerie-container {

    width: 100%;

    max-width: 280px;

    margin-bottom: 20px;

}



.hauptbild {

    width: 100%;

    height: 220px;

    background: #fff;

    border: 1px solid #ddd;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}



.hauptbild img {

    max-width: 95%;

    max-height: 95%;

    object-fit: contain;

}



.slider-steuerung {

    display: flex;

    gap: 8px;

    margin-top: 5px;

    align-items: center;

}



.vorschaubilder-wrapper {

    display: flex;

    gap: 8px;

    overflow-x: auto;

    scrollbar-width: none; /* Versteckt Scrollbar in Firefox */

}



.vorschaubilder-wrapper img {

    width: 60px;

    height: 50px;

    object-fit: cover;

    border-radius: 4px;

    cursor: pointer;

    border: 2px solid transparent;

}



.vorschaubilder-wrapper img:hover {

    border-color: #2e7d32;

}



.pfeil-btn {

    background: none ;

    color:#2e7d32;

    border: none;

    border-radius: 50%;

    width: 30px;

    height: 30px;

    cursor: pointer;

    transition: transform 0.3s ease;

    position: static;

    font-weight: 900; /* 900 ist das Maximum an Dicke */

    font-size: 1.2rem; /* Optional: Macht den Pfeil auch ein Stück größer */

    -webkit-text-stroke: 1px #2e7d32; /* Zieht eine grüne Linie um den Pfeil */

}



/* --- PRODUKTE & BOXEN --- */

.box {

    background: #ffffffde;

    border: 1px solid #b0c2b6;

    padding: 30px;

    margin-bottom: 15px;

    border-radius: 10px;

    box-shadow: 0 4px 6px rgba(0,0,0,0.02);

    display: flex;

    flex-direction: column;

}



.box:hover { transform: translateY(-5px); }



.content-fire-bg {

    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 

                url('imgheaders/hgfuir.png') center center no-repeat;

    background-size: cover;

    background-attachment: fixed; /* Das Bild bleibt beim Scrollen stehen - sehr edel! */

    padding: 40px 20px;

    border-radius: 15px;

    margin-top: 20px;

}



.produkt-vorschaubild {

    width: 100%;

    max-width: 180px;

    height: 180px;

    object-fit: cover;

    border-radius: 8px;

    border: 1px solid #eee;

}



/* --- FOOTER --- */

.footer {

    text-align: center;

    padding: 30px;

    color: #888;

    font-size: 0.9rem;

    border-top: 1px solid #eee;

}



/* --- MOBIL ANPASSUNG --- */

@media (max-width: 768px) {

    .main {

        flex-direction: column;

    }

    .header {

        height: 200px;

    }

    .header h1 {

        font-size: 2rem;

    }

    .navigation {

        flex-wrap: wrap;

    }

    .navigation a {

        width: 50%;

        border-bottom: 1px solid rgba(255,255,255,0.1);

    }

    .produkt-grid {

        grid-template-columns: 1fr; /* Nur noch eine Spalte */

    }

    .zusatz-galerie {

        flex-direction: column;

    }

    .zusatz-galerie img {

        width: 100%;

    }



}





/* ------------------ für andere seiten -------------------- */



/* Modernes Produkt-Layout ohne Tabellen */

/* --- PRODUKT LAYOUT FIX (Gegen Quetschen) --- */

.produkt-flex {

    display: flex;

    gap: 20px;

    align-items: flex-start;

    flex-wrap: wrap; 

    padding: 15px 0;

    border-bottom: 1px solid #eee; /* Trennung zwischen Produkten */

}



/* Die Button-Gruppe wird nach unten "gestoßen" */

.button-group {

    align-items: baseline;

    margin-top: auto;      /* Das drückt die Buttons automatisch ganz nach unten */

    padding-top: 15px;     /* Etwas Abstand zum Text darüber */

    display: flex;

    gap: 10px;             /* Abstand zwischen den Buttons selbst */

}

.produkt-bild {

    flex: 0 0 220px; 

    width: 220px;

    height: 220px; /* NEU: Feste Höhe für Einheitlichkeit */

    margin-left: auto;

    margin-right: auto;

    overflow: hidden; /* Schneidet Überhänge ab */

    display: flex; /* Zentriert das Bild im Container */

    align-items: center;

    justify-content: center;

    background-color: #fff; /* Optional: weißer Hintergrund falls Bild kleiner */

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

}



.produkt-bild img {

    width: 100%;

    height: 100%; /* NEU: Füllt den Container ganz aus */

    display: block;

    object-fit: cover; /* ODER 'contain', wenn du nichts abschneiden willst */

}



.produkt-info {

    padding: 10px 20px;   /* Gleichmäßiger Abstand rundherum */

   

    min-width: 300px; /* Damit der Text am Handy schön umbricht */

    list-style-position: outside; /* Standard */



    margin-left: 0;

    margin-top: 20px;

    display: flex;

    flex-direction: column;

    word-wrap: break-word;

    overflow-wrap: break-word;

    flex: 1; /* Erlaubt der Info-Box zu schrumpfen/wachsen */

    min-width: 280px; /* Verhindert, dass sie zu schmal wird */

}



.produkt-download {

    flex: 0 0 100px;

    text-align: center;

    background: #f9f9f9;

    padding: 15px 10px;

    border-radius: 12px;

    border: 1px solid #eee;

    align-self: flex-start; /* Bleibt oben ausgerichtet */

}



.produkt-download img {

    transition: transform 0.2s;

}



.produkt-download img:hover {

    transform: scale(1.1); /* Kleiner Effekt beim Drüberfahren */

}



/* ------für unterseiten vorteile aufklappen---- */

.read-more-btn {

    background: none;

    border: 1px solid #1b5e1f9a; /* 'solid' hinzugefügt */

    border-radius: 5px;

    color: #2e7d32;

    font-weight: bold;

    cursor: pointer;

    padding: 5px 10px; /* Rechts/Links etwas Puffer hinzugefügt, damit der Text nicht am Rand klebt */

    font-size: 0.9rem;

    display: block;

    margin-top: 10px;

    transition: all 0,3s;/* Weicher Übergang */

}

.read-more-btn:hover { background-color: #77f8b169; }



.produkt-bild-spalte {

    flex: 0 0 220px; 

    width: 220px;

    height: 220px; /* NEU: Feste Höhe für Einheitlichkeit */

    margin-left: auto;

    margin-right: auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 15px;

    width: 220px; /* Breite der Bilderspalte im Vollbild */

}





.read-more-btn:hover {

    text-decoration: underline;

}



.vorteils-liste span li {

    color: #555; /* Die extra Details leicht grauer, für die Optik */

}

.vorteils-liste { list-style: none; padding: 0; margin: 15px 0; }/* für schenare zeichn */

.vorteils-liste li::before { content: "✓ "; color: var(--primary-green); font-weight: bold; }

/* Container für die zwei neuen Bilder */







.zusatz-galerie {

    display: flex; /* Zentriert das Bild im Container */

    flex-direction: column;       /* Bilder untereinander */

    gap: 15px;           /* Abstand zwischen den Bildern */

    margin-top: 20px;    /* Abstand zum Text darüber */

    justify-content: center; 

}



/* Styling für die kleinen Zusatzbilder */

.zusatz-galerie img {

    flex: 0 0 220px; 

    width: 220px;

    height: 220px; /* NEU: Feste Höhe für Einheitlichkeit */

    margin-left: auto;

    margin-right: auto;

    border-radius: 8px;

    border: 1px solid #ddd;

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

    object-fit: cover;   /* Sorgt dafür, dass sie gleich groß wirken */

}







/* -----------------Der Container, der die Boxen nebeneinander hält--------------- */

.produkt-grid {

    display: grid;

    /* Wir senken das Minimum auf 280px, damit es auch auf kleinen Laptops passt */

    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); 

    gap: 20px;

    width: 100%;

    align-items: stretch; /* Macht Boxen in einer Zeile gleich hoch */

}



/* Anpassung der Boxen im Grid */

.produkt-grid .box {

    width: auto;       /* WICHTIG: Die Box muss sich dem Grid anpassen */

    min-width: 0;      /* Verhindert, dass die Box aus dem Grid "rausplatzt" */

    margin: 0;         /* Abstände macht jetzt das Grid via gap */

    margin-bottom: 0; /* Wir nutzen gap vom Grid statt margin */

    display: flex;

    flex-direction: column; /* Sorgt dafür, dass Inhalt in der Box untereinander bleibt */

    height: 100%; /* Macht alle Boxen in einer Reihe gleich hoch */

}



/* ------für unterseiten hersteller oder angebot---- */

.hersteller-button {

    background: none;

    border: 1px solid #1b5e1f9a; /* 'solid' hinzugefügt */

    border-radius: 5px;

    padding: 5px 5px; /* Rechts/Links etwas Puffer hinzugefügt, damit der Text nicht am Rand klebt wenn 10 af 0 gitou wert gehter an*/

    cursor: pointer;

    font-size: 0.9rem;

    margin-top: 10px;

    margin-right: 15px; /* Fügt rechts vom Button Platz hinzu */

}



.hersteller-button:hover { background-color: #04b4138a; }



.angebot-button {

    background: none;

    border: 1px solid #1b5e1f9a; /* 'solid' hinzugefügt */

    border-radius: 5px;

    padding: 5px 5px; /* Rechts/Links etwas Puffer hinzugefügt, damit der Text nicht am Rand klebt */

    font-weight: bold;

    cursor: pointer;

    font-size: 0.9rem;

    margin-top: 10px;

}



.angebot-button:hover { background-color: #e6d700a8; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }









/* Der Zustand, wenn die Box groß geklickt wurde */

.box.active-fullscreen {



    position: fixed;



    top: 5%;



    left: 5%;



    width: 90%;



    height: 90%;



    z-index: 9999;



    background: white;



    overflow-y: auto; /* Erlaubt Scrollen innerhalb der Box */



    padding: 40px;



    border-radius: 20px;



    box-shadow: 0 0 350px rgb(0, 0, 0);



    transition: all 0.3s ease-in-out;



}

/* 1. Den Container zwingen, den Text niemals zu überlagern */

.box.active-fullscreen .produkt-flex {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: wrap !important; /* Erlaubt Umbruch, falls die Höhe zu knapp wird */

    align-items: flex-start !important; /* WICHTIG: Richtet alles oben aus, nicht mittig! */

    height: auto !important; /* Verhindert vertikales Strecken */

}



/* 2. Die Bildergalerie in der Höhe begrenzen */

.box.active-fullscreen .produkt-bild-spalte {

    flex: 0 0 400px !important;

    max-width: 400px !important;

    height: auto !important; /* Verhindert, dass die Spalte mit der Monitorhöhe wächst */

}



/* 3. Das Hauptbild darf niemals höher als ein Teil des Bildschirms sein */

.box.active-fullscreen .hauptbild img {

    max-height: 50vh !important; /* Bild darf maximal 50% der Bildschirmhöhe einnehmen */

    width: auto !important;

    object-fit: contain !important;

}









/* für Sprachwechsel */







.lang-switch {

    display: flex;

    justify-content: space-around;

    padding: 10px 15px;

    margin-bottom: 20px;

    border-bottom: 1px solid #444; /* Trennlinie zum Menü */

}



.lang-btn {

    text-decoration: none;

    font-size: 28px; 

    margin: 0 5px;

    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));

}



.lang-btn:hover {

    transform: scale(1.2); /* Vergrößert die Flagge beim Drüberfahren */

}











/* für eingabe flächen */



.spare-parts-form {

    max-width: 500px;

    margin: 0 auto;

    text-align: left;

}



.form-group {

    margin-bottom: 15px;

}



.form-group label {

    display: block;

    font-weight: bold;

    margin-bottom: 5px;

    color: #333;

}



.form-group input[type="text"],

.form-group input[type="email"], /* NEU hinzugefügt */

.form-group input[type="number"], /* Empfohlen, falls du Zahlenfelder nutzt */

.form-group select,

.form-group textarea {

    width: 100%;

    padding: 10px;

    border: 1px solid #ccc;

    border-radius: 4px;

    font-family: inherit;

    box-sizing: border-box;

    transition: border-color 0.3s ease; /* Macht den Fokus-Wechsel weicher */

}



/* Optional: Ein einheitlicher Fokus-Zustand für ALLE Felder */

.form-group input:focus, 

.form-group select:focus, 

.form-group textarea:focus {

    border-color: #2e7d32;

    outline: none;

    box-shadow: 0 0 5px rgba(46, 125, 50, 0.3);

}



.form-group input[type="file"] {

    font-size: 0.9em;

}