/* Container für die beiden Sektionen */
.section-container {
    display: flex;
    flex-wrap: wrap; /* Erlaubt das Umfließen der Inhalte */
    margin: 20px auto;
}

/* Jede Sektion nimmt auf größeren Bildschirmen die Hälfte der Breite ein */
.section {
    flex: 1 1 50%; /* Wächst und schrumpft, nimmt aber mindestens 50% der Breite ein */
    box-sizing: border-box; /* Damit Padding und Border in die Breite inkludiert sind */
    padding: 20px;
}

/* Spezifische Anpassungen für die Karte und den Info-Bereich */
#map-section {
    min-height: 400px; /* Mindesthöhe für die Karte */
}

#map {
    height: 100%; /* Volle Höhe der Karte nutzen */
	z-index: 2;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .section {
        flex: 1 1 100%; /* Auf kleinen Bildschirmen nimmt jede Sektion die volle Breite ein */
    }
}

/* Zusätzliche Stile für bessere Visualisierung und Lesbarkeit */
.section h2, .section h3 {
    margin-top: 0;
}

.section p {
    line-height: 1.6;
    margin-bottom: 20px;
}


.product-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.product-details {
    flex: 1;
    min-width: 300px; /* Minimalbreite für die Spalten, um auf kleineren Bildschirmen zu reagieren */
    padding: 10px;
}

.product-graphics {
    flex: 1;
    min-width: 300px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Zentriert die Grafiken vertikal, wenn weniger Inhalt vorhanden ist */
}

.subsection {
    margin-bottom: 20px;
}

.subsection h3 {
    color: #ff9800; /* Farbe für die Untertitel */
    margin-bottom: 5px;
}

.subsection ul {
    list-style-type: none; /* Entfernt Bullet Points */
    padding: 0;
}

.subsection li {
    padding-left: 20px; /* Abstand für Text in der Liste */
    position: relative;
}

.subsection li i {
    position: absolute;
    left: 0;
    top: 0;
    color: #ff9800; /* Icon Farbe */
}

@media (max-width: 600px) {
    .product-layout {
        flex-direction: column; /* Stellt auf kleineren Bildschirmen auf Einzelspalten-Layout um */
    }
}


.product-graphics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.image-container {
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 0 8px 8px #1f3b5b inset;
	margin: auto;
}

.image-container:hover {
    transform: scale(1.1);
    box-shadow: 0 0 4px 4px white inset;
    cursor: pointer;
    z-index: 10;
}

.subsection h3, .subsection p, .subsection ul {
    transition: transform 0.3s ease-in-out, font-size 0.3s ease-in-out, color 0.3s ease-in-out;
    transform: scale(1);
}

.highlighted-text {
    color: #ffcc00; /* Hervorgehobene Farbe */
    font-weight: bold;
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Grundstil für alle Unterabschnitte innerhalb der product-details Klasse */
.product-details .subsection {
    background-color: #275482; /* Weiße Hintergrundfarbe */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatteneffekt für Tiefe */
    padding: 20px; /* Innerer Abstand */
    margin-bottom: 20px; /* Abstand zwischen den Boxen */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Weiche Übergänge für Hover-Effekte */
}

/* Grundstil für Listen in den Boxen */
.product-details ul {
    list-style: none; /* Entfernt Standard-Listendots */
    padding: 0; /* Entfernt Padding */
}

/* Jedes Listenelement */
.product-details li {
    position: relative; /* Für Positionierung des Pseudo-Elements */
    padding-left: 30px; /* Platz für das Icon */
}

/* Pseudo-Element für jedes Listenelement */
.product-details li::before {
	font-weight: bold;
    position: absolute;
    left: 0; /* Ausrichtung am linken Rand */
    top: 0; /* Ausrichtung an der oberen Grenze des Elements */
    width: 20px; /* Größe des Icons */
    height: 20px; /* Größe des Icons */
    background-size: contain; /* Passt das Icon innerhalb der Größe an */
    background-repeat: no-repeat; /* Keine Wiederholung des Icons */
}

/* Spezifische Icons für jeden Listentyp durch Hinzufügen von Klassen */
.product-details .electronics-text::before {
    background-image: url('path/to/microchip-icon.png');
}

.product-details .construction-text::before {
    background-image: url('path/to/building-icon.png');
}

.product-details .cosmetics-text::before {
    background-image: url('path/to/flask-icon.png');
}

.product-details .batteries-text::before {
    background-image: url('path/to/battery-icon.png');
}



@media (max-width: 1200px) {
    .product-graphics {
        grid-template-columns: 1fr; /* Wechselt zu einem Ein-Spalten-Layout auf mittleren Bildschirmen */
    }
}

@media (max-width: 480px) {
    .product-graphics {
        padding: 10px; /* Verringert den Innenabstand auf kleinen Bildschirmen */
    }
}

.feature-box {
    background: #275482; /* Leichter grüner Farbverlauf für Frische und Klarheit */
    padding: 25px;
    border-left: 6px solid #275482; /* Grüner Akzentstreifen für einen modernen und natürlichen Look */
    margin: 15px 0;
    border-radius: 8px; /* Abgerundete Ecken für ein weicheres Erscheinungsbild */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Tieferer Schatten für mehr Dimension */
    display: flex;
    align-items: center; /* Vertikale Zentrierung des Inhalts */
    transition: transform 0.3s, box-shadow 0.3s; /* Sanfte Übergänge für Hover-Effekte */
}

.feature-box:hover {
    transform: translateY(-5px); /* Leichter Hover-Effekt für Interaktivität */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Intensiverer Schatten bei Hover */
}

.feature-title {
    margin: 0 20px 0 0; /* Mehr Platz zwischen Icon und Text */
    color: #ff9800; /* Dunkelgrüner Text für mehr Kontrast und Seriosität */
    font-size: 20px; /* Größere Schriftgröße für mehr Präsenz */
    font-weight: 700; /* Kräftigere Schrift zur Betonung */
    flex: 1; /* Flexible Raumeinnahme */
}

.feature-description {
    color: white; /* Dunkelbrauner Text für bessere Lesbarkeit */
    font-size: 16px; /* Beibehaltung der Standard-Schriftgröße für Lesbarkeit */
    line-height: 1.6; /* Etwas größere Zeilenhöhe für mehr Raum */
}

.feature-icon {
    font-size: 35px; /* Größeres Icon für stärkere visuelle Wirkung */
    color: #ff9800; /* Orange Icon für Konsistenz und visuelle Wirkung */
    min-width: 60px; /* Sicherstellung, dass das Icon nicht verzerrt wird */
    transform: rotate(-10deg); /* Schrägstellung des Icons */
}

/* Anpassungen für mobile Geräte */
@media (max-width: 768px) {
    .feature-box {
        flex-direction: column; /* Ändert die Flex-Richtung auf Spaltenlayout */
        align-items: flex-start; /* Linksbündige Ausrichtung der Inhalte */
    }

    .feature-title, .feature-icon {
        margin: 0 0 10px 0; /* Abstand unterhalb der Überschrift und des Icons */
        text-align: center; /* Zentriert die Überschrift und das Icon */
        width: 100%; /* Nimmt die gesamte Breite ein */
    }

    .feature-description {
        text-align: justify; /* Rechtfertigt den Text für bessere Lesbarkeit */
    }
	
	h2 {
		font-size: 25px;
	}
}

.challenges-solutions-title {
    color: #ffffff; /* Weiße Schriftfarbe */
    font-size: 28px; /* Größere Schriftgröße für den Titel */
    font-weight: 800; /* Kräftige Schrift zur Betonung */
    text-align: center; /* Zentrierter Titel */
    margin-bottom: 30px; /* Abstand unter dem Titel */
    position: relative; /* Für pseudo-Elemente */
    background-color: #275482; /* Schicke Hintergrundfarbe */
    padding: 15px; /* Padding für mehr Platz um den Text */
    border-radius: 8px; /* Abgerundete Ecken für ein weicheres Erscheinungsbild */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Leichter Schatten für Dimension */
}

.challenge-box {
    background: linear-gradient(135deg, #ffffff, #ffebee); /* Leichter roter Farbverlauf für die Herausforderung */
    padding: 25px;
	border: 1px solid;
    border-left: 6px solid #d32f2f; /* Roter Akzentstreifen für einen modernen Look */
    margin: 15px;
    border-radius: 8px; /* Abgerundete Ecken für ein weicheres Erscheinungsbild */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Tieferer Schatten für mehr Dimension */
    transition: transform 0.3s, box-shadow 0.3s; /* Sanfte Übergänge für Hover-Effekte */
}

.solution-box {
    background: linear-gradient(135deg, #ffffff, #e8f5e9); /* Leichter grüner Farbverlauf für Frische und Klarheit */
    padding: 25px;
	border: 1px solid;
    border-left: 6px solid #275482; /* Blauer Akzentstreifen für einen modernen und natürlichen Look */
    margin: 15px;
    border-radius: 8px; /* Abgerundete Ecken für ein weicheres Erscheinungsbild */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Tieferer Schatten für mehr Dimension */
    transition: transform 0.3s, box-shadow 0.3s; /* Sanfte Übergänge für Hover-Effekte */
}

.challenge-box:hover, .solution-box:hover {
    transform: translateY(-5px); /* Leichter Hover-Effekt für Interaktivität */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Intensiverer Schatten bei Hover */
}

.challenge-box h3, .solution-box h3 {
    color: #275482; /* Dunkelblauer Text für mehr Kontrast und Seriosität */
    font-size: 22px; /* Größere Schriftgröße für mehr Präsenz */
    font-weight: 700; /* Kräftigere Schrift zur Betonung */
}

.challenge-box ul, .solution-box ul {
    list-style-type: none; /* Keine Standard-Aufzählungszeichen */
    padding: 0;
}

.challenge-box li, .solution-box li {
    color: #4e342e; /* Dunkelbrauner Text für bessere Lesbarkeit */
    font-size: 16px; /* Beibehaltung der Standard-Schriftgröße für Lesbarkeit */
    line-height: 1.6; /* Etwas größere Zeilenhöhe für mehr Raum */
    margin: 10px 0; /* Abstand zwischen den Listenelementen */
    display: flex;
    align-items: center; /* Vertikale Zentrierung des Inhalts */
}

.challenge-box li i, .solution-box li i {
    font-size: 20px; /* Größeres Icon für stärkere visuelle Wirkung */
    color: #275482; /* Blaues Icon für Konsistenz und visuelle Wirkung */
    margin-right: 10px; /* Abstand zwischen Icon und Text */
    transform: rotate(-10deg); /* Schrägstellung des Icons */
}

.challenges-solutions-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; /* Elemente umbrechen, wenn der Platz knapp wird */
}

.challenges-solutions-container .challenge-box, .challenges-solutions-container .solution-box {
    flex: 1;
    min-width: 300px; /* Mindestbreite der Boxen */
    margin: 10px;
}

.arrow-between {
    font-size: 40px;
    color: #275482;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1000px) {
    .challenges-solutions-container {
        flex-direction: column;
        align-items: center;
    }
	
	challenge-box {
		width: 100%;
	}

    .arrow-between {
        transform: rotate(90deg); /* Pfeil nach unten zeigen lassen */
        margin: 20px 0; /* Abstand um den Pfeil bei kleinerem Bildschirm */
    }
}

.about-about-overview-title-icon::before {
    content: "\f275"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
}

.about-about-vision-title-icon::before {
    content: "\f0eb"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
}

.about-about-mission-title-icon::before {
    content: "\f140"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
}

.about-products-title-icon::before {
    content: "\f49e"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
}

.about-products-offer-title-icon::before {
    content: "\f466"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
}

.about-products-title-icon::before {
    content: "\f085"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
}

.electronics-text::before {
    content: "\f2db"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
}

.construction-text::before {
    content: "\f1ad"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
}

.cosmetics-text::before {
    content: "\f0c3"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
}

.batteries-text::before {
    content: "\f240"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
}

.about-strengths-title-icon::before {
	content: "\f091"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
	font-weight: bold;
}

.feature-title-icon1::before {
	content: "\f19d"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
	font-weight: bold;
}

.feature-title-icon2::before {
	content: "\f155"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
	font-weight: bold;
}

.feature-title-icon3::before {
	content: "\f494"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
	font-weight: bold;
}

.challenges-solutions-title::before {
	content: "\f071"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
	font-weight: bold;
}

.about-challenges-market-title-icon::before {
	content: "\f201"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
	font-weight: bold;
}

.about-challenges-competition-text-icon::before {
	content: "\f0c0"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
	font-weight: bold;
}

.about-challenges-awareness-text-icon::before {
	content: "\f06e"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
	font-weight: bold;
}

.about-challenges-solutions-title-icon::before {
	content: "\f0eb"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
	font-weight: bold;
}

.about-solutions-promo-materials-icon::before {
	content: "\f15c"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
	font-weight: bold;
}

.about-solutions-online-presence-icon::before {
	content: "\f0ac"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
	font-weight: bold;
}

.about-solutions-strategic-cooperation-icon::before {
	content: "\f2b5"; 
    font-family: "Font Awesome 5 Free";
	margin-right: 3px;
	font-weight: bold;
}