<!--
EN: Main HTML template for the BBW University Research & 3D Printing Web Application.
    - Provides the structure for the landing page, research sections, Science Lab carousel, and contact form.
    - Integrates Bootstrap, custom CSS, and JavaScript for responsive design and interactive features.
    - Used as the main entry point for Flask's render_template.
DE: Haupt-HTML-Template für die Forschungs- und 3D-Druck-Webanwendung der bbw Hochschule.
    - Stellt die Struktur für die Startseite, Forschungsbereiche, Science Lab-Karussell und das Kontaktformular bereit.
    - Integriert Bootstrap, benutzerdefiniertes CSS und JavaScript für responsives Design und interaktive Funktionen.
    - Wird als Haupteinstiegspunkt für Flask render_template verwendet.
-->
<!DOCTYPE html>

<html lang="de">

<head>
    <!-- EN/DE: Meta tags, favicon, and CSS includes for responsive design and branding. -->
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <link href="https://www.bbw-hochschule.de/media/de/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
    <link href="https://www.bbw-hochschule.de/media/de/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
    <link href="https://www.bbw-hochschule.de/media/de/apple-touch-icon.png" rel="apple-touch-icon" sizes="76x76" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>bbw Hochschule - Forschung</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/static/css/styles.css" rel="stylesheet" />
    <link href="/static/css/app.css" rel="stylesheet" />
</head>

<body>
    <!-- EN/DE: Main header with university branding and navigation menu. -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <header id="main-header"
        style="background: url('https://www.bbw-gruppe.de/media/de/slider-umzug+960.jpg') no-repeat center center/cover;">
        <div class="header-overlay">
            <h1 id="header-title">bbw Hochschule - Forschung und Innovation</h1>
        </div>
    </header>
    <nav>
        <!-- EN/DE: Responsive navigation for desktop and mobile, with accessible hamburger menu. -->
        <div class="dropdown d-none d-lg-block" style="display:inline-block;">
            <button aria-expanded="false" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
                id="menuDropdown" type="button">
                Menü
            </button>
            <ul aria-labelledby="menuDropdown" class="dropdown-menu">
                <li><a class="dropdown-item" href="#startseite">Startseite</a></li>
                <li><a class="dropdown-item" href="#forschungsschwerpunkte">Forschungsschwerpunkte und
                        Dienstleistungen</a></li>
                <li><a class="dropdown-item" href="#forschungsprojekte">Forschungsprojekte und Kooperationen</a></li>
                <li><a class="dropdown-item" href="#science-lab">Science Lab</a></li>
                <li><a class="dropdown-item" href="#fuer-studierende">Für Studierende</a></li>
                <li><a class="dropdown-item" href="#veroeffentlichungen">Veröffentlichungen/News</a></li>
                <li><a class="dropdown-item" href="#ueber-uns">Über uns/Kontakt</a></li>
            </ul>
        </div>
        <div class="mobile-menu d-lg-none">
            <button class="btn" id="hamburgerBtn" aria-label="Menü öffnen" aria-controls="mobileMenuList"
                aria-expanded="false">
                <span class="fa fa-bars" id="hamburgerIcon" style="font-size:2em;transition:transform 0.3s;"></span>
            </button>
            <ul id="mobileMenuList" class="dropdown-menu" style="position:static;display:none;">
                <li><a class="dropdown-item" href="#startseite">Startseite</a></li>
                <li><a class="dropdown-item" href="#forschungsschwerpunkte">Forschungsschwerpunkte und
                        Dienstleistungen</a></li>
                <li><a class="dropdown-item" href="#forschungsprojekte">Forschungsprojekte und Kooperationen</a></li>
                <li><a class="dropdown-item" href="#science-lab">Science Lab</a></li>
                <li><a class="dropdown-item" href="#fuer-studierende">Für Studierende</a></li>
                <li><a class="dropdown-item" href="#veroeffentlichungen">Veröffentlichungen/News</a></li>
                <li><a class="dropdown-item" href="#ueber-uns">Über uns/Kontakt</a></li>
            </ul>
        </div>
        <script>
            // EN: Accessible and animated hamburger menu logic
            // DE: Zugängliche und animierte Hamburger-Menü-Logik
            document.addEventListener('DOMContentLoaded', function () {
                const btn = document.getElementById('hamburgerBtn');
                const menu = document.getElementById('mobileMenuList');
                const icon = document.getElementById('hamburgerIcon');
                if (btn && menu && icon) {
                    btn.addEventListener('click', function () {
                        const expanded = btn.getAttribute('aria-expanded') === 'true';
                        btn.setAttribute('aria-expanded', !expanded);
                        menu.style.display = expanded ? 'none' : 'block';
                        if (!expanded) {
                            icon.style.transform = 'rotate(90deg) scale(1.2)';
                        } else {
                            icon.style.transform = 'rotate(0deg) scale(1)';
                        }
                    });
                    // Cerrar menú al hacer click fuera
                    document.addEventListener('click', function (e) {
                        if (!btn.contains(e.target) && !menu.contains(e.target)) {
                            menu.style.display = 'none';
                            btn.setAttribute('aria-expanded', false);
                            icon.style.transform = 'rotate(0deg) scale(1)';
                        }
                    });
                }
            });
        </script>
    </nav>
    <section id="startseite">
        <!-- EN: Landing section with university research mission and goals.
             DE: Einstiegsbereich mit Forschungsmission und Zielen der Hochschule. -->
        <h2>Startseite</h2>
        <p>Die bbw Hochschule ist mit der anwendungsorientierten Forschung ein innovativer Partner für Wirtschaft und
            Gesellschaft. Unser Ziel ist, Forschungsfragen und -konzepte eng mit der Lehre zu verknüpfen, Studierende
            einzubeziehen und einen großen Mehrwert für unsere Kooperationspartner (Unternehmen) zu schaffen. Die
            erfolgreiche Einwerbung von Drittmitteln und die Zusammenarbeit mit renommierten Kooperationspartnern zeigen
            die Leistungsfähigkeit unseres Forschungsbereichs.</p>
        <h3>Unsere Forschungsziele im Überblick:</h3>
        <ul class="custom">
            <li>Wissens- und Technologietransfer: Forschungsergebnisse fließen aktiv in die Praxis und konkrete Produkte
                ein, insbesondere durch Kooperationen mit Unternehmen und Transferprojekte.</li>
            <li>Forschungskooperationen und Drittmittel: Wir stärken die Einwerbung von Forschungsfördermitteln und
                betreiben Auftragsforschung (Dienstleistung), um innovative Projekte gemeinsam mit Partnern umzusetzen.
            </li>
            <li>Verzahnung von Lehre und Forschung: Aktuelle Forschung bereichert die Lehre; Studierende werden über
                Projekt- und Abschlussarbeiten in Forschungsaktivitäten integriert.</li>
            <li>Transparenz und Sichtbarkeit: Ergebnisse unserer Forschung werden auf diesen Seiten veröffentlicht (z.B.
                in Forschungsberichten, Publikationen oder auf Tagungen).</li>
        </ul>
        <p>Unsere Ausstattung und Ausrichtung orientiert sich an den aktuellen Themen und Bedürfnissen von Unternehmen.
        </p>
        <div class="back-link"><a href="#">(Zurück zur Übersicht)</a></div>
    </section>
    <section id="forschungsschwerpunkte">
        <!-- EN: Research focus areas and services offered by the university.
             DE: Forschungsschwerpunkte und angebotene Dienstleistungen der Hochschule. -->
        <h2>Forschungsschwerpunkte und Dienstleistungen</h2>
        <p>Nachfolgend werden unsere Forschungsbereiche und Aktivitäten, sowie unsere konkret angebotenen
            Dienstleistungen auszugsweise dargestellt. Die Hochschule verfügt über drei Fachgruppen (Wirtschafts-,
            Wirtschaftsingenieur- und Ingenieurwissenschaften), wodurch inhaltlich ein sehr breiter Bereich an Themen
            abgedeckt wird. Unsere Professoren und Mitarbeiter sind Experten auf Ihren Gebieten und freuen sich nicht
            nur über Anfragen zu hier gelisteten Themen, sondern auch zu weiterführenden Themengebieten.</p>
        <h3>Unser Angebot im Bereich Forschung:</h3>
        <ul class="custom">
            <li>Forschungsberatung für Unternehmen und Kooperationen</li>
            <li>Beratung bei Forschungsprojekten: Von der Idee bis zum Prototyp unterstützen unsere Professorinnen und
                wissenschaftlichen Mitarbeiterinnen bei der Ausarbeitung von Forschungsfragen, Methodik und
                Projektplänen. Wir helfen, Lösungen für praktische Problemstellungen mit wissenschaftlichen Methoden zu
                entwickeln.</li>
            <li>Auftragsforschung &amp; Projektkooperation: Wir übernehmen auch „kleinere“ Forschungsaufträge zu fairen
                Konditionen – etwa wenn ein Unternehmen eine Fragestellung extern bearbeiten lassen möchte. In
                gemeinsamen Projekten verbinden wir unsere wissenschaftliche Expertise mit der Praxis des Betriebs.</li>
            <li>Workshops und Schulungen: Bei Bedarf bieten wir Workshops, Schulungen oder Inhouse-Seminare an, um
                neueste Forschungserkenntnisse (etwa zu 3D-Druck, Robotik, Datenanalyse) an Mitarbeiter*innen von
                Partnerunternehmen zu vermitteln.</li>
        </ul>
        <h3>Forschungsschwerpunkte der Professor*innen</h3>
        <p>Unsere Professorinnen und Professoren verbinden akademische Lehre mit aktiver Forschung. Hier stellen wir die
            Forschungsschwerpunkte vor:</p>
        <ul class="custom">
            <li><strong>Prof. Dr.-Ing. Rene Brunotte – Technologie Trends:</strong>
                <ul>
                    <li>Künstliche Intelligenz: Know-how ist der Schlüssel, um Vertrauen in neue Technologien
                        aufzubauen. Deshalb bieten wir Schulungen, Seminare und Workshops rund um KI, Data Science und
                        Machine Learning an.</li>
                    <li>3D-Druck: Ausstattung mit modernen 3D-Druckern (für Kunststoffe und Metall) ermöglicht die
                        schnelle Herstellung von Prototypen und Bauteilen. Unternehmen können diese additive Fertigung
                        nutzen, um Produktideen zu realisieren oder Forschungsprojekte im Bereich neue Werkstoffe zu
                        unterstützen. Nutzen Sie unser online Tool und erhalten Sie für Ihr Bauteil direkt
                        ein Preisangebot oder senden Sie uns eine Anfrage über fib@bbw-hochschule.de</li>
                    <li>Robotik: In unserem ScienceLab werden Industrieroboter und kollaborative Robotersysteme
                        erforscht und erprobt. Wir bieten Unternehmen Unterstützung bei der Automatisierung von
                        Prozessen – von der Programmierung eines Roboters bis zur Simulation</li>
                    <li>Bioprinting Einheit: Als zukunftsweisende Technologie im Gesundheitswesen erforschen wir den
                        3D-Druck von biologischen Geweben (Bioprinting). Unsere Bioprinting-Einrichtung kann
                        zellbasiertes Material drucken, was perspektivisch für die medizinische Forschung (z.B. Gewebe-
                        und Organmodelle) von großem Nutzen ist. Der Fokus bei uns liegt vor allem auf der
                        Entwicklung/Weiterentwicklung der 3D Drucker</li>
                </ul>
            </li>
            <li><strong>Prof. Dr. Thoralf Buller – Nachhaltige Technologien und Interkulturelle Kommunikation:</strong>
                Erforschung nachhaltiger Produktionsverfahren, erneuerbarer Energietechnologien und deren
                wirtschaftliche Implikationen. Beratung von Unternehmen in Fragen der Nachhaltigkeit und grünen
                Innovation.</li>
            <li><strong>Prof. Dr. Irina Slot – Didaktik in der Lehre:</strong> Unsere Forschungsdienstleistung im
                Bereich Didaktik in der Lehre konzentriert sich auf die Entwicklung und Optimierung von Lehrmethoden,
                die den aktuellen Anforderungen an eine zukunftsfähige Ausbildung gerecht werden. Wir bieten
                praxisorientierte Forschung zu innovativen Lehransätzen, digitalen Lehrformaten und effektiven
                Lernstrategien.</li>
        </ul>
        <div class="back-link"><a href="#">(Zurück zur Übersicht)</a></div>
    </section>
    <section id="forschungsprojekte">
        <!-- EN: Ongoing and completed research projects and collaborations.
             DE: Laufende und abgeschlossene Forschungsprojekte und Kooperationen. -->
        <h2>Forschungsprojekte und Kooperationen</h2>
        <p>Seit 2011 konnte die bbw Hochschule erfolgreich Drittmittelprojekte einwerben und umsetzen. Auf dieser Seite
            werden laufende und abgeschlossene Projekte kurz dargestellt, insbesondere solche, die durch Drittmittel
            gefördert wurden oder in enger Kooperation mit Partnern entstanden sind.</p>
        <h3>Aktuelle Forschungsprojekte:</h3>
        <p>ReTraNetz:</p>
        <h3>Unsere Kooperationspartner:</h3>
        <p>Die bbw Hochschule verfügt über ein breites Netzwerk an Partnern aus Wirtschaft und Wissenschaft.</p>
        <ul class="custom">
            <li>Industrie: regionale mittelständische Firmen (z.B. aus Maschinenbau, IT, Medizintechnik) bis hin zu
                internationalen Technologieunternehmen, die mit uns in Entwicklungsprojekten kooperieren.</li>
            <li>Wissenschaft: Kooperationen mit anderen Hochschulen und Forschungsinstituten (national und
                international), um gemeinsame Forschungsvorhaben durchzuführen und den Austausch von Know-how zu
                fördern.</li>
            <li>Institutionen: Zusammenarbeit mit öffentlichen Einrichtungen, Fördergebern und
                Akkreditierungsorganisationen zur Sicherung der Forschungsqualität und Förderung des
                Technologietransfers.</li>
        </ul>
        <div class="back-link"><a href="#">(Zurück zur Übersicht)</a></div>
    </section>
    <section id="science-lab">
        <!-- EN: Science Lab section with equipment carousel and description.
             DE: Science Lab-Bereich mit Karussell und Beschreibung der Ausstattung. -->
        <h2>Science Lab</h2>
        <p>Science Lab – Raum für Ideen. Ort für Innovation.</p>
        <p>Das Science Lab der bbw Hochschule ist das Herzstück unserer anwendungsorientierten Forschung. Es vereint
            modernste Infrastruktur mit interdisziplinärem Denken und schafft einen Raum, in dem Studierende, Forschende
            und Unternehmen gemeinsam an Zukunftsthemen arbeiten.</p>
        <p>Hier entstehen innovative Lösungen, Prototypen und Experimente, die Forschung greifbar und erlebbar machen.
            Unser Science Lab ist dabei weit mehr als ein Labor – es ist ein offener Innovationsraum, in dem Ideen
            getestet, Technologien entwickelt und neue Denkansätze praktisch erprobt werden. Es ist offen und jeden
            Mittwoch frei Nutzbar für unsere Studierenden.</p>
        <h3>Genutzt wird das Science Lab für:</h3>
        <ul class="custom">
            <li>Lehre (Umsetzung konkreter Projekte)</li>
            <li>Start up</li>
            <li>Vorversuche bei Forschungsprojekten</li>
        </ul>
        <h3>Modernste Ausstattung:</h3>
        <div class="carousel carousel-dark slide mb-4" data-bs-ride="carousel" id="carouselAusstattung">
            <div class="carousel-indicators">
                <button aria-current="true" aria-label="3D-Drucker" class="active" data-bs-slide-to="0"
                    data-bs-target="#carouselAusstattung" type="button"></button>
                <button aria-label="Bioprinter" data-bs-slide-to="1" data-bs-target="#carouselAusstattung"
                    type="button"></button>
                <button aria-label="KI-Arbeitsplätze" data-bs-slide-to="2" data-bs-target="#carouselAusstattung"
                    type="button"></button>
                <button aria-label="Lasercutter" data-bs-slide-to="3" data-bs-target="#carouselAusstattung"
                    type="button"></button>
                <button aria-label="Mikroskope" data-bs-slide-to="4" data-bs-target="#carouselAusstattung"
                    type="button"></button>
                <button aria-label="Robotiksysteme" data-bs-slide-to="5" data-bs-target="#carouselAusstattung"
                    type="button"></button>
                <button aria-label="VR" data-bs-slide-to="6" data-bs-target="#carouselAusstattung"
                    type="button"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active" data-bs-interval="5000">
                    <div class="d-flex flex-column justify-content-center align-items-center w-100 h-100">
                        <img alt="3D-Drucker" class="d-block" src="/static/images/3D-Drücker.webp" />
                        <div class="carousel-caption-static mt-2">
                            <h5>3D-Drucker</h5>
                            <p>Moderne 3D-Drucker für Kunststoff und Metall</p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item" data-bs-interval="5000">
                    <div class="d-flex flex-column justify-content-center align-items-center w-100 h-100">
                        <img alt="Bioprinter" class="d-block" src="/static/images/Bioprinter.webp" />
                        <div class="carousel-caption-static mt-2">
                            <h5>Bioprinter</h5>
                            <p>Bioprinting-Einheit für medizinische Forschung</p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item" data-bs-interval="5000">
                    <div class="d-flex flex-column justify-content-center align-items-center w-100 h-100">
                        <img alt="KI-Arbeitsplätze" class="d-block" src="/static/images/KI-Arbeitsplätze.webp" />
                        <div class="carousel-caption-static mt-2">
                            <h5>KI-Arbeitsplätze</h5>
                            <p>Arbeitsplätze für Künstliche Intelligenz und Data Science</p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item" data-bs-interval="5000">
                    <div class="d-flex flex-column justify-content-center align-items-center w-100 h-100">
                        <img alt="Lasercutter" class="d-block" src="/static/images/Lasercutter.webp" />
                        <div class="carousel-caption-static mt-2">
                            <h5>Lasercutter</h5>
                            <p>Lasercutter (Mr. Beam II) für präzise Schnitte</p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item" data-bs-interval="5000">
                    <div class="d-flex flex-column justify-content-center align-items-center w-100 h-100">
                        <img alt="Mikroskope" class="d-block" src="/static/images/Mikroskope.webp" />
                        <div class="carousel-caption-static mt-2">
                            <h5>Mikroskope</h5>
                            <p>Moderne Mikroskope für Forschung und Lehre</p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item" data-bs-interval="5000">
                    <div class="d-flex flex-column justify-content-center align-items-center w-100 h-100">
                        <img alt="Robotiksysteme" class="d-block" src="/static/images/Robotiksysteme.webp" />
                        <div class="carousel-caption-static mt-2">
                            <h5>Robotiksysteme</h5>
                            <p>Industrieroboter und kollaborative Robotersysteme</p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item" data-bs-interval="5000">
                    <div class="d-flex flex-column justify-content-center align-items-center w-100 h-100">
                        <img alt="VR" class="d-block" src="/static/images/VR.webp" />
                        <div class="carousel-caption-static mt-2">
                            <h5>VR</h5>
                            <p>Virtual-Reality-Systeme für innovative Projekte</p>
                        </div>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" data-bs-slide="prev" data-bs-target="#carouselAusstattung"
                type="button" aria-label="Vorheriges Bild" tabindex="0">
                <span aria-hidden="true" class="carousel-control-prev-icon"></span>
                <span class="visually-hidden">Vorheriges</span>
            </button>
            <button class="carousel-control-next" data-bs-slide="next" data-bs-target="#carouselAusstattung"
                type="button" aria-label="Nächstes Bild" tabindex="0">
                <span aria-hidden="true" class="carousel-control-next-icon"></span>
                <span class="visually-hidden">Nächstes</span>
            </button>
        </div>
        <p>und vieles mehr – alles steht für Forschungs- und Entwicklungsprojekte zur Verfügung.</p>
        <div class="modulo-impresion3d">
            <div class="container">
                <aside class="sidebar">
                    <div class="form-group">
                        <label data-translate-key="selectPrinterLabel" for="printerSelect">Drucker auswählen</label>
                        <select id="printerSelect">
                            <option data-translate-key="selectPrinterPlaceholder" disabled="" selected="" value="">Bitte
                                Drucker auswählen</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label data-translate-key="selectMaterialLabel" for="materialSelectButton">Material
                            auswählen</label>
                        <div class="material-selector-wrapper">
                            <button id="materialSelectButton">
                                <span data-translate-key="selectMaterialPlaceholder">Material auswählen</span>
                            </button>
                        </div>
                        <div class="material-popup" id="materialPopup">
                            <div class="material-popup-header">
                                <h3 data-translate-key="selectMaterialLabel">Material auswählen</h3>
                                <button id="closeMaterialPopup" title="Schließen"></button>
                                <div class="material-popup-placeholder">
                                    <span data-translate-key="selectMaterialPlaceholder">Material auswählen</span>
                                </div>
                            </div>
                            <div class="material-grid" id="materialGrid">
                            </div>
                            <div class="CustomCOlor" id="CustomCOlor">
                                <label>Insert custom color</label>
                                <textarea cols="20" id="customColorInput" rows="1"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label data-translate-key="selectQualityLabel" for="qualitySelect">Qualität auswählen</label>
                        <select id="qualitySelect">
                            <option data-translate-key="selectQualityPlaceholder" disabled="" selected="" value="">Bitte
                                Qualität auswählen</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label data-translate-key="selectFileLabel">STL-Datei auswählen</label>
                        <div class="file-input-wrapper">
                            <button data-translate-key="selectFileButton" id="customFileButton" type="button">Datei
                                wählen</button>
                            <span data-translate-key="noMaterialSelected" id="fileName">Kein Material ausgewählt</span>
                        </div>
                        <input accept=".stl" id="fileInput" style="display: none;" type="file" />
                    </div>
                    <button data-translate-key="startPrintButton" id="startPrint">Druck starten</button>
                    <div id="orderInfoMsg" style="display:none;"></div>
                    <div class="form-group language-selector-group">
                        <select data-translate-key="languageSelectorTooltip" id="languageSelect" title="Sprache ändern">
                            <option data-translate-key="langGerman" value="de">🇩🇪 Deutsch</option>
                            <option data-translate-key="langEnglish" value="en">🇬🇧 English</option>
                        </select>
                    </div>
                </aside>
                <main class="content">
                    <div id="viewer" class="modulo-impresion3d" data-translate-key="viewerPlaceholder"
                        style="position:relative;">3D-Viewer</div>
                    <div id="light-controls" style="margin: 1em 0; text-align: center;">
                        <label for="lightX">Light X:</label>
                        <input type="range" id="lightX" min="-1" max="1" step="0.01" value="0.5" style="width: 120px;">
                        <label for="lightY">Light Y:</label>
                        <input type="range" id="lightY" min="-1" max="1" step="0.01" value="0.5" style="width: 120px;">
                        <label for="lightZ">Light Z:</label>
                        <input type="range" id="lightZ" min="-1" max="1" step="0.01" value="1" style="width: 120px;">
                    </div>
                    <div id="info">
                        <table>
                            <tr>
                                <td><strong data-translate-key="dimensionsHeader">Abmessungen (LxBxH):</strong></td>
                                <td id="abmessungen-wert">-</td>
                            </tr>
                            <tr>
                                <td><strong data-translate-key="volumeHeader">Volumen:</strong></td>
                                <td id="volumen-wert">-</td>
                            </tr>
                            <tr>
                                <td><strong data-translate-key="weightHeader">Materialgewicht:</strong></td>
                                <td id="gewicht-wert">-</td>
                            </tr>
                            <tr>
                                <td><strong data-translate-key="costHeader">Druckkosten:</strong></td>
                                <td id="kosten-wert">-</td>
                            </tr>
                        </table>
                    </div>
                </main>
            </div>
            <div class="notification" id="notification"></div>
        </div>
        <!--
        DE: Einbindung des Haupt-JavaScript-Moduls, das die Anwendungslogik orchestriert.
        EN: Inclusion of the main JavaScript module that orchestrates the application logic.
        -->
        <script src="https://cdn.jsdelivr.net/npm/three@0.149.0/build/three.min.js"></script>
        <script src="/static/js/OrbitControls.js"></script>
        <script src="/static/js/STLLoader.js"></script>
        <script src="/static/js/viewer3d.js"></script>
        <script src="/static/js/main.js" type="module"></script>
        <script src="/static/js/script.js"></script>
        <div class="back-link"><a href="#">(Zurück zur Übersicht)</a></div>
    </section>
    <section id="fuer-studierende">
        <!-- EN: Information for students on how to participate in research.
             DE: Informationen für Studierende zur Beteiligung an der Forschung. -->
        <h2>Für Studierende</h2>
        <p>Forschung für Studierende – Mitgestalten. Mitforschen. Mitwirken.</p>
        <p>Die bbw Hochschule bietet allen Studierenden die Möglichkeit, dich direkt in laufende Forschungsprojekte
            einzubringen – sei es im Labor, bei Praxisprojekten mit Unternehmen oder im Rahmen deiner Projekt- oder
            Abschlussarbeit.</p>
        <h3>Warum Forschung während des Studiums so wichtig ist?</h3>
        <ul class="custom">
            <li>Praxisnahe Erfahrung sammeln: Studierende arbeiten an echten Fragestellungen – oft gemeinsam mit
                Unternehmen oder in interdisziplinären Forschungsteams.</li>
            <li>Fachlich vertiefen: Sie vertiefen das vorhandene Wissen in zukunftsrelevanten Bereichen wie 3D-Druck,
                Robotik, Künstliche Intelligenz oder Bioprinting.</li>
            <li>Netzwerk erweitern: Es können frühzeitig Kontakte zu Unternehmen geknüpft werden – ein Vorteil für deine
                berufliche Zukunft.</li>
            <li>Wissenschaftlich arbeiten: Hier wird anwendungsorientiert gelernt, wie man methodisch richtig forscht,
                Daten analysiert und Ergebnisse präsentiert – ideal auch zur Vorbereitung auf eine mögliche spätere
                wissenschaftliche Karriere.</li>
        </ul>
        <h3>Wie können sich Studierende der bbw Hochschule beteiligen?</h3>
        <p>Ganz einfach: Melde dich über unser Kontaktformular oder sprich direkt einen Professorin an, deren Forschung
            dich interessiert. Alternativ kannst du auch gezielt nach Projektangeboten suchen, die wir regelmäßig auf
            dieser Seite veröffentlichen – z. B.:</p>
        <ul class="custom">
            <li>Forschungspraktika im Labor (z. B. im 3D-Druck-Labor oder Robotik-Labor)</li>
            <li>Wissenschaftliche Hilfskraftstellen (z. B. für Datenauswertung, Literaturrecherche, Softwareentwicklung)
            </li>
            <li>Themenvorschläge für Bachelor- und Masterarbeiten im Rahmen aktueller Projekte</li>
            <li>Mitarbeit an geförderten Forschungsprojekten (z. B. in Kooperation mit Unternehmen)</li>
        </ul>
        <p>Die wissenschaftliche Zukunft beginnt hier!</p>
        <p>Forschung ist kein Elfenbeinturm – sie lebt vom Mitmachen. Egal ob du neugierig bist, ein konkretes Thema
            hast oder einfach mal reinschnuppern willst: Bei uns findest du Raum für Ideen, Unterstützung bei der
            Umsetzung und Anschluss an ein motiviertes Forschungsteam.</p>
        <p>Nutze das Kontaktformular oder informiere dich über aktuelle Angebote – wir freuen uns auf dich!</p>
        <div class="back-link"><a href="#">(Zurück zur Übersicht)</a></div>
    </section>
    <section id="veroeffentlichungen">
        <!-- EN: Publications and news section.
             DE: Veröffentlichungen und News-Bereich. -->
        <div class="pdf-banner"
            style="background: linear-gradient(90deg,#5b8893 0%,#0056a0 100%); color: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.12); padding: 2em 1em; margin-bottom: 2em; text-align:center;">
            <h2>Unsere Forschungsberichte – Jetzt entdecken!</h2>
            <p style="font-size:1.2em;">Wichtige Publikationen und aktuelle Forschungsergebnisse der bbw Hochschule</p>
        </div>
        <div class="pdf-card-grid"
            style="display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2em;">
            <div class="pdf-card animated-fadein">
                <a href="/static/studies/bbw-hochschule-forschungsbericht-2022-2023.pdf"
                    target="_blank" class="pdf-link">
                    <div class="pdf-icon"><i class="fa fa-file-pdf-o"></i></div>
                    <div class="pdf-title">Forschungsbericht 2022-2023</div>
                    <div class="pdf-desc">Die neuesten Erkenntnisse und Projekte der bbw Hochschule.</div>
                </a>
            </div>
            <div class="pdf-card animated-fadein" style="animation-delay:0.1s;">
                <a href="/static/studies/bbw-hochschule-forschungsbericht-2020-2021.pdf"
                    target="_blank" class="pdf-link">
                    <div class="pdf-icon"><i class="fa fa-file-pdf-o"></i></div>
                    <div class="pdf-title">Forschungsbericht 2020-2021</div>
                    <div class="pdf-desc">Innovative Projekte und Kooperationen im Überblick.</div>
                </a>
            </div>
            <div class="pdf-card animated-fadein" style="animation-delay:0.2s;">
                <a href="/static/studies/bbw-forschungsbericht-2018-2019.pdf" target="_blank"
                    class="pdf-link">
                    <div class="pdf-icon"><i class="fa fa-file-pdf-o"></i></div>
                    <div class="pdf-title">Forschungsbericht 2018-2019</div>
                    <div class="pdf-desc">Forschung und Entwicklung in den Jahren 2018-2019.</div>
                </a>
            </div>
            <div class="pdf-card animated-fadein" style="animation-delay:0.3s;">
                <a href="/static/studies/bbw-hochschule-forschungsbericht-2016-2017.pdf"
                    target="_blank" class="pdf-link">
                    <div class="pdf-icon"><i class="fa fa-file-pdf-o"></i></div>
                    <div class="pdf-title">Forschungsbericht 2016-2017</div>
                    <div class="pdf-desc">Alle Projekte und Ergebnisse aus 2016-2017.</div>
                </a>
            </div>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const cards = document.querySelectorAll('.animated-fadein');
                cards.forEach((card, i) => {
                    card.style.opacity = 0;
                    card.style.transform = 'translateY(40px)';
                    setTimeout(() => {
                        card.style.transition = 'opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1)';
                        card.style.opacity = 1;
                        card.style.transform = 'translateY(0)';
                    }, 200 + i * 120);
                });
            });
        </script>
        <div class="back-link"><a href="#">(Zurück zur Übersicht)</a></div>
    </section>
    <section id="ueber-uns">
        <!-- EN: About us and contact section, including contact form.
             DE: Über uns und Kontaktbereich mit Kontaktformular. -->
        <h2>Über uns/Kontakt</h2>
        <p>Ihre Ansprechstelle für Forschung und Innovation an der bbw Hochschule</p>
        <p>Die Forschungsaktivitäten an der bbw Hochschule verbinden Wissenschaft, Praxis und Zukunftsorientierung.
            Unser interdisziplinäres Team aus Professorinnen, wissenschaftlichen Mitarbeiterinnen und Studierenden
            arbeitet an innovativen Lösungen für reale Herausforderungen – in enger Zusammenarbeit mit Unternehmen,
            Institutionen und öffentlichen Einrichtungen.</p>
        <p>Das fiborschungsinstitut ist innerhalb der bbw Hochschule die Abteilung, die die Forschungsaktivitäten
            koordiniert und begleitet. Wenn Sie Fragen zu unseren Forschungsfeldern, Projektideen,
            Kooperationsmöglichkeiten oder Unterstützungsangeboten haben –freuen wir uns, mit Ihnen ins Gespräch zu
            kommen. Das sind unsere Ansprechpartner für den Bereich Forschung:</p>
        <p>Sprechen Sie uns an – gemeinsam gestalten wir Forschung mit Wirkung.</p>
        <p>Hier finden Sie alle wichtigen Ansprechpartner*innen sowie unser zentrales Kontaktformular.</p>
        <div class="container mt-5">
            <h3 class="text-center mb-4">Kontaktformular</h3>
            <div id="form-message" class="text-center mb-3" style="color: red; display: none;"></div>
            <div class="d-flex justify-content-center align-items-center" style="min-height: 1px;">
                <div style="width:100%; max-width:600px;">
                    <form id="contactForm" class="row g-3" method="POST" action="/send_email">
                        <div class="col-md-6">
                            <label class="form-label" for="name">Name</label>
                            <input class="form-control" id="name" name="name" required type="text" />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="email">E-Mail</label>
                            <input class="form-control" id="email" name="email" required type="email" />
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="betreff">Betreff</label>
                            <input class="form-control" id="betreff" name="betreff" required type="text" />
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="nachricht">Nachricht</label>
                            <textarea class="form-control" id="nachricht" name="nachricht" required rows="5"></textarea>
                        </div>
                        <div class="col-12 text-center">
                            <button class="btn btn-primary px-5" type="submit">Senden</button>
                        </div>
                    </form>
                    <div id="form-success" class="text-center mb-3" style="color: green; display: none;"></div>
                </div>
            </div>
        </div>
        <div class="back-link"><a href="#">(Zurück zur Übersicht)</a></div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('contactForm');
            const msg = document.getElementById('form-message');
            const success = document.getElementById('form-success');
            if (form) {
                form.addEventListener('submit', function (e) {
                    let valid = true;
                    msg.style.display = 'none';
                    success.style.display = 'none';
                    Array.from(form.elements).forEach(el => {
                        if (el.classList.contains('form-control')) {
                            el.style.borderColor = '';
                        }
                    });
                    ['name', 'email', 'betreff', 'nachricht'].forEach(id => {
                        const el = document.getElementById(id);
                        if (!el.value.trim()) {
                            el.style.borderColor = 'red';
                            valid = false;
                        }
                    });
                    if (!valid) {
                        e.preventDefault();
                        msg.textContent = 'Please, fill in all fields.';
                        msg.style.display = 'block';
                        return false;
                    }
                });
                if (window.location.search.includes('success=true')) {
                    success.textContent = 'Message sent successfully!';
                    success.style.display = 'block';
                }
            }
        });

        document.addEventListener('DOMContentLoaded', function () {
            const sections = Array.from(document.querySelectorAll('section')).filter(s => s.id !== 'veroeffentlichungen');
            const options = {
                root: null,
                rootMargin: '0px',
                threshold: 0.5
            };
            let lastActive = null;
            const observer = new window.IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    const h2 = entry.target.querySelector('h2');
                    if (!h2) return;
                    if (entry.isIntersecting) {
                        h2.classList.add('section-active-title');
                        h2.style.backgroundSize = '100% 100%';
                        if (lastActive && lastActive !== h2) {
                            lastActive.classList.remove('section-active-title');
                            lastActive.style.backgroundSize = '0% 100%';
                        }
                        lastActive = h2;
                    } else {
                        h2.classList.remove('section-active-title');
                        h2.style.backgroundSize = '0% 100%';
                    }
                });
            }, options);
            sections.forEach(section => {
                const h2 = section.querySelector('h2');
                if (h2) h2.style.backgroundSize = '0% 100%';
                observer.observe(section);
            });
        });
    </script>

    <!-- EN/DE: Footer with university contact info and social media links. -->
    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6 map-img md-margin-bottom-40">
                    <div class="headline">
                        <span class="as-h2">Contact</span>
                    </div>
                    <address class="md-margin-bottom-40">
                        bbw Hochschule<br />
                        Wagner-Régeny-Str. 21<br />
                        12489 Berlin<br />
                        E-Mail: <a href="mailto:info@bbw-hochschule.de">info@bbw-hochschule.de</a><br />
                        TEL: 030 31990950<br />
                        FAX: 030 319909555
                    </address>
                </div>
                <div class="col-md-3 col-sm-6 md-margin-bottom-40">
                    <div class="posts">
                        <div class="headline">
                            <span class="as-h2">Other bbw websites</span>
                        </div>
                        <ul class="list-unstyled link-list">
                            <li><a href="https://www.bbw-gruppe.de" target="_blank"><i
                                        class="fa fa-fw fa-angle-right"></i>bbw Gruppe</a></li>
                            <li><a href="https://www.bbw-weiterbildung.de" target="_blank"><i
                                        class="fa fa-fw fa-angle-right"></i>bbw Weiterbildung</a></li>
                            <li><a href="https://bbw-berufliche-schulen.de" target="_blank"><i
                                        class="fa fa-fw fa-angle-right"></i>bbw berufliche Schulen</a></li>
                            <li><a href="https://www.bbw-drehscheibe.de" target="_blank"><i
                                        class="fa fa-fw fa-angle-right"></i>bbw Drehscheibe</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 col-sm-12 md-margin-bottom-40">
                    <div class="headline">
                        <span class="as-h2">Further information</span>
                    </div>
                    <ul class="list-unstyled link-list">
                        <li><a href="/about-us/current/careers.html"><i class="fa fa-fw fa-angle-right"></i>Careers</a>
                        </li>
                        <li><a href="/studies/guidance/contact-form.html"><i class="fa fa-fw fa-angle-right"></i>Contact
                                form</a></li>
                        <li><a href="/about-us/current/news.html"><i class="fa fa-fw fa-angle-right"></i>News</a></li>
                        <li><a href="/about-us/current/events.html"><i class="fa fa-fw fa-angle-right"></i>Events</a>
                        </li>
                        <li><a href="/Imprint.html"><i class="fa fa-fw fa-angle-right"></i>Imprint</a></li>
                        <li><a href="/Data-privacy.html"><i class="fa fa-fw fa-angle-right"></i>Data privacy</a></li>
                        <li><a href="/data-privacy-elearning.html"><i class="fa fa-fw fa-angle-right"></i>Data privacy
                                eLearning</a></li>
                        <li><a href="/cookie-declaration.html"><i
                                    class="fa fa-fw fa-angle-right"></i>cookie-declaration</a></li>
                    </ul>
                </div>
                <div class="col-md-3 col-sm-12 md-margin-bottom-40">
                    <div class="headline">
                        <span class="as-h2">Social Media</span>
                    </div>
                    <ul class="footer-socials list-inline">
                        <li><a href="https://www.facebook.com/bbwHochschule?sk=wall" target="_blank"><i
                                    class="fa fa-fw fa-facebook"></i></a></li>
                        <li><a href="https://www.instagram.com/bbwhochschule" target="_blank"><i
                                    class="fa fa-fw fa-instagram"></i></a></li>
                        <li><a href="https://www.linkedin.com/school/bbw-hochschule/" target="_blank"><i
                                    class="fa fa-fw fa-linkedin"></i></a></li>
                        <li><a href="https://www.youtube.com/channel/UCTKIsljgiR_iXJwgtIrS0jw" target="_blank"><i
                                    class="fa fa-fw fa-youtube"></i></a></li>
                        <li><a href="https://www.tiktok.com/@bbwhochschule" target="_blank"><img alt="TikTok"
                                    height="20" src="/static/images/tiktok_logo.webp" width="22"
                                    style="vertical-align:middle;" /></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script>
        const header = document.getElementById("main-header");
        const title = document.getElementById("header-title");

        // Usar un valor fijo para startHeight para máxima estabilidad
        const startHeight = 400; // px, ajusta según el diseño inicial del header
        const endHeight = 80;
        const startFont = 2.8;
        const endFont = 1.8;
        const maxScroll = 600; // Más alto = animación más lenta

        window.addEventListener("scroll", () => {
            const scrollTop = window.scrollY;
            const progress = Math.min(Math.max(scrollTop / maxScroll, 0), 1);

            let newHeight = startHeight - (startHeight - endHeight) * progress;
            newHeight = Math.max(newHeight, endHeight);
            header.style.height = newHeight + "px";

            let newFont = startFont - (startFont - endFont) * progress;
            newFont = Math.max(newFont, endFont);
            title.style.fontSize = newFont + "rem";

            const newLeft = 0 + (50 - 0) * progress;
            title.style.left = newLeft + "%";
            title.style.transform = `translateX(-${50 * progress}%)`;
        });
    </script>

</body>

</html>