<!DOCTYPE html> <html lang="de"> <head>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Nachhaltigkeits-Guide der DG HochN</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
       /* Zusätzliche, spezifische Stile */
       .accordion-panel {
           max-height: 0;
           overflow: hidden;
           transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
       }
       .accordion-button {
           transition: background-color 0.2s;
           cursor: pointer;
       }
       .accordion-button:hover {
           background-color: #e0f2fe; /* light blue hover */
       }
   </style>

</head> <body class="font-sans antialiased bg-gray-50 p-2 sm:p-4">

       <header class="bg-blue-800 text-white p-6 sm:p-8">

Nachhaltigkeits-Leitfaden

DG HochN: Effizienz & Verantwortung in Navigation und Hochleistung.

       </header>

       <main class="p-4 sm:p-6 space-y-4">

                   <button id="btn-1" class="accordion-button w-full flex justify-between items-center p-4 bg-blue-50 text-blue-800 font-semibold text-left focus:outline-none" onclick="toggleAccordion(1)">
                       1. Grüne IT und Hochleistungs-Computing (HPC)
                       
                           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
                               <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                           </svg>
                       
                   </button>

Fokus: Energieeffizienz in Rechenzentren

Priorisierung von Freikühlsystemen und Nutzung der Abwärme.
Einsatz von Servern mit höchsten Energieeffizienz-Zertifizierungen (z. B. 80 PLUS Titanium).
Maximale Hardware-Auslastung durch Virtualisierung zur Reduzierung der physischen Geräte.

Code- und Algorithmus-Optimierung

Entwicklung von Algorithmen mit minimaler Time-to-Solution und geringstem Rechenbedarf.
Effiziente Speichernutzung und Reduzierung energieintensiver Datentransfers.
Bevorzugung von Cloud-Diensten, die 100% erneuerbare Energien nutzen.

                   <button id="btn-2" class="accordion-button w-full flex justify-between items-center p-4 bg-blue-50 text-blue-800 font-semibold text-left focus:outline-none" onclick="toggleAccordion(2)">
                       2. Lebenszyklus von Hardware und Beschaffung
                       
                           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
                               <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                           </svg>
                       
                   </button>

Zirkuläre Beschaffung

Ziel: Nutzungsdauer von 5 Jahren oder mehr für alle IT-Komponenten.
Bevorzugung modularer, leicht reparierbarer und aufrüstbarer Hardware.
Prüfung des Einsatzes zertifizierter wiederaufbereiteter Hardware für Sekundäraufgaben.

Entsorgung (E-Waste Management)

Sicherstellung des Recyclings über zertifizierte Partner mit hoher Rohstoff-Rückgewinnungsquote.
Verwendung von zertifizierten Verfahren zur vollständigen Datenlöschung vor dem Recycling.

                   <button id="btn-3" class="accordion-button w-full flex justify-between items-center p-4 bg-blue-50 text-blue-800 font-semibold text-left focus:outline-none" onclick="toggleAccordion(3)">
                       3. Nachhaltige Navigation und Mobilität
                       
                           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
                               <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                           </svg>
                       
                   </button>

Green Routing

Forschung und Entwicklung von Algorithmen zur Berechnung der emissionsärmsten Route (nicht nur der kürzesten).
Berücksichtigung von Ladeinfrastruktur, Topografie und spezifischen Fahrzeugemissionen.
Integration multimodaler Lösungen (ÖPNV, Rad, Fußgänger) in Navigationssysteme.

Interne Operationen

Konsequente Umsetzung des papierlosen Büros.
Priorisierung von Videokonferenzen und Bahnfahrt (statt Flug) für Dienstreisen.

       </main>
      
       <footer class="p-4 bg-gray-100 text-center text-sm text-gray-500 border-t">

Dieser Leitfaden ist ein lebendiges Dokument. Für Vorschläge zur Erweiterung wenden Sie sich bitte an das DG HochN Nachhaltigkeits-Team.

       </footer>

   <script>
       /**
        * Funktion zum Umschalten (Toggle) des Akkordeon-Elements.
        * @param {number} id - Die ID des Elements (1, 2, 3, etc.).
        */
       function toggleAccordion(id) {
           const panel = document.getElementById(`panel-${id}`);
           const icon = document.getElementById(`icon-${id}`);

           // Überprüfen, ob das Panel derzeit geöffnet ist (maxHeight ist gesetzt)
           const isPanelOpen = panel.style.maxHeight && panel.style.maxHeight !== '0px';

           // Alle Panels schließen, außer dem aktuellen, wenn es bereits offen ist
           document.querySelectorAll('.accordion-panel').forEach(p => {
               p.style.maxHeight = '0';
               p.style.padding = '0 1rem'; // Padding zurücksetzen, um den Übergang zu glätten
           });
           document.querySelectorAll('[id^="icon-"]').forEach(i => {
                // Setzt alle Icons auf das 'Plus' (geschlossen)
               i.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
                               <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                           </svg>`;
           });

           if (!isPanelOpen) {
               // Das aktuelle Panel öffnen
               // scrollHeight liefert die tatsächliche Höhe des Inhalts
               panel.style.maxHeight = panel.scrollHeight + "px";
               panel.style.padding = '1rem';
              
               // Icon auf 'Minus' (geöffnet) setzen
               icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
                               <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
                           </svg>`;
           }
       }
      
       // Initialer Aufruf, um sicherzustellen, dass das Padding beim Start richtig gesetzt ist.
       document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('.accordion-panel').forEach(p => {
               // Stellt sicher, dass die Panels initial unsichtbar sind und kein Padding haben
               p.style.maxHeight = '0';
               p.style.padding = '0 1rem';
           });
       });
   </script>

</body> </html>

Schnellstart

Inhaltsverzeichnis