<!DOCTYPE html>
<html lang=“de“>
<head>
<meta charset=“UTF-8″ />
<meta name=“viewport“ content=“width=device-width, initial-scale=1.0″/>
<title>Bier-Expertenwissen | LogIN-LogOUT</title>
<link href=“https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap“ rel=“stylesheet“/>
<style>
:root {
–yellow: #f5c800;
–yellow-d: #d4ab00;
–dark: #1a1a1a;
–darker: #111111;
–mid: #2a2a2a;
–card-bg: #222222;
–text: #e8e8e8;
–muted: #888888;
–correct: #4caf50;
–wrong: #e53935;
–radius: 6px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(–darker);
color: var(–text);
font-family: ‚Open Sans‘, sans-serif;
font-size: 15px;
line-height: 1.6;
}
/* ── TOP BAR ── */
.topbar {
background: var(–dark);
border-bottom: 1px solid #333;
padding: 8px 24px;
font-size: 12px;
color: var(–muted);
text-align: center;
letter-spacing: .04em;
}
/* ── HEADER ── */
header {
background: var(–dark);
border-bottom: 3px solid var(–yellow);
padding: 18px 32px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.logo-wrap {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
}
.logo-icon {
width: 48px; height: 48px;
background: var(–yellow);
border-radius: 4px;
display: flex; align-items: center; justify-content: center;
font-family: ‚Oswald‘, sans-serif;
font-weight: 700;
font-size: 11px;
color: var(–dark);
letter-spacing: -.5px;
line-height: 1.1;
text-align: center;
flex-shrink: 0;
}
.logo-text {
font-family: ‚Oswald‘, sans-serif;
font-weight: 700;
font-size: 20px;
color: #fff;
letter-spacing: .05em;
}
.logo-text span { color: var(–yellow); }
.header-cta {
background: var(–yellow);
color: var(–dark);
font-family: ‚Oswald‘, sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
padding: 10px 22px;
border: none;
border-radius: var(–radius);
cursor: pointer;
text-decoration: none;
transition: background .2s;
}
.header-cta:hover { background: var(–yellow-d); }
/* ── HERO ── */
.hero {
background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 60%, #1e1a00 100%);
border-bottom: 1px solid #333;
padding: 64px 32px 56px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: “;
position: absolute; inset: 0;
background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(245,200,0,.07) 0%, transparent 70%);
pointer-events: none;
}
.hero-eyebrow {
display: inline-block;
background: var(–yellow);
color: var(–dark);
font-family: ‚Oswald‘, sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: .15em;
text-transform: uppercase;
padding: 5px 16px;
border-radius: 2px;
margin-bottom: 22px;
}
.hero h1 {
font-family: ‚Oswald‘, sans-serif;
font-weight: 700;
font-size: clamp(2rem, 5vw, 3.4rem);
letter-spacing: .04em;
text-transform: uppercase;
color: #fff;
line-height: 1.05;
margin-bottom: 16px;
}
.hero h1 span { color: var(–yellow); }
.hero-sub {
color: var(–muted);
font-size: 15px;
max-width: 520px;
margin: 0 auto 32px;
}
.hero-badges {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 36px;
}
.badge {
background: var(–mid);
border: 1px solid #3a3a3a;
border-radius: 20px;
padding: 6px 16px;
font-size: 13px;
color: var(–text);
}
.badge strong { color: var(–yellow); }
.btn-start {
background: var(–yellow);
color: var(–dark);
font-family: ‚Oswald‘, sans-serif;
font-weight: 700;
font-size: 16px;
letter-spacing: .1em;
text-transform: uppercase;
padding: 16px 44px;
border: none;
border-radius: var(–radius);
cursor: pointer;
transition: background .2s, transform .15s;
display: inline-block;
}
.btn-start:hover { background: var(–yellow-d); transform: translateY(-2px); }
/* ── PROGRESS ── */
.progress-bar-wrap {
background: var(–dark);
border-bottom: 1px solid #333;
padding: 14px 32px;
display: flex;
align-items: center;
gap: 18px;
position: sticky;
top: 0;
z-index: 100;
}
.progress-label {
font-family: ‚Oswald‘, sans-serif;
font-weight: 600;
font-size: 13px;
letter-spacing: .06em;
color: var(–muted);
white-space: nowrap;
}
.progress-label span { color: var(–yellow); }
.progress-track {
flex: 1;
height: 6px;
background: #333;
border-radius: 3px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(–yellow);
border-radius: 3px;
width: 0%;
transition: width .4s ease;
}
.score-badge {
background: var(–mid);
border: 1px solid #3a3a3a;
border-radius: 4px;
padding: 4px 14px;
font-family: ‚Oswald‘, sans-serif;
font-weight: 600;
font-size: 14px;
white-space: nowrap;
}
.score-badge .pts { color: var(–yellow); }
/* ── MAIN ── */
main {
max-width: 860px;
margin: 0 auto;
padding: 40px 24px 80px;
}
/* ── SCREENS ── */
.screen { display: none; }
.screen.active { display: block; }
/* ── CATEGORY SECTION ── */
.cat-header {
display: flex;
align-items: center;
gap: 14px;
margin: 48px 0 24px;
}
.cat-header:first-child { margin-top: 0; }
.cat-icon {
font-size: 28px;
width: 52px; height: 52px;
background: var(–mid);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
border: 2px solid var(–yellow);
}
.cat-title {
font-family: ‚Oswald‘, sans-serif;
font-weight: 700;
font-size: 18px;
letter-spacing: .08em;
text-transform: uppercase;
color: #fff;
}
.cat-count {
font-size: 12px;
color: var(–muted);
letter-spacing: .05em;
}
.cat-divider {
flex: 1;
height: 1px;
background: linear-gradient(to right, #444, transparent);
}
/* ── QUESTION CARD ── */
.q-card {
background: var(–card-bg);
border: 1px solid #333;
border-radius: 8px;
margin-bottom: 16px;
overflow: hidden;
transition: border-color .2s;
}
.q-card:hover { border-color: #555; }
.q-card.answered { border-color: #3a3a3a; }
.q-card.correct { border-left: 4px solid var(–correct); }
.q-card.wrong { border-left: 4px solid var(–wrong); }
.q-head {
padding: 18px 20px 14px;
cursor: pointer;
display: flex;
gap: 14px;
align-items: flex-start;
}
.q-num {
background: var(–yellow);
color: var(–dark);
font-family: ‚Oswald‘, sans-serif;
font-weight: 700;
font-size: 13px;
width: 28px; height: 28px;
border-radius: 4px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.q-card.correct .q-num { background: var(–correct); color: #fff; }
.q-card.wrong .q-num { background: var(–wrong); color: #fff; }
.q-text {
font-size: 15px;
color: var(–text);
line-height: 1.55;
}
/* ── OPTIONS ── */
.q-options {
padding: 0 20px 18px 62px;
display: flex;
flex-direction: column;
gap: 8px;
}
.opt-btn {
background: var(–mid);
border: 1px solid #3a3a3a;
border-radius: var(–radius);
color: var(–text);
font-family: ‚Open Sans‘, sans-serif;
font-size: 14px;
padding: 10px 16px;
cursor: pointer;
text-align: left;
transition: background .15s, border-color .15s;
}
.opt-btn:hover:not(:disabled) { background: #333; border-color: var(–yellow); }
.opt-btn:disabled { cursor: default; }
.opt-btn.opt-correct { background: rgba(76,175,80,.18); border-color: var(–correct); color: #81c784; }
.opt-btn.opt-wrong { background: rgba(229,57,53,.15); border-color: var(–wrong); color: #ef9a9a; }
/* ── REVEAL ── */
.q-reveal {
display: none;
padding: 14px 20px 18px 62px;
border-top: 1px solid #333;
}
.q-reveal.show { display: block; }
.reveal-correct {
font-family: ‚Oswald‘, sans-serif;
font-weight: 600;
font-size: 15px;
color: var(–correct);
margin-bottom: 6px;
}
.reveal-answer {
font-size: 14px;
color: var(–text);
line-height: 1.6;
margin-bottom: 8px;
}
.reveal-source {
font-size: 11px;
color: var(–muted);
font-style: italic;
}
/* ── RESULTS ── */
.results {
text-align: center;
padding: 48px 24px;
}
.result-icon {
font-size: 72px;
margin-bottom: 20px;
display: block;
}
.result-title {
font-family: ‚Oswald‘, sans-serif;
font-weight: 700;
font-size: clamp(1.8rem, 4vw, 2.8rem);
text-transform: uppercase;
letter-spacing: .05em;
color: #fff;
margin-bottom: 8px;
}
.result-title span { color: var(–yellow); }
.result-score {
font-family: ‚Oswald‘, sans-serif;
font-size: 4rem;
font-weight: 700;
color: var(–yellow);
line-height: 1;
margin: 24px 0 8px;
}
.result-max { color: var(–muted); font-size: 14px; margin-bottom: 32px; }
.result-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 12px;
max-width: 600px;
margin: 0 auto 40px;
}
.result-cat {
background: var(–card-bg);
border: 1px solid #333;
border-radius: 8px;
padding: 14px 10px;
}
.result-cat-icon { font-size: 22px; margin-bottom: 4px; }
.result-cat-name { font-size: 10px; color: var(–muted); letter-spacing: .05em; margin-bottom: 6px; }
.result-cat-score { font-family: ‚Oswald‘, sans-serif; font-weight: 700; font-size: 22px; color: var(–yellow); }
.btn-restart {
background: var(–yellow);
color: var(–dark);
font-family: ‚Oswald‘, sans-serif;
font-weight: 700;
font-size: 15px;
letter-spacing: .1em;
text-transform: uppercase;
padding: 14px 40px;
border: none;
border-radius: var(–radius);
cursor: pointer;
transition: background .2s;
}
.btn-restart:hover { background: var(–yellow-d); }
.btn-scroll-top {
display: inline-block;
margin-top: 14px;
background: transparent;
border: 1px solid #444;
color: var(–muted);
font-size: 13px;
padding: 10px 28px;
border-radius: var(–radius);
cursor: pointer;
transition: border-color .2s, color .2s;
font-family: ‚Open Sans‘, sans-serif;
}
.btn-scroll-top:hover { border-color: var(–yellow); color: var(–yellow); }
/* ── FOOTER ── */
footer {
background: var(–dark);
border-top: 3px solid var(–yellow);
padding: 40px 32px 24px;
text-align: center;
}
.footer-logo {
font-family: ‚Oswald‘, sans-serif;
font-weight: 700;
font-size: 18px;
color: #fff;
letter-spacing: .05em;
margin-bottom: 10px;
}
.footer-logo span { color: var(–yellow); }
.footer-addr { color: var(–muted); font-size: 13px; line-height: 1.8; margin-bottom: 20px; }
.footer-links { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.footer-links a { color: var(–muted); font-size: 12px; text-decoration: none; }
.footer-links a:hover { color: var(–yellow); }
.footer-copy { color: #444; font-size: 11px; margin-top: 24px; }
/* ── RESPONSIVE ── */
@media (max-width: 600px) {
header { padding: 14px 18px; }
.hero { padding: 44px 18px 40px; }
main { padding: 28px 14px 60px; }
.q-options { padding-left: 20px; }
.q-reveal { padding-left: 20px; }
.progress-bar-wrap { padding: 12px 16px; gap: 10px; }
}
</style>
</head>
<body>
<!– TOP BAR –>
<div class=“topbar“>Lechtestraße 21 · 48565 Steinfurt | 02552 – 9979266</div>
<!– HEADER –>
<header>
<a class=“logo-wrap“ href=“https://www.login-logout.de“ target=“_blank“>
<div class=“logo-icon“>LOG<br>IN</div>
<div class=“logo-text“><span>LogIN</span>-LogOUT</div>
</a>
<a class=“header-cta“ href=“https://www.login-logout.de/buchen-preise-gutschein/“ target=“_blank“>Jetzt buchen</a>
</header>
<!– PROGRESS BAR (sticky) –>
<div class=“progress-bar-wrap“ id=“progressBar“ style=“display:none;“>
<div class=“progress-label“>Fortschritt <span id=“progText“>0 / 24</span></div>
<div class=“progress-track“><div class=“progress-fill“ id=“progFill“></div></div>
<div class=“score-badge“><span class=“pts“ id=“scoreDisplay“>0</span> Pts</div>
</div>
<main>
<!– ══ SCREEN: START ══ –>
<div class=“screen active“ id=“screenStart“>
<div class=“hero“ style=“margin: -40px -24px 0; padding: 64px 32px 56px;“>
<div class=“hero-eyebrow“>🍺 Expertenwissen</div>
<h1>Bier · Biergarten<br><span>& Gastronomie</span></h1>
<p class=“hero-sub“>24 knifflige Fragen rund um Braukunst, Bierkultur, Wirtshaus-Wissen und Gastronomie. Bist du bereit?</p>
<div class=“hero-badges“>
<div class=“badge“>⭐⭐⭐ <strong>Schwierigkeitslevel: Experte</strong></div>
<div class=“badge“>📋 <strong>24</strong> Fragen</div>
<div class=“badge“>🏆 <strong>6</strong> Kategorien</div>
</div>
<button class=“btn-start“ onclick=“startQuiz()“>Rätsel starten →</button>
</div>
</div>
<!– ══ SCREEN: QUIZ ══ –>
<div class=“screen“ id=“screenQuiz“></div>
<!– ══ SCREEN: RESULTS ══ –>
<div class=“screen“ id=“screenResults“></div>
</main>
<!– FOOTER –>
<footer>
<div class=“footer-logo“><span>LogIN</span>-LogOUT · Escape-Room Steinfurt</div>
<div class=“footer-addr“>
Reality Games Steinfurt · Lechtestraße 21 · 48565 Steinfurt<br>
02552 – 9979266 · info@login-logout.de
</div>
<div class=“footer-links“>
<a href=“https://www.login-logout.de/escape-rooms/“ target=“_blank“>Escape-Rooms</a>
<a href=“https://www.login-logout.de/outdoor-escape-room-2/“ target=“_blank“>Outdoor-Escape</a>
<a href=“https://www.login-logout.de/home-escapes/“ target=“_blank“>Home-Escapes</a>
<a href=“https://www.login-logout.de/krimidinner/“ target=“_blank“>Krimi-Tisch</a>
<a href=“https://www.login-logout.de/kontakt/“ target=“_blank“>Kontakt</a>
</div>
<div class=“footer-copy“>© LogIN-LogOUT · Reality Games Steinfurt</div>
</footer>
<script>
const QUIZ = [
{
kat: „Bierbrauen & Braukunst“,
icon: „🍺“,
fragen: [
{
frage: „Wie lautet der vollständige Name des deutschen Reinheitsgebots von 1516 und welcher bayerische Herzog erließ es?“,
optionen: [
„Bayerisches Reinheitsgebot – Herzog Wilhelm IV. von Bayern“,
„Deutsches Braugesetz – Kaiser Maximilian I.“,
„Münchner Brauordnung – Herzog Ludwig X.“,
„Hofbräuliches Reinheitsgebot – König Ludwig I.“
],
richtig: 0,
antwort: „Das Bayerische Reinheitsgebot wurde 1516 von Herzog Wilhelm IV. erlassen. Es schreibt vor, dass Bier nur aus Wasser, Gerstenmalz und Hopfen gebraut werden darf. Hefe wurde erst später offiziell ergänzt.“,
quelle: „Bayerisches Hauptstaatsarchiv / Brauer-Bund.de“
},
{
frage: „Welcher Mikroorganismus ist für die alkoholische Gärung beim Bierbrauen verantwortlich?“,
optionen: [
„Lactobacillus acidophilus“,
„Saccharomyces cerevisiae (obergärig) bzw. pastorianus (untergärig)“,
„Acetobacter aceti“,
„Brettanomyces bruxellensis“
],
richtig: 1,
antwort: „Die alkoholische Gärung wird von Hefen durchgeführt: Saccharomyces cerevisiae für obergärige Biere und Saccharomyces pastorianus für untergärige Biere. Sie wandeln Zucker in Alkohol und CO₂ um.“,
quelle: „Lehrbuch der Brauerei, VLB Berlin“
},
{
frage: „Was beschreibt der Begriff ‚Stammwürze‘ beim Bierbrauen?“,
optionen: [
„Den Anteil an Hopfen in der Würze vor dem Kochen“,
„Den Alkoholgehalt nach der Gärung“,
„Den Gehalt an gelösten Stoffen (v.a. Zucker) in der Würze vor der Gärung“,
„Die Wassertemperatur beim Einmaischen“
],
richtig: 2,
antwort: „Stammwürze bezeichnet den Gehalt an gelösten Stoffen (hauptsächlich Zucker) in der Würze vor der Gärung. Gemessen wird sie in Grad Plato (°P) oder Prozent Brix. Sie bestimmt maßgeblich den späteren Alkoholgehalt.“,
quelle: „Deutsches Institut für Normung (DIN) / VLB Berlin“
},
{
frage: „Bei welcher Temperatur gärt untergärige Bierhefe (z.B. für Pils)?“,
optionen: [
„15 – 25 °C“,
„4 – 12 °C“,
„25 – 35 °C“,
„0 – 4 °C“
],
richtig: 1,
antwort: „Untergärige Hefe (Saccharomyces pastorianus) gärt bei kühlen 4–12 °C und sinkt dabei zu Boden. Obergärige Hefe hingegen arbeitet bei wärmeren 15–25 °C und steigt nach oben.“,
quelle: „Narziß: Abriss der Bierbrauerei, Wiley-VCH“
},
]
},
{
kat: „Zutaten & Rohstoffe“,
icon: „🌾“,
fragen: [
{
frage: „Welche vier Grundzutaten sind laut Reinheitsgebot für die Bierherstellung zugelassen?“,
optionen: [
„Wasser, Weizen, Hopfen, Hefe“,
„Wasser, Gerstenmalz, Hopfen, Hefe“,
„Wasser, Malz, Zucker, Hopfen“,
„Wasser, Gerste, Roggen, Hopfen“
],
richtig: 1,
antwort: „Laut Reinheitsgebot sind nur Wasser, Gerstenmalz, Hopfen und Hefe erlaubt. Hefe wurde erst im 19. Jahrhundert ergänzt, nachdem ihre Rolle bekannt wurde.“,
quelle: „Bayerisches Reinheitsgebot 1516 / Brauer-Bund“
},
{
frage: „Wie heißt die Alpha-Bittersäure im Hopfen, die für die Bitterkeit des Bieres hauptsächlich verantwortlich ist?“,
optionen: [
„Linalool“,
„Myrcen“,
„Humulon“,
„Lupulon“
],
richtig: 2,
antwort: „Humulon (Alpha-Humulon) ist die Bittersäure im Hopfen. Beim Kochen der Würze wird es zu Iso-Humulon isomerisiert – das eigentliche Bitterprinzip im fertigen Bier.“,
quelle: „Brewing Science – Briggs et al. / Hopsteiner Hopfenforschung“
},
{
frage: „Welcher Prozess macht aus Getreide das Braumalz?“,
optionen: [
„Das Getreide wird gemahlen und bei 200 °C geröstet“,
„Das Getreide wird gekeimt und dann gedarrt (getrocknet/erhitzt)“,
„Das Getreide wird fermentiert und anschließend gefriergetrocknet“,
„Das Getreide wird in Wasser eingeweicht und direkt verarbeitet“
],
richtig: 1,
antwort: „Beim Mälzen wird Getreide (meist Gerste) zuerst zum Keimen gebracht, damit Enzyme entstehen. Anschließend wird es gedarrt (getrocknet/erhitzt). Die Darrtemperatur bestimmt Farbe und Aroma des Malzes.“,
quelle: „Bamforth: Beer – Health and Nutrition / Weyermann Malzfabrik“
},
{
frage: „Welche Wasserqualität ist ideal für ein klassisches Pilsener, und welche Stadt ist dafür weltberühmt?“,
optionen: [
„Hartes, calciumreiches Wasser – Dublin“,
„Sehr weiches, mineralarmes Wasser – Pilsen (Plzeň/CZ)“,
„Sulfatreiches Wasser – Burton-on-Trent (UK)“,
„Natriumreiches Wasser – München“
],
richtig: 1,
antwort: „Für Pilsener ist sehr weiches, mineralarmes Wasser ideal. Weltberühmt ist Pilsen (Plzeň) in Tschechien – Geburtsstadt des Pilsner Urquells (1842). Das dort sehr weiche Wasser ist entscheidend für den hellen, klaren Charakter.“,
quelle: „Pivovar Plzeň / Jackson: World Guide to Beer“
},
]
},
{
kat: „Biergeschichte & Kultur“,
icon: „🏛️“,
fragen: [
{
frage: „Aus welchem Anlass wurde 1810 das erste Oktoberfest in München gefeiert?“,
optionen: [
„Einweihung des Hofbräuhauses“,
„Erntedankfest auf der Theresienwiese“,
„Hochzeit von Kronprinz Ludwig mit Prinzessin Therese von Sachsen-Hildburghausen“,
„100. Jahrestag des Reinheitsgebots“
],
richtig: 2,
antwort: „Das erste Oktoberfest fand 1810 anlässlich der Hochzeit von Kronprinz Ludwig (später König Ludwig I.) mit Prinzessin Therese statt. Die Festwiese trägt bis heute ihren Namen: Theresienwiese.“,
quelle: „Stadtarchiv München / Oktoberfest Offiziell“
},
{
frage: „Was ist das Besondere an Trappistenbier und wie viele anerkannte Trappisten-Brauereien gibt es weltweit (Stand ~2024)?“,
optionen: [
„Es wird im Freien in offenen Bottichen vergoren – 5 Brauereien“,
„Es wird in Trappisten-Klöstern gebraut und die Erlöse gehen an soziale Zwecke – 14 Brauereien“,
„Es muss aus belgischem Hopfen bestehen – 8 Brauereien“,
„Es darf keinen Alkohol enthalten – 20 Brauereien“
],
richtig: 1,
antwort: „Trappistenbier wird in Zisterzienser-Klöstern (Trappisten) gebraut. Die Erlöse finanzieren das Klosterleben und soziale Projekte. Es gibt 14 anerkannte Brauereien weltweit, darunter das berühmte Westvleteren in Belgien.“,
quelle: „International Trappist Association / UNESCO 2016“
},
{
frage: „Wie heißt die älteste noch betriebene Brauerei der Welt und seit wann ist sie urkundlich belegt?“,
optionen: [
„Hofbräuhaus München – seit 1589“,
„Augustiner Bräu München – seit 1328“,
„Staatsbrauerei Weihenstephan in Freising – seit 1040“,
„Kloster Andechs – seit 1455“
],
richtig: 2,
antwort: „Weihenstephan in Freising (Bayern) ist seit 1040 urkundlich als Brauerei belegt (ein Hopfengarten wurde bereits 768 erwähnt). Heute ist es Staatsbrauerei und Sitz der TU München Brauwesen.“,
quelle: „Staatsbrauerei Weihenstephan / TU München“
},
{
frage: „Welches Land hat den weltweit höchsten Pro-Kopf-Bierkonsum – und wie viel Liter sind es ungefähr?“,
optionen: [
„Deutschland – ca. 200 Liter“,
„Irland – ca. 150 Liter“,
„Tschechien – ca. 180–190 Liter“,
„Österreich – ca. 160 Liter“
],
richtig: 2,
antwort: „Tschechien führt seit Jahrzehnten die Weltrangliste an: ca. 180–190 Liter pro Kopf und Jahr. Deutschland liegt zum Vergleich bei ca. 85–90 Litern.“,
quelle: „Kirin Institute of Food and Lifestyle Report 2023 / Statista“
},
]
},
{
kat: „Biergarten & Wirtshaus“,
icon: „🌿“,
fragen: [
{
frage: „Was dürfen Gäste laut bayerischem ‚Mitbring-Recht‘ im Biergarten mitbringen?“,
optionen: [
„Bier und Speisen nach Wahl“,
„Nur alkoholfreie Getränke“,
„Eigene Speisen (Brotzeit), aber keine Getränke“,
„Alles, wenn es selbst gebacken oder selbst gemacht ist“
],
richtig: 2,
antwort: „Das bayerische Mitbring-Recht erlaubt Gästen, eigene Speisen (Brotzeit) mitzubringen – Getränke müssen am Ausschank gekauft werden. Der Ursprung liegt bei Brauerei-Biergärten des 18./19. Jahrhunderts.“,
quelle: „Bayerisches Wirtschaftsministerium / Brauerei-Geschichte Bayern“
},
{
frage: „Warum wurden ursprünglich Kastanienbäume in Münchner Biergärten gepflanzt?“,
optionen: [
„Wegen ihrer Früchte für die Küche“,
„Als Dekorationselement für Hochzeitsfeiern“,
„Um die Eiskeller der Brauereien durch Schatten kühl zu halten“,
„Auf Anordnung Ludwigs I. zur Stadtbegrünung“
],
richtig: 2,
antwort: „Kastanien wurden ab dem 18. Jahrhundert gepflanzt, um die Eiskeller der Brauereien durch Schatten kühl zu halten. Eis wurde im Winter aus Seen gewonnen und in tiefen Kellern gelagert – der Schatten war überlebenswichtig fürs Bier.“,
quelle: „Münchner Stadtmuseum / Bayerische Biergartenverordnung“
},
{
frage: „Was regelt die bayerische Biergartenverordnung von 1999 zur Öffnungszeit?“,
optionen: [
„Biergärten müssen um 22 Uhr schließen wie alle Gaststätten“,
„Biergärten dürfen bis 23 Uhr öffnen, Lärm gilt bis dahin als sozialadäquat“,
„Biergärten dürfen unbegrenzt geöffnet bleiben“,
„Biergärten dürfen bis 24 Uhr öffnen, aber nur für Stammgäste“
],
richtig: 1,
antwort: „Die bayerische Biergartenverordnung (1999) erlaubt eine Öffnung bis 23 Uhr statt der üblichen 22 Uhr. Der Lärm gilt bis dahin als sozialadäquat und ist grundsätzlich hinzunehmen.“,
quelle: „Bayerische Biergartenverordnung vom 20.4.1999 (BayRS 7102-3-W)“
},
{
frage: „Woraus besteht der traditionelle Maßkrug und was bedeutet das Wort ‚Maß‘ etymologisch?“,
optionen: [
„Aus Kupfer; ‚Maß‘ kommt vom Lateinischen ‚massa‘ (Masse)“,
„Aus Steingut (Steinzeug); ‚Maß‘ kommt vom Mittelhochdeutschen ‚mâze‘ (Menge)“,
„Aus Zinn; ‚Maß‘ bezeichnet die Breite des Kruges“,
„Aus Porzellan; ‚Maß‘ ist eine Abkürzung für ‚Maßkrug'“
],
richtig: 1,
antwort: „Traditionell wird der Maßkrug aus salzglasiertem Steinzeug (Steingut) gefertigt. Das Wort ‚Maß‘ stammt vom mittelhochdeutschen ‚mâze‘ (Menge/Maß) und fasst genau 1 Liter.“,
quelle: „Bayerisches Landesamt für Denkmalpflege / Duden“
},
]
},
{
kat: „Gastronomie & Service“,
icon: „🍽️“,
fragen: [
{
frage: „Was bedeutet ‚Mise en place‘ und von wem wurde der Begriff geprägt?“,
optionen: [
„‚Tisch reservieren‘ – geprägt von Paul Bocuse“,
„‚Alles an seinen Platz‘ – vollständige Vorbereitung vor Servicebeginn, geprägt von Escoffier“,
„‚Speisenausgabe‘ – aus dem deutschen Gaststättenrecht“,
„‚Platz nehmen‘ – aus dem klassischen Wiener Servicewesen“
],
richtig: 1,
antwort: „‚Mise en place‘ bedeutet ‚alles an seinen Platz‘ und bezeichnet die vollständige Vorbereitung vor dem Service. Auguste Escoffier (1846–1935), der Vater der modernen Küchenorganisation, etablierte das Konzept.“,
quelle: „Escoffier: Le Guide Culinaire (1903) / DEHOGA“
},
{
frage: „Wofür steht die Abkürzung HACCP, die in der EU für Gastronomiebetriebe gesetzlich vorgeschrieben ist?“,
optionen: [
„Hygienic And Clean Cooking Procedures“,
„Hazard Analysis and Critical Control Points“,
„Health And Catering Control Protocol“,
„Hospitality And Cleanliness Certification Program“
],
richtig: 1,
antwort: „HACCP steht für ‚Hazard Analysis and Critical Control Points‘ (Gefahrenanalyse und kritische Kontrollpunkte). Pflicht in der EU gemäß Verordnung 852/2004/EG.“,
quelle: „EU-Verordnung (EG) Nr. 852/2004 / Bundesamt für Verbraucherschutz“
},
{
frage: „Wie berechnet sich der Deckungsbeitrag in der Gastronomie und welcher Wareneinsatz gilt als angemessen?“,
optionen: [
„Umsatz minus Fixkosten; angemessen: 50–60 %“,
„Verkaufspreis minus variable Kosten (Wareneinsatz); angemessen: 25–35 %“,
„Gewinn plus Personalkosten; angemessen: 10–15 %“,
„Umsatz minus Steuern; angemessen: 40–50 %“
],
richtig: 1,
antwort: „Deckungsbeitrag = Verkaufspreis minus variable Kosten. Er zeigt, wie viel ein Produkt zur Deckung der Fixkosten beiträgt. Typischer Wareneinsatz in der Gastronomie: 25–35 % des Verkaufspreises.“,
quelle: „DEHOGA Bundesverband – Betriebswirtschaftliche Kennzahlen“
},
{
frage: „Was ist ‚Table d’hôte‘ und wie unterscheidet sie sich von ‚à la carte‘?“,
optionen: [
„Table d’hôte ist ein Tisch für VIP-Gäste; à la carte ist für alle anderen“,
„Table d’hôte ist ein festes Menü zum Pauschalpreis; à la carte bietet freie Einzelauswahl“,
„Table d’hôte ist das Dessertbuffet; à la carte sind warme Speisen“,
„Table d’hôte ist nur in Frankreich erlaubt; à la carte ist der deutsche Begriff“
],
richtig: 1,
antwort: „Table d’hôte (‚Tisch des Wirts‘) ist ein festes Menü zu einem Pauschalpreis. À la carte ermöglicht freie Auswahl einzelner Gerichte mit separaten Preisen. Table d’hôte ermöglicht bessere Kalkulation und schnelleren Service.“,
quelle: „Gastronomielexikon / Hänssler: Fachkunde für das Gastgewerbe“
},
]
},
{
kat: „Internationale Bierkultur“,
icon: „🌍“,
fragen: [
{
frage: „Was unterscheidet ein ‚Ale‘ von einem ‚Lager‘?“,
optionen: [
„Ales enthalten mehr Alkohol als Lager“,
„Ales sind obergärig (15–25 °C), Lager sind untergärig (4–12 °C)“,
„Ales werden ohne Hopfen gebraut, Lager mit Hopfen“,
„Ales sind immer dunkel, Lager immer hell“
],
richtig: 1,
antwort: „Ale = obergärig (Hefe arbeitet bei 15–25 °C, typisch für UK, Belgien, USA). Lager = untergärig (4–12 °C, typisch für Deutschland, Tschechien). Lager macht ca. 90 % der Weltbierproduktion aus.“,
quelle: „Jackson: World Beer Guide / Brewers Association USA“
},
{
frage: „Was macht das belgische Lambic-Bier einzigartig?“,
optionen: [
„Es wird mit 10 verschiedenen Hopfensorten gebraut“,
„Es enthält keinen Alkohol und ist für Kinder geeignet“,
„Es gärt durch spontane Vergärung mit Wildhefen aus der Luft“,
„Es muss mindestens 10 Jahre lagern“
],
richtig: 2,
antwort: „Lambic aus dem Pajottenland (Belgien) gärt durch spontane Vergärung: Die Würze wird offen der Luft ausgesetzt und von Wildhefen (v.a. Brettanomyces) und Milchsäurebakterien vergoren. Das Ergebnis ist ein saures, komplexes Bier.“,
quelle: „HORAL – Haute Fermentation / Jackson: Great Beers of Belgium“
},
{
frage: „Was versteht man unter ‚Craft Beer‘ und welche drei Kriterien definiert die amerikanische Brewers Association?“,
optionen: [
„Handgebrautes Bier nach Reinheitsgebot; Kriterien: deutsch, hopfig, kalt“,
„Designerbier für Hipster; Kriterien: teuer, selten, trendy“,
„Handwerklich gebrautes Bier; Kriterien: Klein (max. 6 Mio. Barrel), Unabhängig (max. 25 % Fremdkapital), Handwerklich“,
„Bier ohne Zusatzstoffe; Kriterien: bio, regional, alkoholfrei“
],
richtig: 2,
antwort: „Craft Beer ist handwerklich gebrautes Bier kleiner, unabhängiger Brauereien. Brewers Association (USA): 1) Klein (max. 6 Mio. Barrel/Jahr), 2) Unabhängig (max. 25 % Fremdkapital von Nicht-Craft-Investoren), 3) Handwerklich.“,
quelle: „Brewers Association – Craft Brewer Definition 2023“
},
{
frage: „Welches Land produziert den weltweit meisten Hopfen und in welcher deutschen Region wird er hauptsächlich angebaut?“,
optionen: [
„USA (Oregon) und Bayern (Tettnang)“,
„Deutschland (Hallertau, Bayern) und USA – Deutschland führt die Weltrangliste an“,
„Tschechien (Žatec) – die Heimat des Saazer Hopfens“,
„China (Xinjiang) – seit 2020 größter Produzent weltweit“
],
richtig: 1,
antwort: „Deutschland ist der weltgrößte Hopfenproduzent. Das wichtigste Anbaugebiet ist die Hallertau in Bayern (ca. 85 % der deutschen Ernte). Die USA folgen auf Platz 2.“,
quelle: „Deutsches Hopfeninstitut Wolnzach / FAO Agrardaten 2023″
},
]
}
];
let answered = 0;
let score = 0;
let catScores = {};
function startQuiz() {
document.getElementById(’screenStart‘).classList.remove(‚active‘);
document.getElementById(’screenQuiz‘).classList.add(‚active‘);
document.getElementById(‚progressBar‘).style.display = ‚flex‘;
const container = document.getElementById(’screenQuiz‘);
container.innerHTML = “;
QUIZ.forEach((cat, ci) => {
catScores[ci] = 0;
const header = document.createElement(‚div‘);
header.className = ‚cat-header‘;
header.innerHTML = `
<div class=“cat-icon“>${cat.icon}</div>
<div>
<div class=“cat-title“>${cat.kat}</div>
<div class=“cat-count“>4 Fragen · Kategorie ${ci + 1} von 6</div>
</div>
<div class=“cat-divider“></div>
`;
container.appendChild(header);
cat.fragen.forEach((q, qi) => {
const qNum = ci * 4 + qi + 1;
const card = document.createElement(‚div‘);
card.className = ‚q-card‘;
card.id = `card-${qNum}`;
const optsHTML = q.optionen.map((opt, oi) =>
`<button class=“opt-btn“ data-qi=“${qNum}“ data-oi=“${oi}“ onclick=“answer(${qNum},${oi},${ci},${qi})“>${opt}</button>`
).join(“);
card.innerHTML = `
<div class=“q-head“>
<div class=“q-num“>${qNum}</div>
<div class=“q-text“>${q.frage}</div>
</div>
<div class=“q-options“ id=“opts-${qNum}“>${optsHTML}</div>
<div class=“q-reveal“ id=“reveal-${qNum}“>
<div class=“reveal-correct“>✔ Richtige Antwort</div>
<div class=“reveal-answer“>${q.antwort}</div>
<div class=“reveal-source“>📚 Quelle: ${q.quelle}</div>
</div>
`;
container.appendChild(card);
});
});
// Submit button
const submitWrap = document.createElement(‚div‘);
submitWrap.style.textAlign = ‚center‘;
submitWrap.style.marginTop = ’48px‘;
submitWrap.innerHTML = `
<button class=“btn-start“ id=“btnSubmit“ onclick=“showResults()“ style=“opacity:.4;pointer-events:none;“>
Ergebnis anzeigen →
</button>
<p style=“color:var(–muted);font-size:13px;margin-top:12px;“ id=“submitHint“>Beantworte alle 24 Fragen, um das Ergebnis zu sehen.</p>
`;
container.appendChild(submitWrap);
}
function answer(qNum, chosenIdx, catIdx, qIdx) {
const q = QUIZ[catIdx].fragen[qIdx];
const card = document.getElementById(`card-${qNum}`);
if (card.classList.contains(‚answered‘)) return;
const opts = document.querySelectorAll(`[data-qi=“${qNum}“]`);
opts.forEach(btn => {
btn.disabled = true;
const idx = parseInt(btn.dataset.oi);
if (idx === q.richtig) btn.classList.add(‚opt-correct‘);
else if (idx === chosenIdx) btn.classList.add(‚opt-wrong‘);
});
const isCorrect = chosenIdx === q.richtig;
card.classList.add(‚answered‘, isCorrect ? ‚correct‘ : ‚wrong‘);
document.getElementById(`reveal-${qNum}`).classList.add(’show‘);
if (isCorrect) {
score++;
catScores[catIdx]++;
}
answered++;
updateProgress();
if (answered === 24) {
const btn = document.getElementById(‚btnSubmit‘);
btn.style.opacity = ‚1‘;
btn.style.pointerEvents = ‚auto‘;
document.getElementById(’submitHint‘).textContent = ‚🎉 Du hast alle Fragen beantwortet!‘;
btn.scrollIntoView({ behavior: ’smooth‘, block: ‚center‘ });
}
}
function updateProgress() {
document.getElementById(‚progText‘).textContent = `${answered} / 24`;
document.getElementById(‚progFill‘).style.width = `${(answered / 24) * 100}%`;
document.getElementById(’scoreDisplay‘).textContent = score;
}
function showResults() {
document.getElementById(’screenQuiz‘).classList.remove(‚active‘);
document.getElementById(’screenResults‘).classList.add(‚active‘);
const pct = Math.round((score / 24) * 100);
let icon, title, msg;
if (pct >= 90) { icon = ‚🏆‘; title = ‚Bier-<span>Meister!</span>‘; msg = ‚Außergewöhnliche Leistung! Du weißt mehr über Bier als die meisten Brauer.‘; }
else if (pct >= 70) { icon = ‚🍺‘; title = ‚Echter <span>Kenner!</span>‘; msg = ‚Beeindruckend! Du hast fundiertes Wissen über Bier & Gastronomie.‘; }
else if (pct >= 50) { icon = ‚🌾‘; title = ‚Guter <span>Durchschnitt</span>‘; msg = ‚Solides Wissen! Noch ein paar Maß, und du bist Experte.‘; }
else { icon = ‚🍀‘; title = ‚Noch <span>Luft nach oben</span>‘; msg = ‚Kein Problem – das nächste Quiz-Abend im Biergarten kommt bestimmt!‘; }
const catHTML = QUIZ.map((cat, ci) => `
<div class=“result-cat“>
<div class=“result-cat-icon“>${cat.icon}</div>
<div class=“result-cat-name“>${cat.kat}</div>
<div class=“result-cat-score“>${catScores[ci]}/4</div>
</div>
`).join(“);
document.getElementById(’screenResults‘).innerHTML = `
<div class=“results“>
<span class=“result-icon“>${icon}</span>
<div class=“result-title“>${title}</div>
<p style=“color:var(–muted);font-size:14px;max-width:420px;margin:12px auto 0;“>${msg}</p>
<div class=“result-score“>${score}</div>
<div class=“result-max“>von 24 Punkten · ${pct} %</div>
<div class=“result-grid“>${catHTML}</div>
<button class=“btn-restart“ onclick=“restartQuiz()“>🔄 Nochmal spielen</button>
<br>
<a class=“btn-scroll-top“ href=“https://www.login-logout.de/buchen-preise-gutschein/“ target=“_blank“ style=“margin-top:16px;display:inline-block;“>
🎮 Jetzt Escape-Room buchen →
</a>
</div>
`;
window.scrollTo({ top: 0, behavior: ’smooth‘ });
}
function restartQuiz() {
answered = 0; score = 0; catScores = {};
document.getElementById(‚progFill‘).style.width = ‚0%‘;
document.getElementById(‚progText‘).textContent = ‚0 / 24′;
document.getElementById(’scoreDisplay‘).textContent = ‚0‘;
document.getElementById(’screenResults‘).classList.remove(‚active‘);
document.getElementById(’screenStart‘).classList.add(‚active‘);
document.getElementById(‚progressBar‘).style.display = ’none‘;
window.scrollTo({ top: 0, behavior: ’smooth‘ });
}
</script>
</body>
</html>
