{% block title %}
    Energiesicherheit
{% endblock %}

{% block content %}
<p>
    Deutschland kann unterschiedliche Strategien nutzen, um sein Energiesystem resilienter zu machen.
    <!--Jede Strategie hat Vorteile, ist jedoch auch mit Kosten verbunden.-->
    Drei Strategien werden im Folgenden näher erläutert.
</p>

<!-- Option 1 Box -->
<div style="border: 1px solid #ccc; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: justify;">
    <p>
        <b>Heimische Produktion (<i>Reshoring</i>):
        Energie wird hauptsächlich in Deutschland erzeugt, nur geringe Teile werden importiert.</b>
        Deutschland ist in diesem Fall kaum von Schocks in anderen Ländern betroffen.
        Die Energiekosten in Deutschland erhöhen sich, da kostengünstige Angebote anderer Länder nicht genutzt werden.
    </p>
</div>

<!-- Option 2 Box -->
<div style="border: 1px solid #ccc; padding: 15px; border-radius: 8px; text-align: justify;">
    <p>
        <b>Handel mit Wertepartnern (<i>Friendshoring</i>):
        Energie wird nur aus Ländern importiert, die Deutschland politisch und gesellschaftlich nahestehen.</b>
        Hierdurch verringert sich das Risiko von politisch bedingten Schocks betroffen zu sein.
        Die Energiekosten in Deutschland erhöhen sich, da kostengünstigere Länder aufgrund ihres politischen Systems ausgeschlossen werden.
    </p>
</div>
<br>
<!-- Option 3 Box -->
<div style="border: 1px solid #ccc; padding: 15px; border-radius: 8px; text-align: justify;">
    <p>
        <b>Breite Streuung (<i>Diversifikation</i>):
        Energie wird aus möglichst vielen verschiedenen Ländern weltweit importiert.</b>
        Fällt in diesem Fall ein Lieferant aus, können andere einspringen, sodass negative Folgen für die deutsche Wirtschaft reduziert werden.
        Die Energiekosten in Deutschland erhöhen sich, da zusätzliche Investitionen in Infrastruktur und Produktionsanlagen notwendig sind.
    </p>
</div>

<br>
<!-- Countdown Text -->
<p id="countdown-message" style="font-weight">Bitte lesen Sie den Text sorgfältig. Sie können in <span id="countdown">15</span> Sekunden fortfahren.</p>

<!-- Next Button (Initially disabled) -->
<button id="next-button" class="otree-btn-next btn btn-primary" disabled style="display: none;">Weiter</button>

<script>
    let remaining = 15;

    const countdownEl = document.getElementById("countdown");
    const nextButton = document.getElementById("next-button");
    const countdownMessage = document.getElementById("countdown-message");

    const countdownInterval = setInterval(() => {
        remaining--;
        countdownEl.textContent = remaining;

        if (remaining <= 0) {
            clearInterval(countdownInterval);
            countdownMessage.style.display = "none";
            nextButton.disabled = false;
            nextButton.style.display = "inline-block";
        }
    }, 1000);
</script>
{% endblock %}