Schnellstart: Unterschied zwischen den Versionen

Aus DG HochN-Wiki
Wechseln zu:Navigation, Suche
Pete Walker (Diskussion | Beiträge)
Test Einführung NAchhaltige Beschaffung
Markierung: Quelltext-Bearbeitung 2017
 
Pete Walker (Diskussion | Beiträge)
KKeine Bearbeitungszusammenfassung
Markierung: Quelltext-Bearbeitung 2017
 
(Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt)
Zeile 4: Zeile 4:
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Nachhaltige Beschaffung - 10 Schritte Guide</title>
     <title>Nachhaltigkeits-Guide der DG HochN</title>
    <!-- Tailwind CSS CDN für schnelles und responsives Styling -->
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
     <style>
     <style>
         body {
         /* Zusätzliche, spezifische Stile */
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        .accordion-panel {
             background-color: #f3f4f6;
             max-height: 0;
            overflow: hidden;
             transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
         }
         }
         .step-card {
         .accordion-button {
             transition: all 0.3s ease;
             transition: background-color 0.2s;
            cursor: pointer;
         }
         }
         .progress-bar {
         .accordion-button:hover {
            transition: width 0.5s ease-in-out;
             background-color: #e0f2fe; /* light blue hover */
        }
        .fade-in {
             animation: fadeIn 0.5s ease-in;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
         }
         }
     </style>
     </style>
</head>
</head>
<body class="min-h-screen flex flex-col text-gray-800">
<body class="font-sans antialiased bg-gray-50 p-2 sm:p-4">
 
    <!-- Header -->
    <header class="bg-emerald-700 text-white shadow-lg">
        <div class="container mx-auto px-4 py-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl md:text-3xl font-bold flex items-center gap-2">
                        <i data-lucide="leaf" class="h-8 w-8"></i>
                        Nachhaltig Beschaffen
                    </h1>
                    <p class="text-emerald-100 mt-1">Der Quick-Start-Guide für Hochschulmitarbeitende</p>
                </div>
                <div class="hidden md:block text-right text-sm text-emerald-100">
                    <p>Ziel: 10 Schritte zum Erfolg</p>
                    <p>Dauer: ~5 Minuten</p>
                </div>
            </div>
        </div>
    </header>


     <!-- Main Content -->
     <div id="app" class="max-w-4xl mx-auto bg-white shadow-xl rounded-xl overflow-hidden">
    <main class="flex-grow container mx-auto px-4 py-8 max-w-4xl">
        
        
         <!-- Progress Indicator -->
         <!-- HEADER -->
         <div class="mb-8">
         <header class="bg-blue-800 text-white p-6 sm:p-8">
             <div class="flex justify-between text-sm font-medium text-gray-500 mb-2">
             <h1 class="text-2xl sm:text-3xl font-extrabold mb-1">
                 <span id="progress-text">Schritt 1 von 10</span>
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6 inline-block mr-2 align-text-bottom">
                <span id="progress-percent">10%</span>
                  <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
            </div>
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6.25l-7.5 7.5l-2.5-2.5" />
            <div class="w-full bg-gray-200 rounded-full h-2.5">
                </svg>
                <div id="progress-bar" class="bg-emerald-600 h-2.5 rounded-full progress-bar" style="width: 10%"></div>
                Nachhaltigkeits-Leitfaden
             </div>
            </h1>
         </div>
             <p class="text-sm opacity-90">DG HochN: Effizienz & Verantwortung in Navigation und Hochleistung.</p>
         </header>


         <!-- Content Card Area -->
         <!-- HAUPTINHALT (AKKORDEON) -->
         <div id="card-container" class="bg-white rounded-xl shadow-xl overflow-hidden min-h-[400px] relative">
         <main class="p-4 sm:p-6 space-y-4">
            <!-- Content will be injected here by JS -->
         
        </div>
            <div class="space-y-2" id="accordion-container">
             
                <!-- AKKORDEON ELEMENT 1: Grüne IT und HPC -->
                <div class="border border-blue-200 rounded-lg overflow-hidden">
                    <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)">
                        <span class="text-lg">1. Grüne IT und Hochleistungs-Computing (HPC)</span>
                        <span id="icon-1" class="transform transition-transform duration-300">
                            <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>
                        </span>
                    </button>
                    <div id="panel-1" class="accordion-panel bg-white p-4">
                        <h3 class="font-bold text-gray-700 mb-2">Fokus: Energieeffizienz in Rechenzentren</h3>
                        <ul class="list-disc list-inside space-y-1 ml-4 text-gray-600">
                            <li>Priorisierung von Freikühlsystemen und Nutzung der Abwärme.</li>
                            <li>Einsatz von Servern mit höchsten Energieeffizienz-Zertifizierungen (z. B. 80 PLUS Titanium).</li>
                            <li>Maximale Hardware-Auslastung durch Virtualisierung zur Reduzierung der physischen Geräte.</li>
                        </ul>
                        <h3 class="font-bold text-gray-700 mt-4 mb-2">Code- und Algorithmus-Optimierung</h3>
                        <ul class="list-disc list-inside space-y-1 ml-4 text-gray-600">
                            <li>Entwicklung von Algorithmen mit minimaler Time-to-Solution und geringstem Rechenbedarf.</li>
                            <li>Effiziente Speichernutzung und Reduzierung energieintensiver Datentransfers.</li>
                            <li>Bevorzugung von Cloud-Diensten, die 100% erneuerbare Energien nutzen.</li>
                        </ul>
                    </div>
                </div>


        <!-- Navigation Buttons -->
                <!-- AKKORDEON ELEMENT 2: Lebenszyklus von Hardware -->
        <div class="flex justify-between mt-8">
                <div class="border border-blue-200 rounded-lg overflow-hidden">
            <button id="prev-btn" class="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-gray-600 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" disabled onclick="prevStep()">
                    <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)">
                <i data-lucide="arrow-left" class="h-5 w-5"></i>
                        <span class="text-lg">2. Lebenszyklus von Hardware und Beschaffung</span>
                Zurück
                        <span id="icon-2" class="transform transition-transform duration-300">
            </button>
                            <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">
            <button id="next-btn" class="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-white bg-emerald-600 hover:bg-emerald-700 transition-colors shadow-md" onclick="nextStep()">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                Weiter
                            </svg>
                <i data-lucide="arrow-right" class="h-5 w-5"></i>
                        </span>
            </button>
                    </button>
        </div>
                    <div id="panel-2" class="accordion-panel bg-white p-4">
 
                         <h3 class="font-bold text-gray-700 mb-2">Zirkuläre Beschaffung</h3>
    </main>
                         <ul class="list-disc list-inside space-y-1 ml-4 text-gray-600">
 
                             <li>Ziel: Nutzungsdauer von 5 Jahren oder mehr für alle IT-Komponenten.</li>
    <!-- Footer -->
                            <li>Bevorzugung modularer, leicht reparierbarer und aufrüstbarer Hardware.</li>
    <footer class="bg-gray-800 text-gray-400 py-6 mt-auto">
                            <li>Prüfung des Einsatzes zertifizierter wiederaufbereiteter Hardware für Sekundäraufgaben.</li>
        <div class="container mx-auto px-4 text-center text-sm">
                        </ul>
            <p>Ein interaktives Lerntool für den öffentlichen Dienst.</p>
                        <h3 class="font-bold text-gray-700 mt-4 mb-2">Entsorgung (E-Waste Management)</h3>
            <p class="mt-2">Quellenhinweis: Basiert auf Informationen des UBA, der KNB und DG HochN.</p>
                         <ul class="list-disc list-inside space-y-1 ml-4 text-gray-600">
        </div>
                             <li>Sicherstellung des Recyclings über zertifizierte Partner mit hoher Rohstoff-Rückgewinnungsquote.</li>
    </footer>
                             <li>Verwendung von zertifizierten Verfahren zur vollständigen Datenlöschung vor dem Recycling.</li>
 
    <!-- JavaScript Logic -->
    <script>
        const steps = [
            {
                title: "Warum du wichtig bist",
                icon: "target",
                content: `
                    <div class="space-y-4">
                         <p class="text-lg font-medium text-emerald-800">Dein Hebel ist größer als du denkst.</p>
                        <p>Auch wenn du nicht in der zentralen Beschaffung sitzt: Jede Bestellung zählt. Die öffentliche Hand in Deutschland vergibt Aufträge im Wert von ca. <strong>400 bis 500 Milliarden Euro</strong> jährlich.</p>
                         <div class="bg-emerald-50 p-4 rounded-lg border-l-4 border-emerald-500">
                             <p class="text-sm"><strong>Der Impact:</strong> Hochschulen sind Vorbilder. Wenn wir nachhaltig einkaufen, stärken wir grüne Märkte und senden ein Signal an Studierende und Gesellschaft.</p>
                        </div>
                        <p>Du startest den Prozess durch deine Bedarfsanforderung. Du definierst, was gebraucht wird. Genau hier entscheidest du über Nachhaltigkeit!</p>
                    </div>
                `,
                tip: "Schon gewusst? Auch kleine Budgets summieren sich an einer Hochschule zu riesigen Beträgen."
            },
            {
                title: "Darf ich das überhaupt?",
                icon: "scale",
                content: `
                    <div class="space-y-4">
                        <p class="text-lg font-medium text-emerald-800">Ja! Der Mythos "Billigstpreis" ist Geschichte.</p>
                        <p>Viele denken, man müsse immer das billigste Angebot nehmen. Das ist falsch.</p>
                         <ul class="list-disc pl-5 space-y-2">
                             <li><strong>Rechtslage:</strong> Das Vergaberecht (§ 97 GWB, VgV, UVgO) erlaubt und <em>fordert</em> sogar die Berücksichtigung von sozialen und ökologischen Aspekten.</li>
                             <li><strong>Das wirtschaftlichste Angebot</strong> erhält den Zuschlag, nicht zwingend das billigste. Nachhaltigkeit ist ein Qualitätskriterium.</li>
                         </ul>
                         </ul>
                        <div class="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500">
                            <p class="text-sm"><strong>Merkregel:</strong> Du darfst spezifische Umweltzeichen (wie den Blauen Engel) als Nachweis in der Leistungsbeschreibung fordern.</p>
                        </div>
                     </div>
                     </div>
                 `,
                 </div>
                tip: "Sprich frühzeitig mit deiner Verwaltung – oft fehlt nur das Wissen, dass es rechtssicher möglich ist."
             
            },
                <!-- AKKORDEON ELEMENT 3: Nachhaltige Navigation und Mobilität -->
            {
                <div class="border border-blue-200 rounded-lg overflow-hidden">
                title: "Schritt 0: Brauche ich das?",
                    <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)">
                icon: "help-circle",
                         <span class="text-lg">3. Nachhaltige Navigation und Mobilität</span>
                content: `
                         <span id="icon-3" class="transform transition-transform duration-300">
                    <div class="space-y-4">
                             <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">
                        <p class="text-lg font-medium text-emerald-800">Die nachhaltigste Beschaffung ist die, die nicht stattfindet.</p>
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                        <p>Bevor du eine Bestellung auslöst, stelle die <strong>Suffizienz-Frage</strong>:</p>
                             </svg>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2">
                         </span>
                            <div class="bg-white border p-3 rounded shadow-sm">
                     </button>
                                <h4 class="font-bold text-gray-700">Interner Tausch</h4>
                     <div id="panel-3" class="accordion-panel bg-white p-4">
                                <p class="text-sm text-gray-600">Gibt es das Gerät in einem anderen Institut ungenutzt? (Schwarze Bretter, Inventarlisten)</p>
                         <h3 class="font-bold text-gray-700 mb-2">Green Routing</h3>
                            </div>
                        <ul class="list-disc list-inside space-y-1 ml-4 text-gray-600">
                            <div class="bg-white border p-3 rounded shadow-sm">
                             <li>Forschung und Entwicklung von Algorithmen zur Berechnung der '''emissionsärmsten''' Route (nicht nur der kürzesten).</li>
                                <h4 class="font-bold text-gray-700">Reparatur</h4>
                             <li>Berücksichtigung von Ladeinfrastruktur, Topografie und spezifischen Fahrzeugemissionen.</li>
                                <p class="text-sm text-gray-600">Lohnt sich eine Reparatur statt Neukauf? Gibt es eine Werkstatt an der Uni?</p>
                             <li>Integration multimodaler Lösungen (ÖPNV, Rad, Fußgänger) in Navigationssysteme.</li>
                            </div>
                            <div class="bg-white border p-3 rounded shadow-sm">
                                <h4 class="font-bold text-gray-700">Gemeinsame Nutzung</h4>
                                <p class="text-sm text-gray-600">Können wir uns den teuren Spezialscanner mit dem Nachbarlehrstuhl teilen?</p>
                            </div>
                        </div>
                    </div>
                `,
                tip: "Checke, ob deine Hochschule eine 'Möbelbörse' oder ein Intranet-Forum für Gebrauchtgeräte hat."
            },
            {
                title: "Der wahre Preis (LCC)",
                icon: "calculator",
                content: `
                    <div class="space-y-4">
                         <p class="text-lg font-medium text-emerald-800">Schau nicht nur auf das Preisschild.</p>
                        <p>Ein billiger Drucker, der viel Strom frisst und dessen Toner ein Vermögen kostet, ist am Ende teurer. Das Zauberwort heißt <strong>Lebenszykluskostenrechnung (LCC)</strong>.</p>
                         <p>Du darfst Anschaffungskosten + Betriebskosten (Strom, Wasser, Wartung) + Entsorgungskosten zusammenrechnen.</p>
                        <div class="bg-gray-100 p-4 rounded text-sm font-mono border border-gray-300">
                             Wirtschaftlichstes Angebot = <br>
                            Kaufpreis + (Stromverbrauch × Nutzungsjahre × Strompreis)
                        </div>
                        <p class="text-sm">Das Umweltbundesamt (UBA) bietet dafür kostenlose Excel-Tools an.</p>
                    </div>
                `,
                tip: "Tool-Tipp: Suche nach 'UBA Lebenszykluskostenrechner' für fertige Excel-Vorlagen."
            },
            {
                title: "Wegweiser im Label-Dschungel",
                icon: "tag",
                content: `
                    <div class="space-y-4">
                        <p class="text-lg font-medium text-emerald-800">Verlass dich auf starke Siegel.</p>
                        <p>Du musst kein Experte für chemische Inhaltsstoffe sein. Nutze etablierte Gütezeichen in deiner Anforderung:</p>
                        <div class="space-y-2">
                            <div class="flex items-center gap-3">
                                <span class="bg-blue-100 text-blue-800 font-bold px-2 py-1 rounded">Blauer Engel</span>
                                <span class="text-sm">Der Goldstandard in Deutschland (Papier, Drucker, Möbel, Rechenzentren).</span>
                            </div>
                            <div class="flex items-center gap-3">
                                 <span class="bg-green-100 text-green-800 font-bold px-2 py-1 rounded">TCO / EPEAT</span>
                                <span class="text-sm">Wichtig für IT-Hardware (Laptops, Monitore). Achte auf EPEAT Gold/Silver.</span>
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="bg-orange-100 text-orange-800 font-bold px-2 py-1 rounded">Fairtrade</span>
                                <span class="text-sm">Für Catering, Kaffee, Textilien (Merchandise) oder sogar Natursteine.</span>
                             </div>
                         </div>
                     </div>
                `,
                tip: "Webseite 'Siegelklarheit.de' oder 'Kompass Nachhaltigkeit' checken, um glaubwürdige Siegel zu finden."
            },
            {
                title: "Quick-Wins: Wo anfangen?",
                icon: "zap",
                content: `
                     <div class="space-y-4">
                        <p class="text-lg font-medium text-emerald-800">Fang einfach an, aber fang richtig an.</p>
                         <p>Hier sind die einfachsten Kategorien für den Einstieg in deinem Büro/Institut:</p>
                        <ul class="grid grid-cols-2 gap-2 text-sm">
                            <li class="bg-emerald-50 p-2 rounded flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-600"></i> Recyclingpapier (Blauer Engel)</li>
                            <li class="bg-emerald-50 p-2 rounded flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-600"></i> Nachfüllbare Stifte</li>
                             <li class="bg-emerald-50 p-2 rounded flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-600"></i> LED-Beleuchtung</li>
                             <li class="bg-emerald-50 p-2 rounded flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-600"></i> Bio/Fairtrade Kaffee</li>
                             <li class="bg-emerald-50 p-2 rounded flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-600"></i> Ökostrom (oft zentral, aber nachfragen!)</li>
                            <li class="bg-emerald-50 p-2 rounded flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-600"></i> Leitungswasser statt Flaschen</li>
                         </ul>
                         </ul>
                    </div>
                         <h3 class="font-bold text-gray-700 mt-4 mb-2">Interne Operationen</h3>
                `,
                         <ul class="list-disc list-inside space-y-1 ml-4 text-gray-600">
                tip: "Papier ist der Klassiker: Umstellung auf 100% Recyclingpapier spart massiv Wasser und Energie."
                             <li>Konsequente Umsetzung des papierlosen Büros.</li>
            },
                             <li>Priorisierung von Videokonferenzen und Bahnfahrt (statt Flug) für Dienstreisen.</li>
            {
                title: "Soziale Verantwortung",
                icon: "globe",
                content: `
                    <div class="space-y-4">
                         <p class="text-lg font-medium text-emerald-800">Nachhaltigkeit ist mehr als Umweltschutz.</p>
                        <p>Viele Produkte (IT, Textilien, Natursteine) werden im globalen Süden unter unwürdigen Bedingungen hergestellt.</p>
                        <p>Öffentliche Auftraggeber können die Einhaltung der <strong>ILO-Kernarbeitsnormen</strong> (Verbot von Kinderarbeit, Zwangsarbeit) vertraglich fordern.</p>
                        <div class="bg-orange-50 p-4 rounded-lg border-l-4 border-orange-400 text-sm">
                            <p><strong>Achtung bei IT:</strong> Hier ist die Lieferkette komplex. Fordere Nachweise über Sozialaudits oder Mitgliedschaften (z.B. Electronics Watch), wenn möglich.</p>
                         </div>
                    </div>
                `,
                tip: "Frage bei Werbemitteln (T-Shirts, Taschen) gezielt nach Fairtrade-Cotton oder GOTS."
            },
            {
                title: "Wo bekomme ich Hilfe?",
                icon: "life-buoy",
                content: `
                    <div class="space-y-4">
                        <p class="text-lg font-medium text-emerald-800">Niemand muss das Rad neu erfinden.</p>
                        <p>Es gibt staatliche Stellen, deren einziger Job es ist, dir zu helfen:</p>
                        <div class="space-y-3">
                            <a href="https://www.nachhaltige-beschaffung.info" target="_blank" class="block p-3 border rounded hover:bg-gray-50 transition flex justify-between items-center group">
                                <div>
                                    <strong>KNB (Kompetenzstelle nachhaltige Beschaffung)</strong>
                                    <p class="text-xs text-gray-500">Bietet Hotline, E-Mail-Beratung und Schulungen.</p>
                                </div>
                                <i data-lucide="external-link" class="w-4 h-4 text-gray-400 group-hover:text-emerald-600"></i>
                            </a>
                             <a href="https://www.umweltbundesamt.de/themen/wirtschaft-konsum/umweltfreundliche-beschaffung" target="_blank" class="block p-3 border rounded hover:bg-gray-50 transition flex justify-between items-center group">
                                <div>
                                    <strong>Umweltbundesamt (UBA)</strong>
                                    <p class="text-xs text-gray-500">Leitfäden für fast jede Produktgruppe.</p>
                                </div>
                                <i data-lucide="external-link" class="w-4 h-4 text-gray-400 group-hover:text-emerald-600"></i>
                            </a>
                        </div>
                    </div>
                `,
                tip: "Speichere dir die KNB-Webseite als Lesezeichen. Sie ist die 'Bibel' für öffentliche Beschaffer."
            },
            {
                title: "Verbündete suchen",
                icon: "users",
                content: `
                    <div class="space-y-4">
                        <p class="text-lg font-medium text-emerald-800">Netzwerken ist der Schlüssel.</p>
                        <p>Du sitzt in einer Hochschule – nutze das Wissen vor Ort!</p>
                        <ul class="list-disc pl-5 space-y-2 text-sm">
                            <li><strong>Nachhaltigkeitsbüro / Green Office:</strong> Fast jede Uni hat inzwischen eins. Sie unterstützen dich gerne.</li>
                            <li><strong>Zentrale Beschaffung:</strong> Sprich sie an. Frage: "Wie können wir bei Produkt X nachhaltiger werden?" Oft warten sie nur auf Impulse aus den Fachbereichen.</li>
                             <li><strong>Netzwerk n / DG HochN:</strong> Vernetze dich mit anderen Hochschulen, die schon weiter sind.</li>
                         </ul>
                         </ul>
                     </div>
                     </div>
                 `,
                 </div>
                tip: "Studierende können oft im Rahmen von Projekten oder Abschlussarbeiten Konzepte für nachhaltigere Prozesse erarbeiten."
            },
            {
                title: "Fazit: Einfach machen!",
                icon: "play-circle",
                content: `
                    <div class="space-y-4">
                        <p class="text-lg font-medium text-emerald-800">Perfektion ist der Feind des Guten.</p>
                        <p>Warte nicht auf die "große Strategie" von oben.</p>
                        <div class="bg-emerald-100 p-4 rounded-lg text-emerald-900 font-medium text-center">
                            Starte ein Pilotprojekt.
                        </div>
                        <p>Bestelle den fairen Kaffee für das nächste Meeting. Kaufe das Refurbished-Tablet für den Außeneinsatz. Dokumentiere, dass es funktioniert (und nicht teurer war). Erzähle davon im Team.</p>
                        <p><strong>Nachhaltigkeit ist ein Prozess, kein Zustand. Dein erster Schritt zählt.</strong></p>
                    </div>
                `,
                tip: "Viel Erfolg bei deiner ersten nachhaltigen Beschaffung!"
            }
        ];


         let currentStep = 0;
            </div>
         </main>
     
        <!-- FOOTER -->
        <footer class="p-4 bg-gray-100 text-center text-sm text-gray-500 border-t">
            <p>Dieser Leitfaden ist ein lebendiges Dokument. Für Vorschläge zur Erweiterung wenden Sie sich bitte an das DG HochN Nachhaltigkeits-Team.</p>
        </footer>
    </div>


         function updateUI() {
    <script>
            // Update Progress Bar
         /**
            const progress = ((currentStep + 1) / steps.length) * 100;
        * Funktion zum Umschalten (Toggle) des Akkordeon-Elements.
            document.getElementById('progress-bar').style.width = `${progress}%`;
        * @param {number} id - Die ID des Elements (1, 2, 3, etc.).
             document.getElementById('progress-text').innerText = `Schritt ${currentStep + 1} von ${steps.length}`;
        */
            document.getElementById('progress-percent').innerText = `${Math.round(progress)}%`;
        function toggleAccordion(id) {
 
             const panel = document.getElementById(`panel-${id}`);
            // Update Card Content
             const icon = document.getElementById(`icon-${id}`);
            const step = steps[currentStep];
             const container = document.getElementById('card-container');
         
            // Generate HTML for card
            container.innerHTML = `
                <div class="fade-in h-full flex flex-col p-6 md:p-8">
                    <div class="flex items-center gap-4 mb-6">
                        <div class="p-3 bg-emerald-100 text-emerald-700 rounded-full">
                            <i data-lucide="${step.icon}" class="w-8 h-8"></i>
                        </div>
                        <h2 class="text-2xl font-bold text-gray-800">${step.title}</h2>
                    </div>
                 
                    <div class="flex-grow text-gray-600 leading-relaxed text-base">
                        ${step.content}
                    </div>


                    <div class="mt-8 pt-4 border-t border-gray-100 flex items-start gap-3 text-sm text-gray-500 bg-gray-50 p-4 rounded-lg">
            // Überprüfen, ob das Panel derzeit geöffnet ist (maxHeight ist gesetzt)
                        <i data-lucide="lightbulb" class="w-5 h-5 text-yellow-500 flex-shrink-0 mt-0.5"></i>
            const isPanelOpen = panel.style.maxHeight && panel.style.maxHeight !== '0px';
                        <div>
                            <span class="font-semibold text-gray-700">Pro-Tipp:</span>
                            ${step.tip}
                        </div>
                    </div>
                </div>
            `;


             // Refresh Icons
             // Alle Panels schließen, außer dem aktuellen, wenn es bereits offen ist
             lucide.createIcons();
            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>`;
            });


            // Button States
            document.getElementById('prev-btn').disabled = currentStep === 0;
            const nextBtn = document.getElementById('next-btn');
            if (currentStep === steps.length - 1) {
                nextBtn.innerHTML = `Fertig <i data-lucide="check" class="h-5 w-5"></i>`;
                nextBtn.classList.remove('bg-emerald-600', 'hover:bg-emerald-700');
                nextBtn.classList.add('bg-gray-800', 'hover:bg-gray-900');
            } else {
                nextBtn.innerHTML = `Weiter <i data-lucide="arrow-right" class="h-5 w-5"></i>`;
                nextBtn.classList.add('bg-emerald-600', 'hover:bg-emerald-700');
                nextBtn.classList.remove('bg-gray-800', 'hover:bg-gray-900');
            }
        }


        function nextStep() {
             if (!isPanelOpen) {
             if (currentStep < steps.length - 1) {
                 // Das aktuelle Panel öffnen
                 currentStep++;
                // scrollHeight liefert die tatsächliche Höhe des Inhalts
                 updateUI();
                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>`;
             }
             }
         }
         }
 
     
         function prevStep() {
         // Initialer Aufruf, um sicherzustellen, dass das Padding beim Start richtig gesetzt ist.
            if (currentStep > 0) {
        document.addEventListener('DOMContentLoaded', () => {
                 currentStep--;
            document.querySelectorAll('.accordion-panel').forEach(p => {
                 updateUI();
                 // Stellt sicher, dass die Panels initial unsichtbar sind und kein Padding haben
             }
                p.style.maxHeight = '0';
         }
                 p.style.padding = '0 1rem';
 
             });
        // Initialize
         });
        updateUI();
     </script>
     </script>
</body>
</body>
</html>
</html>
Jede neue Seite wird automatisch der Kategorie 'Draft' hinzugefügt, wodurch sie für Websitebesucher gesperrt ist. Wenn Sie die Seite direkt veröffentlichen wollen, entfernen Sie sie einfach aus der Kategorie.
[[Category:Draft]]

Aktuelle Version vom 1. Dezember 2025, 14:36 Uhr

<!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">

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6 inline-block mr-2 align-text-bottom"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6.25l-7.5 7.5l-2.5-2.5" /> </svg> 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>

Cookies helfen uns bei der Bereitstellung von DG HochN-Wiki. Durch die Nutzung von DG HochN-Wiki erklärst du dich damit einverstanden, dass wir Cookies speichern.