{% block content %}
{{ block title }}
    Handelspartner
{{ endblock }}
 <div style="text-align: justify;">
    <p>
        Deutschland wird zukünftig auf Wasserstoffimporte angewiesen sein.
        Diese können aus verschiedenen Ländern kommen, die sich in mehreren Eigenschaften unterscheiden können.
        Einige dieser Eigenschaften sind in der untenstehenden Tabelle aufgeführt.
    </p>
    <p>
        Um herauszufinden, wie die deutsche Bevölkerung über mögliche Handelspartner denkt, werden wir Ihnen im Folgenden sechs Länderpaare zeigen.
        Die gezeigten Länder unterscheiden sich in den beschriebenen Eigenschaften, sind andernfalls aber identisch.
        <b>Bitte geben Sie bei jedem der nachfolgenden Paare an, aus welchem Land Deutschland Ihrer Meinung nach eher grünen Wasserstoff importieren sollte und bewerten Sie beide Länder.</b>
    </p>
 </div>
<table class="table table-bordered">
    <colgroup>
        <col style="width: 12%;">   <!-- Attribute column -->
        <col style="width: 71%;"> <!-- Land A column -->
        <col style="width: 17%;"> <!-- Land B column -->
    </colgroup>
    <thead>
        <tr>
            <th>Eigenschaft </th>
            <th>Beschreibung </th>
            <th>Mögliche Werte </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><b>Kosten</b> </td>
            <td>In Zeiten von wenig Sonne/ Wind wird der Wasserstoff zur Stromversorgung in Deutschland genutzt.
                <b>Je höher die Importkosten des Wasserstoffes, desto höher sind zukünftig die Stromkosten in Deutschland</b>.</td>
            <td>keine Erhöhung, <br> 5% Erhöhung, <br> 10% Erhöhung, <br> 15% Erhöhung </td>
        </tr>
        <tr>
            <td><b>Stabilität</b> </td>
            <td>Die ökonomische und geopolitische Stabilität reflektiert die Rahmenbedingungen des Partnerlandes.
                <b>Eine höhere Stabilität bedeutet unter anderem eine höhere Zuverlässigkeit</b> des Lieferanten und ein geringeres Ausfallrisiko.</td>
            <td>hohe Stabilität, <br> mittlere Stabilität, <br> niedrige Stabilität </td>
        </tr>
        <tr>
            <td><b>Umwelt-
                <br>standards</b> </td>
            <td>Der Umweltstandard des Partnerlandes umfasst Maßnahmen zur <b>Bekämpfung des Klimawandels</b> sowie zum <b>Schutz von Ökosystemen und Biodiversität</b>. </td>
            <td>hohe Standards, <br> mittlere Standards, <br> niedrige Standards </td>
        </tr>
        <tr>
            <td><b>Freiheit</b> </td>
            <td>Die Freiheit des Partnerlandes umfasst <b>politische und zivile Freiheiten</b>, wie z. B. ein demokratisches Wahlrecht und Meinungsfreiheit.  </td>
            <td>frei, <br> teilweise frei, <br> nicht frei </td>
        </tr>
        <tr>
            <td><b>Aktive
                <br>Handels-
                <br>beziehung</b> </td>
            <td>Es existiert bereits eine <b>aktive Handelsbeziehung im Energiesektor zwischen Deutschland und dem Partnerland</b>.  </td>
            <td>aktiver Handel, <br> kein Handel</td>
        </tr>
    </tbody>
</table>

<!-- 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 %}