<div style="text-align:center;">
Hexe auf Abwegen - Ein interaktives Hörspiel.
Hör dir die Abschnitte bis zum Ende an und entscheide dann mit den Buttons unter dem Text was die Figuren tun sollen.
Drücke Start!
<br>
[[Dem Hexer folgen]] | [[Prinzessin und Franz folgen]]
</div>
<!-- Dieser Bereich enthält Bild und Buttons in einer Box -->
<div style="text-align:center; margin:0; padding:10px; line-height:0;">
<!-- Die Buttons direkt darunter mit einem kleinen Versatz nach oben, falls nötig -->
<div style="margin-top:-2px; line-height:normal; padding:;">
<audio id="bgm" src="Hörspiel Szene 1.mp3" autoplay style="display:none;"></audio>
<div style="display:flex; justify-content:center; gap:10px;">
<button id="playBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').play();
this.style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">▶ Start</button>
<button id="pauseBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').pause();
this.style.background='orange';
document.getElementById('playBtn').classList.add('blink-effect');
">⏸ Pause</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.pause();
a.currentTime=0;
this.style.background='red';
document.getElementById('playBtn').classList.remove('blink-effect');
">⏹ Stopp</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.currentTime = 0;
a.play();
document.getElementById('playBtn').style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">🔄 Wiederholen</button>
</div>
</div>
<!-- Das Bild ist jetzt inline-block, was es zentriert UND die Lücke entfernt -->
<img src="Szene1.png" style="width:50%; height:auto; display:inline-block; margin:0 auto; border:none; padding:0;">
</div>
<style>
@keyframes blinker {
0%, 100% { background-color: green; }
50% { background-color: white; }
}
.blink-effect {
animation: blinker 1s linear infinite;
}
</style>
<div style="text-align:center;">
Was sollte der Hexer machen?
<br>
[[Die Rübe suchen]] | [[Dem Hausmeister helfen]]
</div>
<!-- Dieser Bereich enthält Bild und Buttons in einer Box -->
<div style="text-align:center; margin:0; padding:10px; line-height:0;">
<!-- Die Buttons direkt darunter mit einem kleinen Versatz nach oben, falls nötig -->
<div style="margin-top:-2px; line-height:normal; padding:;">
<audio id="bgm" src="Szene A2.mp3" autoplay style="display:none;"></audio>
<div style="display:flex; justify-content:center; gap:10px;">
<button id="playBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').play();
this.style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">▶ Start</button>
<button id="pauseBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').pause();
this.style.background='orange';
document.getElementById('playBtn').classList.add('blink-effect');
">⏸ Pause</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.pause();
a.currentTime=0;
this.style.background='red';
document.getElementById('playBtn').classList.remove('blink-effect');
">⏹ Stopp</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.currentTime = 0;
a.play();
document.getElementById('playBtn').style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">🔄 Wiederholen</button>
</div>
</div>
<!-- Das Bild ist jetzt inline-block, was es zentriert UND die Lücke entfernt -->
<img src="Gemüsegarten.png" style="width:50%; height:auto; display:inline-block; margin:0 auto; border:none; padding:0;">
</div>
<style>
@keyframes blinker {
0%, 100% { background-color: green; }
50% { background-color: white; }
}
.blink-effect {
animation: blinker 1s linear infinite;
}
</style>
<div style="text-align:center;">
Was Antwortet Franz?
<br>
[[Sahara]] | [[Antarktis]]
</div>
<!-- Dieser Bereich enthält Bild und Buttons in einer Box -->
<div style="text-align:center; margin:0; padding:10px; line-height:0;">
<!-- Die Buttons direkt darunter mit einem kleinen Versatz nach oben, falls nötig -->
<div style="margin-top:-2px; line-height:normal; padding:;">
<audio id="bgm" src="Hörspiel_WegB.mp3" autoplay style="display:none;"></audio>
<div style="display:flex; justify-content:center; gap:10px;">
<button id="playBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').play();
this.style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">▶ Start</button>
<button id="pauseBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').pause();
this.style.background='orange';
document.getElementById('playBtn').classList.add('blink-effect');
">⏸ Pause</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.pause();
a.currentTime=0;
this.style.background='red';
document.getElementById('playBtn').classList.remove('blink-effect');
">⏹ Stopp</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.currentTime = 0;
a.play();
document.getElementById('playBtn').style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">🔄 Wiederholen</button>
</div>
</div>
<!-- Das Bild ist jetzt inline-block, was es zentriert UND die Lücke entfernt -->
<img src="Hexenhaus.png" style="width:50%; height:auto; display:inline-block; margin:0 auto; border:none; padding:0;">
</div>
<style>
@keyframes blinker {
0%, 100% { background-color: green; }
50% { background-color: white; }
}
.blink-effect {
animation: blinker 1s linear infinite;
}
</style>
<div style="text-align:center;">
Du hast Sahara geantwortet. Das hier ist dein Ende.
<br>
[[Ende B]]
</div>
<!-- Dieser Bereich enthält Bild und Buttons in einer Box -->
<div style="text-align:center; margin:0; padding:10px; line-height:0;">
<!-- Die Buttons direkt darunter mit einem kleinen Versatz nach oben, falls nötig -->
<div style="margin-top:-2px; line-height:normal; padding:;">
<audio id="bgm" src="Sahara.mp3" autoplay style="display:none;"></audio>
<div style="display:flex; justify-content:center; gap:10px;">
<button id="playBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').play();
this.style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">▶ Start</button>
<button id="pauseBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').pause();
this.style.background='orange';
document.getElementById('playBtn').classList.add('blink-effect');
">⏸ Pause</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.pause();
a.currentTime=0;
this.style.background='red';
document.getElementById('playBtn').classList.remove('blink-effect');
">⏹ Stopp</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.currentTime = 0;
a.play();
document.getElementById('playBtn').style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">🔄 Wiederholen</button>
</div>
</div>
<!-- Das Bild ist jetzt inline-block, was es zentriert UND die Lücke entfernt -->
<img src="Hexenhaus.png" style="width:50%; height:auto; display:inline-block; margin:0 auto; border:none; padding:0;">
</div>
<style>
@keyframes blinker {
0%, 100% { background-color: green; }
50% { background-color: white; }
}
.blink-effect {
animation: blinker 1s linear infinite;
}
</style>
<div style="text-align:center;">
Das ist richtig! Das hier ist dein Ende.
<br>
[[Ende C]]
</div>
<!-- Dieser Bereich enthält Bild und Buttons in einer Box -->
<div style="text-align:center; margin:0; padding:10px; line-height:0;">
<!-- Die Buttons direkt darunter mit einem kleinen Versatz nach oben, falls nötig -->
<div style="margin-top:-2px; line-height:normal; padding:;">
<audio id="bgm" src="Antarktis.mp3" autoplay style="display:none;"></audio>
<div style="display:flex; justify-content:center; gap:10px;">
<button id="playBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').play();
this.style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">▶ Start</button>
<button id="pauseBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').pause();
this.style.background='orange';
document.getElementById('playBtn').classList.add('blink-effect');
">⏸ Pause</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.pause();
a.currentTime=0;
this.style.background='red';
document.getElementById('playBtn').classList.remove('blink-effect');
">⏹ Stopp</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.currentTime = 0;
a.play();
document.getElementById('playBtn').style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">🔄 Wiederholen</button>
</div>
</div>
<!-- Das Bild ist jetzt inline-block, was es zentriert UND die Lücke entfernt -->
<img src="Drachenfels.png" style="width:50%; height:auto; display:inline-block; margin:0 auto; border:none; padding:0;">
</div>
<style>
@keyframes blinker {
0%, 100% { background-color: green; }
50% { background-color: white; }
}
.blink-effect {
animation: blinker 1s linear infinite;
}
</style>
<div style="text-align:center;">
Du hast dich entschieden die Rübe zu suchen. Das hier ist dein Ende.
<br>
[[Ende A]]
</div>
<!-- Dieser Bereich enthält Bild und Buttons in einer Box -->
<div style="text-align:center; margin:0; padding:10px; line-height:0;">
<!-- Die Buttons direkt darunter mit einem kleinen Versatz nach oben, falls nötig -->
<div style="margin-top:-2px; line-height:normal; padding:;">
<audio id="bgm" src="Szene A2_nein.mp3" autoplay style="display:none;"></audio>
<div style="display:flex; justify-content:center; gap:10px;">
<button id="playBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').play();
this.style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">▶ Start</button>
<button id="pauseBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').pause();
this.style.background='orange';
document.getElementById('playBtn').classList.add('blink-effect');
">⏸ Pause</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.pause();
a.currentTime=0;
this.style.background='red';
document.getElementById('playBtn').classList.remove('blink-effect');
">⏹ Stopp</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.currentTime = 0;
a.play();
document.getElementById('playBtn').style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">🔄 Wiederholen</button>
</div>
</div>
<!-- Das Bild ist jetzt inline-block, was es zentriert UND die Lücke entfernt -->
<img src="Gemüsegarten.png" style="width:50%; height:auto; display:inline-block; margin:0 auto; border:none; padding:0;">
</div>
<style>
@keyframes blinker {
0%, 100% { background-color: green; }
50% { background-color: white; }
}
.blink-effect {
animation: blinker 1s linear infinite;
}
</style>
<div style="text-align:center;">
Du warst hilfsbereit. Das hier ist dein Ende.
<br>
[[Ende C]]
</div>
<!-- Dieser Bereich enthält Bild und Buttons in einer Box -->
<div style="text-align:center; margin:0; padding:10px; line-height:0;">
<!-- Die Buttons direkt darunter mit einem kleinen Versatz nach oben, falls nötig -->
<div style="margin-top:-2px; line-height:normal; padding:;">
<audio id="bgm" src="Szene A2_Ja.mp3" autoplay style="display:none;"></audio>
<div style="display:flex; justify-content:center; gap:10px;">
<button id="playBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').play();
this.style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">▶ Start</button>
<button id="pauseBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').pause();
this.style.background='orange';
document.getElementById('playBtn').classList.add('blink-effect');
">⏸ Pause</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.pause();
a.currentTime=0;
this.style.background='red';
document.getElementById('playBtn').classList.remove('blink-effect');
">⏹ Stopp</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.currentTime = 0;
a.play();
document.getElementById('playBtn').style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">🔄 Wiederholen</button>
</div>
</div>
<!-- Das Bild ist jetzt inline-block, was es zentriert UND die Lücke entfernt -->
<img src="Gemüsegarten.png" style="width:50%; height:auto; display:inline-block; margin:0 auto; border:none; padding:0;">
</div>
<style>
@keyframes blinker {
0%, 100% { background-color: green; }
50% { background-color: white; }
}
.blink-effect {
animation: blinker 1s linear infinite;
}
</style>
<div style="text-align:center;">
The End.
Gut gemacht! Hexe und Welt sind gerettet. Wenn du willst probiere auch noch die anderen Wege aus.
<br>
</div>
<!-- Dieser Bereich enthält Bild und Buttons in einer Box -->
<div style="text-align:center; margin:0; padding:10px; line-height:0;">
<!-- Die Buttons direkt darunter mit einem kleinen Versatz nach oben, falls nötig -->
<div style="margin-top:-2px; line-height:normal; padding:;">
<audio id="bgm" src="GutesEnde.mp3" style="display:none;"></audio>
<div style="display:flex; justify-content:center; gap:10px;">
<button id="playBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').play();
this.style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">▶ Start</button>
<button id="pauseBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').pause();
this.style.background='orange';
document.getElementById('playBtn').classList.add('blink-effect');
">⏸ Pause</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.pause();
a.currentTime=0;
this.style.background='red';
document.getElementById('playBtn').classList.remove('blink-effect');
">⏹ Stopp</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.currentTime = 0;
a.play();
document.getElementById('playBtn').style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">🔄 Wiederholen</button>
</div>
</div>
<!-- Das Bild ist jetzt inline-block, was es zentriert UND die Lücke entfernt -->
<img src="GutesEnde.png" style="width:50%; height:auto; display:inline-block; margin:0 auto; border:none; padding:0;">
</div>
<style>
@keyframes blinker {
0%, 100% { background-color: green; }
50% { background-color: white; }
}
.blink-effect {
animation: blinker 1s linear infinite;
}
</style>
<div style="text-align:center;">
The End.
Wenn du willst probiere es nochmal!
<br>
</div>
<!-- Dieser Bereich enthält Bild und Buttons in einer Box -->
<div style="text-align:center; margin:0; padding:10px; line-height:0;">
<!-- Die Buttons direkt darunter mit einem kleinen Versatz nach oben, falls nötig -->
<div style="margin-top:-2px; line-height:normal; padding:;">
<audio id="bgm" src="Weg A ende schlecht.mp3" autoplay style="display:none;"></audio>
<div style="display:flex; justify-content:center; gap:10px;">
<button id="playBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').play();
this.style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">▶ Start</button>
<button id="pauseBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').pause();
this.style.background='orange';
document.getElementById('playBtn').classList.add('blink-effect');
">⏸ Pause</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.pause();
a.currentTime=0;
this.style.background='red';
document.getElementById('playBtn').classList.remove('blink-effect');
">⏹ Stopp</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.currentTime = 0;
a.play();
document.getElementById('playBtn').style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">🔄 Wiederholen</button>
</div>
</div>
<!-- Das Bild ist jetzt inline-block, was es zentriert UND die Lücke entfernt -->
<img src="EndeZerstoerung.png" style="width:50%; height:auto; display:inline-block; margin:0 auto; border:none; padding:0;">
</div>
<style>
@keyframes blinker {
0%, 100% { background-color: green; }
50% { background-color: white; }
}
.blink-effect {
animation: blinker 1s linear infinite;
}
</style>
<div style="text-align:center;">
The End.
Wenn du willst probiere es nochmal!
<br>
</div>
<!-- Dieser Bereich enthält Bild und Buttons in einer Box -->
<div style="text-align:center; margin:0; padding:10px; line-height:0;">
<!-- Die Buttons direkt darunter mit einem kleinen Versatz nach oben, falls nötig -->
<div style="margin-top:-2px; line-height:normal; padding:;">
<audio id="bgm" src="B_ende Schlecht.mp3" style="display:none;"></audio>
<div style="display:flex; justify-content:center; gap:10px;">
<button id="playBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').play();
this.style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">▶ Start</button>
<button id="pauseBtn" onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
document.getElementById('bgm').pause();
this.style.background='orange';
document.getElementById('playBtn').classList.add('blink-effect');
">⏸ Pause</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.pause();
a.currentTime=0;
this.style.background='red';
document.getElementById('playBtn').classList.remove('blink-effect');
">⏹ Stopp</button>
<button onclick="
document.querySelectorAll('button').forEach(b => b.style.background='');
var a=document.getElementById('bgm');
a.currentTime = 0;
a.play();
document.getElementById('playBtn').style.background='green';
document.getElementById('playBtn').classList.remove('blink-effect');
">🔄 Wiederholen</button>
</div>
</div>
<!-- Das Bild ist jetzt inline-block, was es zentriert UND die Lücke entfernt -->
<img src="EndeZerstoerung.png" style="width:50%; height:auto; display:inline-block; margin:0 auto; border:none; padding:0;">
</div>
<style>
@keyframes blinker {
0%, 100% { background-color: green; }
50% { background-color: white; }
}
.blink-effect {
animation: blinker 1s linear infinite;
}
</style>