Eine Reise am Rhein - Interactive German Course</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgtitle>
<script src="/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgghost-assets/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgeine-reise-am-rhein/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgeine-reise-am-rhein.jpg"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgscript>
<link href="https:/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgcdnjs.cloudflare.com/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgajax/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpglibs/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgfont-awesome/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg6.0.0/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgcss/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgall.min.css" rel="stylesheet">
<style>
@import url('https:/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgfonts.googleapis.com/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgcss2?family=Patrick+Hand&family=Roboto:wght@300;400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
background-color: #f0fdf4; /ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg* Light green tint for nature theme */ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg
}
h1, h2, h3 {
font-family: 'Patrick Hand', cursive;
}
.chapter-card {
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition: transform 0.2s;
border-left: 6px solid #166534; /ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg* Green border */ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg
}
.input-blank {
border-bottom: 2px solid #166534;
background: rgba(220, 252, 231, 0.5);
padding: 0 5px;
color: #14532d;
font-weight: bold;
outline: none;
transition: all 0.3s ease;
}
.input-blank:focus {
background: #dcfce7;
border-bottom-color: #15803d;
}
.correct {
border-bottom-color: #10b981 !important;
color: #047857 !important;
background-color: #d1fae5 !important;
}
.incorrect {
border-bottom-color: #ef4444 !important;
color: #b91c1c !important;
background-color: #fee2e2 !important;
}
details > summary {
list-style: none;
cursor: pointer;
}
details > summary::-webkit-details-marker {
display: none;
}
details[open] summary ~ * {
animation: sweep .3s ease-in-out;
}
@keyframes sweep {
0% { opacity: 0; transform: translateY(-10px) }
100% { opacity: 1; transform: translateY(0) }
}
.chevron {
transition: transform 0.3s;
}
details[open] .chevron {
transform: rotate(180deg);
}
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgstyle>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpghead>
<body class="text-gray-800">
<div class="max-w-full mx-auto px-4 py-8 space-y-12">
<header class="text-center mb-12">
<h1 class="text-5xl text-green-800 mb-4">Eine Reise am Rhein</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh1>
<p class="text-xl text-gray-600">German Level A2 - Interactive Chapter Book</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgheader>
<section id="chapter-1" class="chapter-card p-6 md:p-8">
<h2 class="text-3xl text-green-800 mb-6">Kapitel 1: Der Start in Köln</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh2>
<div class="flex gap-3 mb-4">
<button onclick="playAudio('text-1', 1.0, 'btn-1-normal')" id="btn-1-normal" class="flex items-center gap-2 bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-green-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Normal</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
<button onclick="playAudio('text-1', 0.7, 'btn-1-slow')" id="btn-1-slow" class="flex items-center gap-2 bg-blue-50 hover:bg-blue-100 text-blue-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-blue-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Slow</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<div id="text-1" class="prose prose-lg text-gray-700 leading-relaxed mb-6">
<p>Max steht am Hauptbahnhof in Köln. Es ist ein sehr großer und geschäftiger Ort. Überall sind Menschen mit Koffern und Rucksäcken. Max ist aufgeregt, denn heute beginnt seine Reise entlang des Rheins. Er geht zum Fahrkartenschalter und kauft eine Fahrkarte.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>„Einmal nach Koblenz, bitte“, sagt Max höflich. Der Mann am Schalter gibt ihm das Ticket und wünscht ihm eine gute Reise. Max sucht das Gleis Nummer fünf. Er hat noch zehn Minuten Zeit, also kauft er sich schnell eine Brezel in einer Bäckerei. Er liebt den Geruch von frischem Brot am Morgen.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<details class="group mb-8">
<summary class="flex justify-between items-center font-medium cursor-pointer list-none bg-gray-50 hover:bg-gray-100 p-3 rounded-lg text-blue-600 transition-colors">
<span class="flex items-center gap-2"><i class="fas fa-language"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> English Translation</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
<span class="transition group-open:rotate-180 chevron"><i class="fas fa-chevron-down"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsummary>
<div class="text-gray-600 italic text-md mt-3 px-3 bg-white">
Max stands at the main train station in Cologne. It is a very big and busy place. Everywhere there are people with suitcases and backpacks. Max is excited because today his journey along the Rhine begins. He goes to the ticket counter and buys a ticket. "One to Koblenz, please," Max says politely. The man at the counter gives him the ticket and wishes him a good trip. Max looks for platform number five. He still has ten minutes, so he quickly buys a pretzel at a bakery. He loves the smell of fresh bread in the morning.
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdetails>
<div class="bg-yellow-50 p-6 rounded-lg border border-yellow-200">
<h3 class="text-xl text-yellow-800 mb-4 font-bold"><i class="fas fa-pencil-alt mr-2"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi>Prueba de Comprensión</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh3>
<div class="space-y-3" id="quiz-1">
<p>1. Max ist am <input type="text" class="input-blank w-32" data-answer="Hauptbahnhof"> in Köln.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>2. Er kauft eine <input type="text" class="input-blank w-24" data-answer="Fahrkarte"> am Schalter.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>3. Er hat noch <input type="text" class="input-blank w-16" data-answer="zehn"> Minuten Zeit.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<button onclick="checkAnswers('quiz-1')" class="mt-4 bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded font-bold transition">Check Answers</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsection>
<section id="chapter-2" class="chapter-card p-6 md:p-8">
<h2 class="text-3xl text-green-800 mb-6">Kapitel 2: Der Kölner Dom</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh2>
<div class="flex gap-3 mb-4">
<button onclick="playAudio('text-2', 1.0, 'btn-2-normal')" id="btn-2-normal" class="flex items-center gap-2 bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-green-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Normal</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
<button onclick="playAudio('text-2', 0.7, 'btn-2-slow')" id="btn-2-slow" class="flex items-center gap-2 bg-blue-50 hover:bg-blue-100 text-blue-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-blue-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Slow</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<div id="text-2" class="prose prose-lg text-gray-700 leading-relaxed mb-6">
<p>Bevor der Zug abfährt, schaut Max aus dem Fenster. Er sieht den Kölner Dom. Die Kirche ist riesig und dunkel. Sie ist im gotischen Baustil gebaut und hat zwei hohe Türme. Viele Touristen stehen vor dem Dom und machen Fotos.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>Max erinnert sich an seinen Besuch gestern. Er ist die 533 Stufen bis zur Spitze gestiegen. Es war sehr anstrengend, aber die Aussicht war fantastisch. Von oben konnte er die ganze Stadt und den langen Fluss sehen. Der Dom ist das Wahrzeichen der Stadt und sehr wichtig für die Kultur in Köln.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<details class="group mb-8">
<summary class="flex justify-between items-center font-medium cursor-pointer list-none bg-gray-50 hover:bg-gray-100 p-3 rounded-lg text-blue-600 transition-colors">
<span class="flex items-center gap-2"><i class="fas fa-language"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> English Translation</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
<span class="transition group-open:rotate-180 chevron"><i class="fas fa-chevron-down"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsummary>
<div class="text-gray-600 italic text-md mt-3 px-3 bg-white">
Before the train departs, Max looks out the window. He sees the Cologne Cathedral. The church is huge and dark. It is built in the Gothic architectural style and has two tall towers. Many tourists stand in front of the cathedral and take photos. Max remembers his visit yesterday. He climbed the 533 steps to the top. It was very exhausting, but the view was fantastic. From above he could see the whole city and the long river. The cathedral is the symbol of the city and very important for the culture in Cologne.
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdetails>
<div class="bg-yellow-50 p-6 rounded-lg border border-yellow-200">
<h3 class="text-xl text-yellow-800 mb-4 font-bold"><i class="fas fa-pencil-alt mr-2"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi>Prueba de Comprensión</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh3>
<div class="space-y-3" id="quiz-2">
<p>1. Der Dom hat zwei hohe <input type="text" class="input-blank w-24" data-answer="Türme">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>2. Max ist 533 <input type="text" class="input-blank w-24" data-answer="Stufen"> gestiegen.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>3. Die <input type="text" class="input-blank w-24" data-answer="Aussicht"> war fantastisch.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<button onclick="checkAnswers('quiz-2')" class="mt-4 bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded font-bold transition">Check Answers</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsection>
<section id="chapter-3" class="chapter-card p-6 md:p-8">
<h2 class="text-3xl text-green-800 mb-6">Kapitel 3: Die Zugfahrt am Fluss</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh2>
<div class="flex gap-3 mb-4">
<button onclick="playAudio('text-3', 1.0, 'btn-3-normal')" id="btn-3-normal" class="flex items-center gap-2 bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-green-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Normal</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
<button onclick="playAudio('text-3', 0.7, 'btn-3-slow')" id="btn-3-slow" class="flex items-center gap-2 bg-blue-50 hover:bg-blue-100 text-blue-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-blue-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Slow</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<div id="text-3" class="prose prose-lg text-gray-700 leading-relaxed mb-6">
<p>Der Zug fährt pünktlich ab. Max hat einen Sitzplatz am Fenster reserviert. Der Zug fährt direkt neben dem Rhein. Das Wasser glitzert in der Sonne. Auf dem Fluss fahren viele große Transportschiffe und weiße Touristenschiffe.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>Die Landschaft ist wunderschön. Alles ist grün und ruhig. Max holt sein Buch heraus, aber er kann nicht lesen. Er muss immer nach draußen schauen. Er sieht kleine Dörfer mit alten Fachwerkhäusern. Die Häuser sehen sehr gemütlich aus. Max fühlt sich entspannt. Das Reisen mit der Bahn ist in Deutschland sehr bequem und beliebt.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<details class="group mb-8">
<summary class="flex justify-between items-center font-medium cursor-pointer list-none bg-gray-50 hover:bg-gray-100 p-3 rounded-lg text-blue-600 transition-colors">
<span class="flex items-center gap-2"><i class="fas fa-language"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> English Translation</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
<span class="transition group-open:rotate-180 chevron"><i class="fas fa-chevron-down"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsummary>
<div class="text-gray-600 italic text-md mt-3 px-3 bg-white">
The train departs on time. Max has reserved a seat by the window. The train travels directly next to the Rhine. The water glitters in the sun. Many large transport ships and white tourist ships are sailing on the river. The landscape is beautiful. Everything is green and quiet. Max takes out his book, but he cannot read. He keeps having to look outside. He sees small villages with old half-timbered houses. The houses look very cozy. Max feels relaxed. Traveling by train is very comfortable and popular in Germany.
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdetails>
<div class="bg-yellow-50 p-6 rounded-lg border border-yellow-200">
<h3 class="text-xl text-yellow-800 mb-4 font-bold"><i class="fas fa-pencil-alt mr-2"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi>Prueba de Comprensión</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh3>
<div class="space-y-3" id="quiz-3">
<p>1. Max sitzt am <input type="text" class="input-blank w-24" data-answer="Fenster">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>2. Auf dem Fluss fahren viele <input type="text" class="input-blank w-24" data-answer="Schiffe">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>3. Die Häuser sind <input type="text" class="input-blank w-32" data-answer="Fachwerkhäuser">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<button onclick="checkAnswers('quiz-3')" class="mt-4 bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded font-bold transition">Check Answers</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsection>
<section id="chapter-4" class="chapter-card p-6 md:p-8">
<h2 class="text-3xl text-green-800 mb-6">Kapitel 4: Burgen und Ruinen</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh2>
<div class="flex gap-3 mb-4">
<button onclick="playAudio('text-4', 1.0, 'btn-4-normal')" id="btn-4-normal" class="flex items-center gap-2 bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-green-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Normal</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
<button onclick="playAudio('text-4', 0.7, 'btn-4-slow')" id="btn-4-slow" class="flex items-center gap-2 bg-blue-50 hover:bg-blue-100 text-blue-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-blue-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Slow</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<div id="text-4" class="prose prose-lg text-gray-700 leading-relaxed mb-6">
<p>Plötzlich sieht Max etwas auf einem hohen Berg. Es ist eine alte Burg. Am Rhein gibt es sehr viele Burgen und Schlösser. Früher lebten hier Könige und Ritter. Manche Burgen sind noch perfekt erhalten, aber andere sind nur noch Ruinen.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>Die Mauern sind aus grauem Stein. Max stellt sich vor, wie das Leben im Mittelalter war. Es war bestimmt kalt und hart, aber auch romantisch. Jede Burg hat ihre eigene Geschichte. Manche Leute sagen, dass es in den alten Mauern Geister gibt. Max macht schnell ein Foto mit seinem Handy, bevor der Zug weiterfährt.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<details class="group mb-8">
<summary class="flex justify-between items-center font-medium cursor-pointer list-none bg-gray-50 hover:bg-gray-100 p-3 rounded-lg text-blue-600 transition-colors">
<span class="flex items-center gap-2"><i class="fas fa-language"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> English Translation</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
<span class="transition group-open:rotate-180 chevron"><i class="fas fa-chevron-down"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsummary>
<div class="text-gray-600 italic text-md mt-3 px-3 bg-white">
Suddenly Max sees something on a high mountain. It is an old castle. There are very many castles and palaces along the Rhine. Kings and knights used to live here. Some castles are still perfectly preserved, but others are just ruins. The walls are made of gray stone. Max imagines what life was like in the Middle Ages. It was certainly cold and hard, but also romantic. Every castle has its own history. Some people say that there are ghosts in the old walls. Max quickly takes a photo with his cell phone before the train moves on.
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdetails>
<div class="bg-yellow-50 p-6 rounded-lg border border-yellow-200">
<h3 class="text-xl text-yellow-800 mb-4 font-bold"><i class="fas fa-pencil-alt mr-2"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi>Prueba de Comprensión</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh3>
<div class="space-y-3" id="quiz-4">
<p>1. Auf dem Berg steht eine alte <input type="text" class="input-blank w-24" data-answer="Burg">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>2. Früher lebten hier <input type="text" class="input-blank w-24" data-answer="Ritter">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>3. Max macht ein <input type="text" class="input-blank w-24" data-answer="Foto"> mit dem Handy.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<button onclick="checkAnswers('quiz-4')" class="mt-4 bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded font-bold transition">Check Answers</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsection>
<section id="chapter-5" class="chapter-card p-6 md:p-8">
<h2 class="text-3xl text-green-800 mb-6">Kapitel 5: Die Legende der Loreley</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh2>
<div class="flex gap-3 mb-4">
<button onclick="playAudio('text-5', 1.0, 'btn-5-normal')" id="btn-5-normal" class="flex items-center gap-2 bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-green-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Normal</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
<button onclick="playAudio('text-5', 0.7, 'btn-5-slow')" id="btn-5-slow" class="flex items-center gap-2 bg-blue-50 hover:bg-blue-100 text-blue-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-blue-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Slow</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<div id="text-5" class="prose prose-lg text-gray-700 leading-relaxed mb-6">
<p>Der Zug fährt durch eine enge Kurve im Tal. Der Schaffner sagt durch den Lautsprecher: „Links sehen Sie den Loreley-Felsen.“ Max schaut gespannt. Der Felsen ist sehr hoch und steil.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>Es gibt eine berühmte Legende über diesen Ort. Man erzählt, dass dort früher eine schöne Frau saß. Sie hieß Loreley. Sie kämmte ihre goldenen Haare und sang ein trauriges Lied. Die Schiffer auf dem Rhein hörten das Lied und schauten nach oben. Sie passten nicht auf und ihre Schiffe gingen im Fluss unter. Es ist eine tragische, aber berühmte deutsche Geschichte.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<details class="group mb-8">
<summary class="flex justify-between items-center font-medium cursor-pointer list-none bg-gray-50 hover:bg-gray-100 p-3 rounded-lg text-blue-600 transition-colors">
<span class="flex items-center gap-2"><i class="fas fa-language"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> English Translation</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
<span class="transition group-open:rotate-180 chevron"><i class="fas fa-chevron-down"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsummary>
<div class="text-gray-600 italic text-md mt-3 px-3 bg-white">
The train travels through a narrow curve in the valley. The conductor says through the loudspeaker: "On the left, you see the Lorelei Rock." Max looks eagerly. The rock is very high and steep. There is a famous legend about this place. It is said that a beautiful woman used to sit there. Her name was Loreley. She combed her golden hair and sang a sad song. The sailors on the Rhine heard the song and looked up. They did not pay attention and their ships sank in the river. It is a tragic but famous German story.
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdetails>
<div class="bg-yellow-50 p-6 rounded-lg border border-yellow-200">
<h3 class="text-xl text-yellow-800 mb-4 font-bold"><i class="fas fa-pencil-alt mr-2"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi>Prueba de Comprensión</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh3>
<div class="space-y-3" id="quiz-5">
<p>1. Der Felsen ist hoch und <input type="text" class="input-blank w-24" data-answer="steil">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>2. Die Frau hatte goldene <input type="text" class="input-blank w-24" data-answer="Haare">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>3. Die Schiffer hörten ein <input type="text" class="input-blank w-24" data-answer="Lied">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<button onclick="checkAnswers('quiz-5')" class="mt-4 bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded font-bold transition">Check Answers</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsection>
<section id="chapter-6" class="chapter-card p-6 md:p-8">
<h2 class="text-3xl text-green-800 mb-6">Kapitel 6: Ein Spaziergang in Rüdesheim</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh2>
<div class="flex gap-3 mb-4">
<button onclick="playAudio('text-6', 1.0, 'btn-6-normal')" id="btn-6-normal" class="flex items-center gap-2 bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-green-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Normal</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
<button onclick="playAudio('text-6', 0.7, 'btn-6-slow')" id="btn-6-slow" class="flex items-center gap-2 bg-blue-50 hover:bg-blue-100 text-blue-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-blue-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Slow</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<div id="text-6" class="prose prose-lg text-gray-700 leading-relaxed mb-6">
<p>Max steigt in Rüdesheim aus dem Zug. Es ist eine kleine, charmante Stadt, die bei Touristen sehr beliebt ist. Er geht durch die berühmte „Drosselgasse“. Die Straße ist sehr eng und voller Menschen. Überall gibt es Souvenirläden und Restaurants.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>Max sieht viele Kuckucksuhren und Bierkrüge in den Fenstern. Es spielt laute Volksmusik. Die Atmosphäre ist fröhlich. Max setzt sich in ein Café und bestellt einen „Rüdesheimer Kaffee“. Das ist Kaffee mit Weinbrand und Sahne. Er genießt die Pause und beobachtet die glücklichen Leute, die vorbei spazieren.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<details class="group mb-8">
<summary class="flex justify-between items-center font-medium cursor-pointer list-none bg-gray-50 hover:bg-gray-100 p-3 rounded-lg text-blue-600 transition-colors">
<span class="flex items-center gap-2"><i class="fas fa-language"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> English Translation</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
<span class="transition group-open:rotate-180 chevron"><i class="fas fa-chevron-down"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsummary>
<div class="text-gray-600 italic text-md mt-3 px-3 bg-white">
Max gets off the train in Rüdesheim. It is a small, charming town that is very popular with tourists. He walks through the famous "Drosselgasse." The street is very narrow and full of people. Everywhere there are souvenir shops and restaurants. Max sees many cuckoo clocks and beer mugs in the windows. Loud folk music is playing. The atmosphere is cheerful. Max sits down in a café and orders a "Rüdesheimer Coffee." That is coffee with brandy and whipped cream. He enjoys the break and watches the happy people walking by.
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdetails>
<div class="bg-yellow-50 p-6 rounded-lg border border-yellow-200">
<h3 class="text-xl text-yellow-800 mb-4 font-bold"><i class="fas fa-pencil-alt mr-2"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi>Prueba de Comprensión</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh3>
<div class="space-y-3" id="quiz-6">
<p>1. Die berühmte Straße heißt <input type="text" class="input-blank w-24" data-answer="Drosselgasse">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>2. Max sieht Kuckucksuhren und <input type="text" class="input-blank w-24" data-answer="Bierkrüge">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>3. Er trinkt einen Kaffee mit <input type="text" class="input-blank w-24" data-answer="Sahne">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<button onclick="checkAnswers('quiz-6')" class="mt-4 bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded font-bold transition">Check Answers</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsection>
<section id="chapter-7" class="chapter-card p-6 md:p-8">
<h2 class="text-3xl text-green-800 mb-6">Kapitel 7: Die Fahrt mit dem Schiff</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh2>
<div class="flex gap-3 mb-4">
<button onclick="playAudio('text-7', 1.0, 'btn-7-normal')" id="btn-7-normal" class="flex items-center gap-2 bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-green-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Normal</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
<button onclick="playAudio('text-7', 0.7, 'btn-7-slow')" id="btn-7-slow" class="flex items-center gap-2 bg-blue-50 hover:bg-blue-100 text-blue-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-blue-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Slow</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<div id="text-7" class="prose prose-lg text-gray-700 leading-relaxed mb-6">
<p>Für den nächsten Teil der Reise nimmt Max nicht den Zug. Er kauft ein Ticket für ein großes Schiff der KD-Linie. Er möchte den Rhein vom Wasser aus sehen. Das Schiff fährt langsam gegen den Strom.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>Max steht an Deck. Der Wind weht ihm durch die Haare. Die Luft ist frisch und sauber. Von hier unten sehen die Berge noch höher aus. Er winkt den Leuten zu, die am Ufer spazieren gehen. Die Fahrt ist sehr langsam und entspannend. Das Schiff ist die beste Art, das Rheintal zu erleben. Max fühlt sich wie ein Kapitän.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<details class="group mb-8">
<summary class="flex justify-between items-center font-medium cursor-pointer list-none bg-gray-50 hover:bg-gray-100 p-3 rounded-lg text-blue-600 transition-colors">
<span class="flex items-center gap-2"><i class="fas fa-language"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> English Translation</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
<span class="transition group-open:rotate-180 chevron"><i class="fas fa-chevron-down"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsummary>
<div class="text-gray-600 italic text-md mt-3 px-3 bg-white">
For the next part of the journey, Max does not take the train. He buys a ticket for a large ship of the KD Line. He wants to see the Rhine from the water. The ship travels slowly against the current. Max stands on the deck. The wind blows through his hair. The air is fresh and clean. From down here, the mountains look even higher. He waves to the people walking on the shore. The trip is very slow and relaxing. The ship is the best way to experience the Rhine Valley. Max feels like a captain.
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdetails>
<div class="bg-yellow-50 p-6 rounded-lg border border-yellow-200">
<h3 class="text-xl text-yellow-800 mb-4 font-bold"><i class="fas fa-pencil-alt mr-2"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi>Prueba de Comprensión</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh3>
<div class="space-y-3" id="quiz-7">
<p>1. Max kauft ein Ticket für ein <input type="text" class="input-blank w-24" data-answer="Schiff">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>2. Er steht an <input type="text" class="input-blank w-24" data-answer="Deck">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>3. Die Fahrt ist langsam und <input type="text" class="input-blank w-24" data-answer="entspannend">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<button onclick="checkAnswers('quiz-7')" class="mt-4 bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded font-bold transition">Check Answers</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsection>
<section id="chapter-8" class="chapter-card p-6 md:p-8">
<h2 class="text-3xl text-green-800 mb-6">Kapitel 8: Wandern in den Weinbergen</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh2>
<div class="flex gap-3 mb-4">
<button onclick="playAudio('text-8', 1.0, 'btn-8-normal')" id="btn-8-normal" class="flex items-center gap-2 bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-green-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Normal</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
<button onclick="playAudio('text-8', 0.7, 'btn-8-slow')" id="btn-8-slow" class="flex items-center gap-2 bg-blue-50 hover:bg-blue-100 text-blue-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-blue-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Slow</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<div id="text-8" class="prose prose-lg text-gray-700 leading-relaxed mb-6">
<p>Nach der Schifffahrt möchte Max sich bewegen. Er beschließt, in den Weinbergen zu wandern. Die Region ist bekannt für ihren Weißwein, besonders den Riesling. Die Hänge sind sehr steil, damit die Trauben viel Sonne bekommen.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>Max läuft einen kleinen Pfad hinauf. Es ist anstrengend, aber die Natur riecht gut. Er sieht die grünen Reben und die kleinen Trauben. Im Herbst findet hier die Weinlese statt. Oben angekommen, setzt er sich auf eine Bank. Er hat einen perfekten Blick über das ganze Tal. Wandern ist des Müllers Lust, denkt er und lächelt.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<details class="group mb-8">
<summary class="flex justify-between items-center font-medium cursor-pointer list-none bg-gray-50 hover:bg-gray-100 p-3 rounded-lg text-blue-600 transition-colors">
<span class="flex items-center gap-2"><i class="fas fa-language"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> English Translation</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
<span class="transition group-open:rotate-180 chevron"><i class="fas fa-chevron-down"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsummary>
<div class="text-gray-600 italic text-md mt-3 px-3 bg-white">
After the boat trip, Max wants to move. He decides to hike in the vineyards. The region is known for its white wine, especially Riesling. The slopes are very steep so that the grapes get a lot of sun. Max walks up a small path. It is exhausting, but nature smells good. He sees the green vines and the small grapes. The grape harvest takes place here in autumn. Once at the top, he sits on a bench. He has a perfect view over the whole valley. Hiking is the miller's delight, he thinks and smiles.
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdetails>
<div class="bg-yellow-50 p-6 rounded-lg border border-yellow-200">
<h3 class="text-xl text-yellow-800 mb-4 font-bold"><i class="fas fa-pencil-alt mr-2"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi>Prueba de Comprensión</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh3>
<div class="space-y-3" id="quiz-8">
<p>1. Die Region ist bekannt für <input type="text" class="input-blank w-24" data-answer="Weißwein">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>2. Die Hänge sind sehr <input type="text" class="input-blank w-24" data-answer="steil">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>3. Max setzt sich auf eine <input type="text" class="input-blank w-24" data-answer="Bank">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<button onclick="checkAnswers('quiz-8')" class="mt-4 bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded font-bold transition">Check Answers</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsection>
<section id="chapter-9" class="chapter-card p-6 md:p-8">
<h2 class="text-3xl text-green-800 mb-6">Kapitel 9: Flammkuchen zum Abendessen</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh2>
<div class="flex gap-3 mb-4">
<button onclick="playAudio('text-9', 1.0, 'btn-9-normal')" id="btn-9-normal" class="flex items-center gap-2 bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-green-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Normal</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
<button onclick="playAudio('text-9', 0.7, 'btn-9-slow')" id="btn-9-slow" class="flex items-center gap-2 bg-blue-50 hover:bg-blue-100 text-blue-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-blue-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Slow</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<div id="text-9" class="prose prose-lg text-gray-700 leading-relaxed mb-6">
<p>Am Abend hat Max großen Hunger. Er geht in ein traditionelles Gasthaus. Die Kellnerin trägt ein Dirndl, obwohl das in dieser Region nicht immer üblich ist. Max schaut auf die Speisekarte. Er möchte eine Spezialität probieren.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>Er bestellt einen Flammkuchen. Das ist wie eine sehr dünne Pizza, aber ohne Tomatensoße. Der Teig ist belegt mit Creme, Zwiebeln und Speck. Als das Essen kommt, duftet es herrlich. Der Boden ist knusprig und heiß. Max trinkt dazu ein Glas Mineralwasser mit Kohlensäure. Das Essen schmeckt fantastisch nach einem langen Tag.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<details class="group mb-8">
<summary class="flex justify-between items-center font-medium cursor-pointer list-none bg-gray-50 hover:bg-gray-100 p-3 rounded-lg text-blue-600 transition-colors">
<span class="flex items-center gap-2"><i class="fas fa-language"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> English Translation</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
<span class="transition group-open:rotate-180 chevron"><i class="fas fa-chevron-down"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsummary>
<div class="text-gray-600 italic text-md mt-3 px-3 bg-white">
In the evening, Max is very hungry. He goes to a traditional inn. The waitress is wearing a Dirndl, although that is not always common in this region. Max looks at the menu. He wants to try a specialty. He orders a Flammkuchen (tarte flambée). This is like a very thin pizza, but without tomato sauce. The dough is topped with cream, onions, and bacon. When the food comes, it smells wonderful. The base is crispy and hot. Max drinks a glass of sparkling mineral water with it. The food tastes fantastic after a long day.
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdetails>
<div class="bg-yellow-50 p-6 rounded-lg border border-yellow-200">
<h3 class="text-xl text-yellow-800 mb-4 font-bold"><i class="fas fa-pencil-alt mr-2"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi>Prueba de Comprensión</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh3>
<div class="space-y-3" id="quiz-9">
<p>1. Max geht in ein traditionelles <input type="text" class="input-blank w-24" data-answer="Gasthaus">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>2. Er bestellt einen <input type="text" class="input-blank w-24" data-answer="Flammkuchen">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>3. Der Boden ist <input type="text" class="input-blank w-24" data-answer="knusprig">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<button onclick="checkAnswers('quiz-9')" class="mt-4 bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded font-bold transition">Check Answers</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsection>
<section id="chapter-10" class="chapter-card p-6 md:p-8">
<h2 class="text-3xl text-green-800 mb-6">Kapitel 10: Abschied in Mainz</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh2>
<div class="flex gap-3 mb-4">
<button onclick="playAudio('text-10', 1.0, 'btn-10-normal')" id="btn-10-normal" class="flex items-center gap-2 bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-green-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Normal</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
<button onclick="playAudio('text-10', 0.7, 'btn-10-slow')" id="btn-10-slow" class="flex items-center gap-2 bg-blue-50 hover:bg-blue-100 text-blue-800 px-3 py-1.5 rounded-full transition text-sm font-semibold border border-blue-200"><i class="fas fa-play"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> Slow</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<div id="text-10" class="prose prose-lg text-gray-700 leading-relaxed mb-6">
<p>Die letzte Station der Reise ist die Stadt Mainz. Max ist ein bisschen müde, aber sehr glücklich. Er geht zum Gutenberg-Museum, um die erste gedruckte Bibel zu sehen. Das ist sehr beeindruckend.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>Später sitzt er wieder im Zug, diesmal für die Heimfahrt. Er schaut sich seine Fotos an: der Dom, die Loreley, das Schiff und der Flammkuchen. Er hat viel gelernt und viele neue Wörter gehört. Deutschland hat wunderschöne Landschaften. „Das war nicht meine letzte Reise“, denkt Max. Er schließt die Augen und träumt vom Rhein.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<details class="group mb-8">
<summary class="flex justify-between items-center font-medium cursor-pointer list-none bg-gray-50 hover:bg-gray-100 p-3 rounded-lg text-blue-600 transition-colors">
<span class="flex items-center gap-2"><i class="fas fa-language"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi> English Translation</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
<span class="transition group-open:rotate-180 chevron"><i class="fas fa-chevron-down"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgspan>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsummary>
<div class="text-gray-600 italic text-md mt-3 px-3 bg-white">
The last stop of the trip is the city of Mainz. Max is a little tired, but very happy. He goes to the Gutenberg Museum to see the first printed bible. That is very impressive. Later he is sitting on the train again, this time for the trip home. He looks at his photos: the cathedral, the Lorelei, the ship, and the Flammkuchen. He learned a lot and heard many new words. Germany has beautiful landscapes. "That was not my last trip," thinks Max. He closes his eyes and dreams of the Rhine.
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdetails>
<div class="bg-yellow-50 p-6 rounded-lg border border-yellow-200">
<h3 class="text-xl text-yellow-800 mb-4 font-bold"><i class="fas fa-pencil-alt mr-2"></ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgi>Prueba de Comprensión</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgh3>
<div class="space-y-3" id="quiz-10">
<p>1. Die letzte Station ist <input type="text" class="input-blank w-24" data-answer="Mainz">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>2. Er besucht das Gutenberg-<input type="text" class="input-blank w-24" data-answer="Museum">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
<p>3. Er schließt die Augen und <input type="text" class="input-blank w-24" data-answer="träumt">.</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgp>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<button onclick="checkAnswers('quiz-10')" class="mt-4 bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded font-bold transition">Check Answers</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbutton>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgsection>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgdiv>
<script>
/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg State tracking for Speech
let currentUtterance = null;
let currentButtonId = null;
const synth = window.speechSynthesis;
function updateIcon(btnId, type) {
const btn = document.getElementById(btnId);
if (!btn) return;
const icon = btn.querySelector('i');
if (type === 'play') {
icon.className = 'fas fa-play';
/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg Reset styling
btn.classList.remove('ring-2', 'ring-offset-1', 'ring-green-400', 'ring-blue-400');
} else if (type === 'pause') {
icon.className = 'fas fa-pause';
/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg Add active styling
if (btnId.includes('normal')) btn.classList.add('ring-2', 'ring-offset-1', 'ring-green-400');
if (btnId.includes('slow')) btn.classList.add('ring-2', 'ring-offset-1', 'ring-blue-400');
}
}
function resetAllButtons() {
document.querySelectorAll('button[id^="btn-"]').forEach(btn => {
updateIcon(btn.id, 'play');
});
}
function playAudio(elementId, rate, btnId) {
/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg Case 1: Clicked the SAME button that is currently active
if (currentButtonId === btnId) {
if (synth.paused) {
synth.resume();
updateIcon(btnId, 'pause');
} else if (synth.speaking) {
synth.pause();
updateIcon(btnId, 'play');
} else {
/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg State mismatch (e.g. user cancelled externally), restart
startNewSpeech(elementId, rate, btnId);
}
return;
}
/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg Case 2: Clicked a DIFFERENT button or NEW start
synth.cancel();
resetAllButtons();
startNewSpeech(elementId, rate, btnId);
}
function startNewSpeech(elementId, rate, btnId) {
const text = document.getElementById(elementId).innerText;
currentUtterance = new SpeechSynthesisUtterance(text);
currentUtterance.lang = 'de-DE'; /ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg German
currentUtterance.rate = rate;
currentUtterance.onend = () => {
updateIcon(btnId, 'play');
currentButtonId = null;
currentUtterance = null;
};
currentUtterance.onerror = (e) => {
console.error('Speech error:', e);
updateIcon(btnId, 'play');
currentButtonId = null;
}
currentButtonId = btnId;
updateIcon(btnId, 'pause');
synth.speak(currentUtterance);
}
/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg Quiz Logic
function checkAnswers(quizId) {
const quizContainer = document.getElementById(quizId);
const inputs = quizContainer.querySelectorAll('input');
inputs.forEach(input => {
const userAnswer = input.value.trim().toLowerCase();
const correctAnswer = input.dataset.answer.toLowerCase();
/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg Reset classes
input.classList.remove('correct', 'incorrect');
if (userAnswer === correctAnswer) {
input.classList.add('correct');
} else {
input.classList.add('incorrect');
}
});
}
/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpg Ensure speech is cancelled if user leaves page/ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgrefreshes
window.onbeforeunload = function () {
synth.cancel();
};
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgscript>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpgbody>
</ghost-assets/eine-reise-am-rhein/eine-reise-am-rhein.jpghtml>
<!--kg-card-end: html-->
</div> </article> </main> <!-- Global Loading Bar --> <div id="loading-bar" class="fixed top-0 left-0 h-1 bg-[#005522] z-[100] transition-all duration-300 ease-out opacity-0 w-0"></div> <script>
let loadingTimeout;
document.addEventListener('astro:before-preparation', () => {
const bar = document.getElementById('loading-bar');
if (bar) {
bar.style.width = '30%';
bar.style.opacity = '1';
// Move slowly after initial jump
loadingTimeout = setTimeout(() => {
bar.style.width = '70%';
}, 300);
}
});
document.addEventListener('astro:after-navigation', () => {
const bar = document.getElementById('loading-bar');
if (bar) {
clearTimeout(loadingTimeout);
bar.style.width = '100%';
setTimeout(() => {
bar.style.opacity = '0';
setTimeout(() => {
bar.style.width = '0';
}, 300);
}, 200);
}
});
</script> </body> </html> <script type="text/javascript" src="https://jmayereup.github.io/tj-components/dist/tj-chapter-book.js" defer></script>