/* ===========================================================
Werkstatt-Blackout – Basis-Stylesheet
-----------------------------------------------------------
Enthält CSS-Reset, Farbvariablen und grundlegende Stile
für Body und App-Container. Weitere Modul-Stile (Rätsel,
Hotspots, Hilfesystem) werden später ergänzt.
=========================================================== */
/* -----------------------------------------------------------
1. CSS-Reset (Grundlagen)
-----------------------------------------------------------
Setzt Standard-Margins/Paddings zurück und sorgt für ein
vorhersagbares Box-Modell auf allen Elementen.
----------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
img,
picture,
video,
canvas {
display: block;
max-width: 100%;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
/* -----------------------------------------------------------
2. CSS-Variablen (Farbschema & Typografie)
-----------------------------------------------------------
Zentral definiert, damit das Farbschema projektweit
konsistent bleibt und später einfach angepasst werden kann.
----------------------------------------------------------- */
:root {
/* Dunkel-industrielles Grundschema */
--farbe-hintergrund: #1A1A1A; /* tiefster Hintergrund */
--farbe-flaeche: #2A2A2A; /* Karten, Panels */
--farbe-flaeche-hell: #3A3A3A; /* Hover, Hervorhebung */
--farbe-rahmen: #4A4A4A; /* dezente Linien */
/* Text */
--farbe-text: #F5F5F5; /* Haupttext, heller Kontrast */
--farbe-text-gedimmt: #A0A0A0; /* sekundärer Text */
/* Akzente */
--farbe-warnung: #E63946; /* Rot: gesperrt / Fehler */
--farbe-erfolg: #4ADE80; /* Grün: freigeschaltet */
/* Schriften (System-Fonts, keine externen CDNs) */
--schrift-basis: -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue",
Arial, sans-serif;
--schrift-mono: "Courier New", Consolas, "Lucida Console", monospace;
/* Layout */
--abstand-s: 0.5rem;
--abstand-m: 1rem;
--abstand-l: 2rem;
}
/* -----------------------------------------------------------
3. Basis-Stile für Body und App-Container
----------------------------------------------------------- */
body {
font-family: var(--schrift-basis);
background-color: #000; /* schwarzer Fallback hinter dem Panorama */
color: var(--farbe-text);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
overflow: hidden; /* Panorama füllt den Viewport, kein Scrollen */
}
/* -----------------------------------------------------------
4. App- und Panorama-Container
-----------------------------------------------------------
#app ist der äußere Wrapper und füllt den Viewport.
#panorama wird von Pannellum als Canvas-Ziel genutzt und
muss eine explizite Größe haben, damit die Bibliothek das
Bild korrekt rendern kann.
----------------------------------------------------------- */
#app {
position: relative;
width: 100vw;
height: 100vh;
background-color: #000; /* Fallback, falls Bild (noch) nicht geladen */
}
#panorama {
position: absolute;
inset: 0; /* top/right/bottom/left = 0 */
width: 100vw;
height: 100vh;
background-color: #000; /* verhindert weißen Blitz vor dem Laden */
}
/* -----------------------------------------------------------
5. Intro-Screen
-----------------------------------------------------------
Vollflächiges Overlay, das vor dem Panorama liegt und
nach dem Klick auf "SPIEL STARTEN" ausgeblendet wird.
----------------------------------------------------------- */
/* 5.1 Container: liegt mit z-index über dem Panorama. */
.intro-screen {
position: fixed;
inset: 0; /* top/right/bottom/left = 0 */
width: 100vw;
height: 100vh;
z-index: 1000;
background-color: #0A0A0A; /* sehr dunkler Hintergrund */
display: flex;
align-items: center;
justify-content: center;
padding: var(--abstand-l);
overflow: hidden; /* Notlicht-Pseudo-Element darf nicht scrollen */
/* Basiswerte für spätere Fade-Out-Animation. */
opacity: 1;
visibility: visible;
transition: opacity 0.8s ease-in-out,
visibility 0s linear 0s;
}
/* 5.2 Versteckter Zustand: wird von JS per Klasse "intro-screen--hidden"
gesetzt. Nach Ende des Opacity-Übergangs (0.8s) wird visibility
auf hidden umgestellt, damit das Element aus dem Tab-Fokus
genommen wird, und pointer-events deaktiviert. */
.intro-screen--hidden {
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity 0.8s ease-in-out,
visibility 0s linear 0.8s;
}
/* 5.3 Pulsierendes rotes Notlicht-Overlay.
Radialer Gradient von transparenter Mitte zu leicht rotem Rand.
Animation "notlicht-puls" variiert die Deckkraft leicht. */
.intro-notlicht {
position: absolute;
inset: 0;
background: radial-gradient(
circle at center,
rgba(230, 57, 70, 0) 0%,
rgba(230, 57, 70, 0.08) 55%,
rgba(230, 57, 70, 0.18) 100%
);
pointer-events: none; /* keine Interaktion blockieren */
animation: notlicht-puls 3s ease-in-out infinite;
}
@keyframes notlicht-puls {
0%, 100% { opacity: 0.75; }
50% { opacity: 1; }
}
/* 5.4 Zentrierter Textinhalt (über dem Notlicht-Overlay). */
.intro-content {
position: relative;
z-index: 1;
max-width: 640px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--abstand-l);
text-align: center;
}
/* 5.5 Warnmeldung in Monospace, rot, mit eigenem Puls (1.5s). */
.intro-warnung {
font-family: var(--schrift-mono);
font-weight: bold;
color: var(--farbe-warnung);
font-size: 1.8rem;
line-height: 1.3;
letter-spacing: 0.05em;
animation: warnung-puls 1.5s ease-in-out infinite;
}
.intro-warnung p {
margin: 0.25rem 0;
}
@keyframes warnung-puls {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
/* 5.6 Fließtext: heller Text auf dunklem Hintergrund. */
.intro-text {
color: var(--farbe-text);
font-size: 1.05rem;
line-height: 1.6;
max-width: 600px;
}
/* 5.7 Formular (Label + Input + Button). */
.intro-form {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--abstand-m);
width: 100%;
max-width: 360px;
}
.intro-label {
color: var(--farbe-text);
font-size: 1rem;
align-self: flex-start;
}
/* 5.8 Eingabefeld: dunkel mit hellem Rahmen, roter Fokusrahmen. */
.intro-input {
width: 100%;
padding: 0.75rem 1rem;
background-color: var(--farbe-flaeche);
color: var(--farbe-text);
border: 2px solid var(--farbe-rahmen);
border-radius: 4px;
font-size: 1rem;
outline: none;
transition: border-color 0.2s ease-in-out,
box-shadow 0.2s ease-in-out;
}
.intro-input:focus {
border-color: var(--farbe-warnung);
box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.25);
}
/* 5.9 Start-Button: roter Hintergrund, weiße Schrift, Hover- und
Disabled-Zustand deutlich unterschiedlich. */
.intro-button {
width: 100%;
padding: 0.9rem 1.5rem;
background-color: var(--farbe-warnung);
color: #FFFFFF;
border: none;
border-radius: 4px;
font-size: 1.1rem;
font-weight: bold;
letter-spacing: 0.05em;
cursor: pointer;
transition: background-color 0.2s ease-in-out,
transform 0.1s ease-in-out;
}
.intro-button:hover:not(:disabled) {
background-color: #F04E5B; /* etwas heller als --farbe-warnung */
}
.intro-button:active:not(:disabled) {
transform: translateY(1px);
}
.intro-button:disabled {
background-color: #5A2A2E; /* abgedunkeltes Rot */
color: #A0A0A0;
cursor: not-allowed;
opacity: 0.7;
}
/* 5.10 Mobile-Anpassungen. */
@media (max-width: 600px) {
.intro-warnung {
font-size: 1.2rem;
}
.intro-text {
font-size: 0.95rem;
}
.intro-content {
gap: var(--abstand-m);
}
}
/* 5.11 Reduzierte Bewegung respektieren (Barrierefreiheit). */
@media (prefers-reduced-motion: reduce) {
.intro-notlicht,
.intro-warnung {
animation: none;
}
}
/* -----------------------------------------------------------
6. Sicherheits-Leuchten im Panorama
-----------------------------------------------------------
Jede Leuchte liegt als Kind in einem Pannellum-Hotspot-
Container (.leuchte-wrapper). Die Positionierung dieses
Wrappers wird laufend von Pannellum berechnet – deshalb
werden Hover- und Animations-Transforms ausschließlich
auf das innere .leuchte-Element angewendet.
----------------------------------------------------------- */
/* 6.1 Wrapper – neutral, nur ein Haken für spätere Selektoren. */
.leuchte-wrapper {
/* bewusst leer: Positionierung kommt von Pannellum */
}
/* 6.2 Grundform der Leuchte. */
.leuchte {
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
position: relative;
transition: transform 0.2s ease-in-out;
}
/* 6.3 Roter (aktiver) Zustand – pulsiert. */
.leuchte-rot {
background-color: var(--farbe-warnung);
box-shadow: 0 0 20px rgba(230, 57, 70, 0.6);
animation: leuchte-pulsieren 1.5s ease-in-out infinite;
}
/* 6.4 Grüner (gelöster) Zustand – konstantes Licht, kein Puls. */
.leuchte-gruen {
background-color: var(--farbe-erfolg);
box-shadow: 0 0 20px rgba(74, 222, 128, 0.6);
animation: none;
}
/* 6.5 Hover: dezenter Größen-Boost.
Gilt primär für den grünen Zustand; beim roten überlagert die
Puls-Animation den Transform-Wert – das ist bewusst in Kauf
genommen, damit Pannellums Positionierung nicht stört. */
.leuchte-gruen:hover {
transform: scale(1.2);
}
/* 6.6 Tastatur-Fokus sichtbar machen. */
.leuchte:focus-visible {
outline: 3px solid var(--farbe-text);
outline-offset: 3px;
}
/* 6.7 Tooltip mit dem Rätsel-Label als CSS-Pseudo-Element. */
.leuchte::after {
content: attr(data-label);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
background-color: rgba(10, 10, 10, 0.92);
color: var(--farbe-text);
padding: 0.3rem 0.6rem;
border-radius: 4px;
font-size: 0.9rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-in-out;
z-index: 10;
}
.leuchte:hover::after,
.leuchte:focus-visible::after {
opacity: 1;
}
/* 6.8 Pulsier-Animation (1.5 s Zyklus, Opacity + leichtes Scale). */
@keyframes leuchte-pulsieren {
0%, 100% {
opacity: 0.7;
transform: scale(1.0);
}
50% {
opacity: 1.0;
transform: scale(1.1);
}
}
/* 6.9 Mobile: größere Klickfläche. */
@media (max-width: 600px) {
.leuchte {
width: 60px;
height: 60px;
}
}
/* 6.10 Reduzierte Bewegung respektieren. */
@media (prefers-reduced-motion: reduce) {
.leuchte-rot {
animation: none;
}
}
/* -----------------------------------------------------------
7. Rätsel-Modal
-----------------------------------------------------------
Wird von js/main.js dynamisch in document.body eingehängt
und mit 0.3 s Fade-Out-Animation wieder entfernt.
----------------------------------------------------------- */
/* 7.1 Halbtransparentes Overlay über dem Panorama. */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 2000; /* über Panorama UND Fortschritt */
background-color: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
padding: var(--abstand-m);
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.modal-overlay--fade-out {
opacity: 0;
}
/* 7.2 Zentrales Panel mit rotem Akzent-Rand. */
.modal-panel {
background-color: var(--farbe-flaeche);
border: 2px solid var(--farbe-warnung);
border-radius: 6px;
padding: var(--abstand-l);
max-width: 640px;
width: 100%;
color: var(--farbe-text);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
max-height: 90vh;
overflow-y: auto;
}
.modal-titel {
color: var(--farbe-warnung);
font-size: 1.4rem;
letter-spacing: 0.03em;
margin-bottom: var(--abstand-m);
}
.modal-inhalt {
color: var(--farbe-text-gedimmt);
margin-bottom: var(--abstand-l);
min-height: 80px;
line-height: 1.6;
}
/* 7.3 Button-Leiste unten. */
.modal-aktionen {
display: flex;
gap: var(--abstand-m);
justify-content: flex-end;
flex-wrap: wrap;
}
.modal-button {
padding: 0.65rem 1.3rem;
border: none;
border-radius: 4px;
font-size: 1rem;
font-weight: bold;
letter-spacing: 0.03em;
cursor: pointer;
transition: background-color 0.2s ease-in-out,
transform 0.1s ease-in-out;
}
.modal-button:active {
transform: translateY(1px);
}
.modal-button-neutral {
background-color: var(--farbe-flaeche-hell);
color: var(--farbe-text);
}
.modal-button-neutral:hover {
background-color: var(--farbe-rahmen);
}
.modal-button-erfolg {
background-color: var(--farbe-erfolg);
color: #0A0A0A; /* dunkle Schrift auf hellem Grün */
}
.modal-button-erfolg:hover {
background-color: #6FE89C;
}
/* 7.4 Mobile-Feintuning. */
@media (max-width: 600px) {
.modal-panel {
padding: var(--abstand-m);
}
.modal-titel {
font-size: 1.15rem;
}
.modal-aktionen {
justify-content: stretch;
}
.modal-button {
flex: 1 1 auto;
}
}
/* -----------------------------------------------------------
8. Fortschrittsanzeige
-----------------------------------------------------------
Fixierte Leiste oben rechts, zeigt "Sicherheits-Checks: x/5".
z-index liegt unter dem Intro-Screen (1000) und unter dem
Modal (2000), damit die Anzeige dort jeweils nicht stört.
----------------------------------------------------------- */
.fortschritt {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 500;
background-color: rgba(26, 26, 26, 0.85);
color: var(--farbe-text);
border: 1px solid var(--farbe-rahmen);
border-radius: 4px;
padding: 0.5rem 0.85rem;
font-size: 0.95rem;
letter-spacing: 0.02em;
pointer-events: none; /* reine Anzeige, nicht klickbar */
}
#fortschritt-wert {
color: var(--farbe-erfolg);
font-weight: bold;
font-variant-numeric: tabular-nums; /* Ziffern springen nicht */
}
@media (max-width: 600px) {
.fortschritt {
top: 0.5rem;
right: 0.5rem;
font-size: 0.8rem;
padding: 0.35rem 0.6rem;
}
}
/* -----------------------------------------------------------
9. Finale – Licht kehrt zurück (Phase 2)
-----------------------------------------------------------
Wenn alle sechs Leuchten grün sind, schaltet js/main.js die
Klasse "panorama--final" auf #panorama. Der Filter-Übergang
läuft drei Sekunden, der kurze Leuchtstoffröhren-Flacker am
Anfang wird über eine separate Klasse aktiviert.
----------------------------------------------------------- */
/* 9.1 Weicher Filter-Übergang: Bild wird heller, farbiger, klarer. */
#panorama {
transition: filter 3s ease-in-out;
will-change: filter;
}
#panorama.panorama--final {
filter: brightness(1.3) saturate(1.1) contrast(1.05);
}
/* 9.2 Kurzer Flackereffekt – wie eine Leuchtstoffröhre, die anspringt.
Wird per Klasse panorama--flicker einmalig ausgelöst und nach
ca. 1,2 s von JS wieder entfernt. */
#panorama.panorama--flicker {
animation: leuchtstoff-flackern 1.2s ease-out 1 both;
}
@keyframes leuchtstoff-flackern {
0% { opacity: 0.35; }
5% { opacity: 0.95; }
8% { opacity: 0.40; }
12% { opacity: 0.85; }
16% { opacity: 0.50; }
22% { opacity: 1.00; }
28% { opacity: 0.60; }
35% { opacity: 1.00; }
45% { opacity: 0.80; }
100% { opacity: 1.00; }
}
/* -----------------------------------------------------------
10. Finale – "TÜR ENTRIEGELT"-Overlay (Phase 3)
-----------------------------------------------------------
Zentrierter Textblock, oben/unten dunkle Gradienten für
Lesbarkeit, Panorama bleibt in der Mitte sichtbar.
----------------------------------------------------------- */
.finale-text-overlay {
position: fixed;
inset: 0;
z-index: 1500;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none; /* blockiert keine Interaktion */
background:
linear-gradient(
to bottom,
rgba(0, 0, 0, 0.75) 0%,
rgba(0, 0, 0, 0) 28%,
rgba(0, 0, 0, 0) 72%,
rgba(0, 0, 0, 0.75) 100%
);
opacity: 0;
transition: opacity 0.5s ease-in-out;
padding: var(--abstand-l);
text-align: center;
}
.finale-text-overlay--sichtbar {
opacity: 1;
}
.finale-text-inner {
color: var(--farbe-text);
max-width: 720px;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}
.finale-tuer-icon {
font-size: 3rem;
line-height: 1;
margin-bottom: var(--abstand-m);
}
.finale-tuer-titel {
font-size: 3rem;
font-weight: bold;
letter-spacing: 0.12em;
color: var(--farbe-erfolg);
margin-bottom: var(--abstand-m);
}
.finale-tuer-untertitel {
font-size: 1.2rem;
line-height: 1.5;
}
@media (max-width: 600px) {
.finale-tuer-titel { font-size: 1.8rem; }
.finale-tuer-untertitel { font-size: 1rem; }
.finale-tuer-icon { font-size: 2.2rem; }
}
/* -----------------------------------------------------------
11. Finale – Urkunde (Phase 4)
-----------------------------------------------------------
Ein würdevolles, urkundenartiges Panel. Aussehen orientiert
sich an klassischen Prüfungsurkunden: cremefarbener Hinter-
grund, dunkler Rahmen, serifenbetonte Typografie, dezentes
Silhouetten-Motiv im Hintergrund.
Die gesamte Urkunde liegt in einer Bühne (.finale-buehne),
die auch die beiden Aktions-Buttons aufnimmt.
----------------------------------------------------------- */
/* 11.1 Bühne: Overlay über dem Panorama, zentriert. */
.finale-buehne {
position: fixed;
inset: 0;
z-index: 1800;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--abstand-l);
padding: var(--abstand-l);
background: radial-gradient(
circle at center,
rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0.90) 100%
);
opacity: 0;
transition: opacity 0.8s ease-in-out;
overflow-y: auto;
}
.finale-buehne--sichtbar {
opacity: 1;
}
/* 11.2 Urkunden-Panel (Kreditkartenformat: ca. 1.6:1). */
.urkunde {
position: relative;
width: min(720px, 92vw);
aspect-ratio: 1.6 / 1;
background-color: #F6EEDA; /* warmes Cremeweiß */
background-image:
/* feines, technisches Raster-Muster (SVG-Data-URI) */
url("data:image/svg+xml;utf8,\
");
background-size: 40px 40px;
color: #2A1810;
border: 2px solid #8B2027; /* dunkelrote Einfassung */
border-radius: 4px;
box-shadow:
0 0 0 6px #F6EEDA, /* innerer Passepartout-Rand */
0 0 0 8px #8B2027, /* zweiter Rahmen */
0 20px 60px rgba(0, 0, 0, 0.6);
padding: 3.5% 5%;
font-family: "Georgia", "Times New Roman", serif;
display: grid;
grid-template-rows: auto 1fr auto;
overflow: hidden;
}
/* 11.3 Stilisierte Bohrmaschine im Hintergrund. */
.urkunde-silhouette {
position: absolute;
right: 4%;
top: 50%;
transform: translateY(-50%);
width: 45%;
max-width: 280px;
opacity: 0.08;
pointer-events: none;
}
/* 11.4 Typografie innerhalb der Urkunde. */
.urkunde-titel {
text-align: center;
font-size: clamp(1.1rem, 2.4vw, 1.7rem);
letter-spacing: 0.25em;
font-weight: bold;
color: #8B2027;
border-bottom: 1px solid rgba(139, 32, 39, 0.4);
padding-bottom: 0.4em;
margin-bottom: 0.2em;
}
.urkunde-kern {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 0.4em;
}
.urkunde-bestaetigt {
font-style: italic;
font-size: clamp(0.8rem, 1.6vw, 1.05rem);
color: #4A3020;
}
.urkunde-name {
font-size: clamp(1.4rem, 3.8vw, 2.6rem);
font-weight: bold;
color: #1A0E06;
letter-spacing: 0.02em;
border-bottom: 1px solid rgba(26, 14, 6, 0.25);
padding: 0.1em 1em 0.15em;
max-width: 90%;
word-break: break-word;
}
.urkunde-text {
font-size: clamp(0.78rem, 1.5vw, 1rem);
line-height: 1.45;
max-width: 85%;
color: #2A1810;
}
/* 11.5 Fußzeile: Datum links, Werkstattleitung rechts. */
.urkunde-fuss {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1em;
font-size: clamp(0.7rem, 1.3vw, 0.9rem);
color: #3A2518;
margin-top: 0.8em;
}
.urkunde-fuss-block {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
}
.urkunde-signatur {
font-family: "Segoe Script", "Lucida Handwriting", cursive;
font-size: 1.1em;
color: #1A0E06;
transform: rotate(-4deg);
margin-bottom: 0.1em;
}
.urkunde-linie {
width: 140px;
max-width: 100%;
border-bottom: 1px solid #3A2518;
margin-bottom: 0.25em;
}
.urkunde-statistik {
position: absolute;
bottom: 0.5em;
left: 50%;
transform: translateX(-50%);
font-size: 0.7rem;
color: rgba(42, 24, 16, 0.65);
font-style: italic;
letter-spacing: 0.02em;
white-space: nowrap;
}
/* 11.6 Urkunde auf schmalen Geräten: Seitenverhältnis lockern. */
@media (max-width: 520px) {
.urkunde {
aspect-ratio: auto;
min-height: 70vh;
}
.urkunde-silhouette {
width: 60%;
opacity: 0.06;
}
}
/* -----------------------------------------------------------
12. Finale – Aktions-Buttons
----------------------------------------------------------- */
.finale-aktionen {
display: flex;
gap: var(--abstand-m);
flex-wrap: wrap;
justify-content: center;
}
.finale-button {
padding: 0.8rem 1.5rem;
border: none;
border-radius: 4px;
font-size: 1rem;
font-weight: bold;
letter-spacing: 0.04em;
cursor: pointer;
transition: background-color 0.2s ease-in-out,
transform 0.1s ease-in-out;
}
.finale-button:active {
transform: translateY(1px);
}
.finale-button-primaer {
background-color: var(--farbe-warnung);
color: #FFFFFF;
box-shadow: 0 0 20px rgba(230, 57, 70, 0.4);
}
.finale-button-primaer:hover {
background-color: #F04E5B;
}
.finale-button-neutral {
background-color: var(--farbe-flaeche-hell);
color: var(--farbe-text);
}
.finale-button-neutral:hover {
background-color: var(--farbe-rahmen);
}
@media (max-width: 600px) {
.finale-aktionen {
width: 100%;
max-width: 420px;
}
.finale-button {
flex: 1 1 auto;
min-width: 45%;
}
}
/* -----------------------------------------------------------
12b. Info-Tafeln im Panorama (zweite Hotspot-Schicht)
-----------------------------------------------------------
Zusätzlich zu den roten/grünen Sicherheits-Leuchten gibt es
goldgelbe, quadratische Info-Tafeln mit Buch-Symbol. Sie
öffnen beim Klick ein Lese-Modal (siehe 12c).
Aufbau wie bei .leuchte: äußerer Wrapper bleibt neutral,
das innere Element trägt Styling und Animation.
----------------------------------------------------------- */
.info-hotspot-wrapper {
/* bewusst leer – Positionierung kommt von Pannellum */
}
.info-hotspot {
width: 44px !important;
height: 44px !important;
border-radius: 50%; /* runder Kreis */
background-color: rgba(255, 200, 60, 1.0); /* goldgelb */
border: none;
color: #3a2410; /* dunkelbraun für das "i" */
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 14px rgba(255, 200, 60, 0.45);
transition: transform 0.2s ease-in-out,
box-shadow 0.2s ease-in-out;
animation: info-hotspot-atmen 4s ease-in-out infinite;
}
.info-hotspot:hover {
transform: scale(1.12);
box-shadow: 0 0 22px rgba(251, 191, 36, 0.7);
}
.info-hotspot:focus-visible {
outline: 3px solid #FFFFFF;
outline-offset: 3px;
}
/* "i"-Info-Symbol innen: fett, sans-serif, dunkelbraun. */
.info-hotspot-icon {
font-family: "Inter", "Segoe UI", Roboto, system-ui, -apple-system,
sans-serif;
font-weight: 800;
font-size: 1.5rem;
line-height: 1;
color: #3a2410;
pointer-events: none;
}
/* Tooltip-Label beim Hover (über data-label). */
.info-hotspot::after {
content: attr(data-label);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
background-color: rgba(10, 10, 10, 0.92);
color: var(--farbe-text);
padding: 0.3rem 0.6rem;
border-radius: 4px;
font-size: 0.9rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-in-out;
z-index: 10;
}
.info-hotspot:hover::after,
.info-hotspot:focus-visible::after {
opacity: 1;
}
/* Sehr langsames "Atmen" – deutlich ruhiger als die
1,5-Sekunden-Pulsation der roten Rätsel-Leuchten. */
@keyframes info-hotspot-atmen {
0%, 100% { box-shadow: 0 0 12px rgba(251, 191, 36, 0.35); }
50% { box-shadow: 0 0 22px rgba(251, 191, 36, 0.65); }
}
@media (max-width: 600px) {
.info-hotspot {
width: 52px;
height: 52px;
}
.info-hotspot-icon {
font-size: 1.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
.info-hotspot {
animation: none;
}
}
/* -----------------------------------------------------------
12c. Info-Modal (Lernseite mit längeren Lesetexten)
-----------------------------------------------------------
Großes, helles Modal für ruhiges Lesen: cremefarbener
Hintergrund, Serifen-Typografie, großzügige Zeilenhöhe.
Fixe Kopf- und Fußzeile, scrollbarer Mittelbereich.
----------------------------------------------------------- */
.info-modal {
position: fixed;
inset: 0;
z-index: 2100; /* über dem Rätsel-Modal (2000) */
background-color: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
padding: 2.5vh 2.5vw;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.info-modal--sichtbar {
opacity: 1;
}
.info-modal--fade-out {
opacity: 0;
}
.info-panel {
width: 95vw;
height: 95vh;
max-width: 95vw;
max-height: 95vh;
background-color: #FAF5E8; /* warmes Cremeweiß */
color: #2A2A2A;
border: 2px solid #8B2027; /* dunkelrote Einfassung */
border-radius: 6px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
overflow: hidden;
font-family: Georgia, "Times New Roman", serif;
}
/* Kopfzeile: Titel links, X-Button rechts. */
.info-panel-header {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.8rem 1.2rem;
background-color: #F0E6CC;
border-bottom: 2px solid #D9C79B;
}
.info-panel-titel {
font-size: clamp(1.1rem, 2.2vw, 1.55rem);
font-weight: bold;
color: #8B1A1A;
letter-spacing: 0.02em;
margin: 0;
}
.info-panel-close {
flex-shrink: 0;
width: 2.2rem;
height: 2.2rem;
border: 2px solid #8B2027;
border-radius: 4px;
background-color: transparent;
color: #8B2027;
font-size: 1.6rem;
font-weight: bold;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease, color 0.15s ease;
}
.info-panel-close:hover,
.info-panel-close:focus {
background-color: #8B2027;
color: #FFFFFF;
outline: none;
}
/* Scrollbarer Textbereich – Lese-Breite begrenzt. */
.info-panel-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 1.5rem clamp(1rem, 3vw, 2rem);
}
/* Innerer Text-Container: begrenzte Max-Breite für gute Lesbarkeit. */
.info-panel-body > * {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.info-panel-heading {
font-size: clamp(1rem, 1.9vw, 1.25rem);
color: #8B1A1A;
font-weight: bold;
margin-top: 2rem;
margin-bottom: 0.6rem;
border-bottom: 1px solid rgba(139, 26, 26, 0.25);
padding-bottom: 0.2rem;
}
/* Erster Abschnitt: kein zusätzlicher Top-Abstand. */
.info-panel-body > .info-panel-heading:first-child {
margin-top: 0;
}
.info-panel-absatz {
font-size: clamp(0.95rem, 1.55vw, 1.05rem);
line-height: 1.7;
color: #2A2A2A;
margin-bottom: 1rem;
text-align: left;
}
.info-panel-liste {
list-style: disc;
padding-left: 1.4rem;
margin-bottom: 1rem;
color: #2A2A2A;
font-size: clamp(0.95rem, 1.55vw, 1.05rem);
line-height: 1.65;
}
.info-panel-liste li {
margin-bottom: 0.35rem;
}
/* Fußzeile: dezenter Hinweis auf Escape-Taste. */
.info-panel-footer {
flex-shrink: 0;
padding: 0.6rem 1.2rem;
background-color: #F0E6CC;
border-top: 1px solid #D9C79B;
font-size: 0.85rem;
color: #6A5030;
text-align: center;
font-style: italic;
font-family: var(--schrift-basis);
}
/* Smartphone: Modal randlos, kleineres Padding. */
@media (max-width: 600px) {
.info-modal {
padding: 0;
}
.info-panel {
width: 100vw;
height: 100vh;
max-width: 100vw;
max-height: 100vh;
border-radius: 0;
border: none;
}
.info-panel-body {
padding: 1rem;
}
.info-panel-header,
.info-panel-footer {
padding: 0.6rem 0.9rem;
}
}
@media (prefers-reduced-motion: reduce) {
.info-modal {
transition: none;
}
}
/* -----------------------------------------------------------
12d. Info-Tafel 1 – "Teile der Bohrmaschine"
-----------------------------------------------------------
Einspaltiges Layout, ohne Scrollen: Einleitung oben, zentrale
SVG-Zeichnung mit 9 Markern, Merke-Box unten. Der Erklärtext
erscheint als Tooltip direkt am Marker. Akzentfarbe Petrol/
Teal (#0E7C86), warme Cremeweiß-Flächen.
Vorlage für die weiteren 5 Tafeln.
----------------------------------------------------------- */
/* Farb- und Schrift-Lokalvariablen.
Sepia-Palette, passend zum Patentbild. */
.info-panel-body {
--i1-akzent: #6b4423; /* warmes Braun für Marker-Füllung */
--i1-akzent-dunkel: #3a2410; /* sehr dunkles Braun für Rand/Akzent */
--i1-akzent-warm: #8b5a2b; /* helleres Braun für Hover */
--i1-akzent-hell: #ECDDB8; /* cremig-pergament */
--i1-warm: #F5EEDC;
--i1-text: #1A0E06; /* dunkles Sepia-Schwarz */
--i1-text-dezent: #5A4232;
--i1-marker-text: #f5e8c8; /* cremige Marker-Schrift */
--i1-sans: "Inter", "Segoe UI", Roboto, system-ui, -apple-system,
sans-serif;
}
/* Modifier: Body ohne Scrollbalken, als Flex-Spalte – so passt
der gesamte Inhalt (Intro + SVG-Bühne + Merke) auf einen Bild-
schirm und die SVG kann den freien Platz einnehmen. */
.info-panel-body--tafel1 {
overflow: hidden;
display: flex;
flex-direction: column;
padding: 1rem clamp(1rem, 3vw, 2rem);
gap: 0.8rem;
}
/* Kein Auto-Zentrieren im Tafel-1-Modus (der war für die Scroll-
Variante gedacht); einzelne Blöcke bekommen ihre eigene Breite. */
.info-panel-body--tafel1 > * {
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* ---------- Intro ---------- */
.i1-intro {
flex-shrink: 0;
max-width: 900px;
width: 100%;
margin: 0 auto;
text-align: left;
}
.i1-haupttitel {
font-family: var(--i1-sans);
font-weight: 800;
letter-spacing: 0.04em;
color: var(--i1-akzent);
font-size: clamp(1.2rem, 2.2vw, 1.55rem);
line-height: 1.2;
margin: 0 0 0.35rem;
border-left: 5px solid var(--i1-akzent);
padding-left: 0.8rem;
}
.i1-lead {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(0.9rem, 1.4vw, 1rem);
line-height: 1.55;
color: var(--i1-text);
margin: 0;
max-width: 820px;
}
/* ---------- SVG-Bühne (nimmt den verfügbaren Platz) ---------- */
.i1-buehne {
position: relative; /* Referenz für absolut platzierten Tooltip */
flex: 1 1 auto;
min-height: 0; /* damit flex-shrink greifen kann */
display: flex;
align-items: center;
justify-content: center;
}
/* Bild-Wrapper: schmiegt sich an die Bildgröße an, damit
prozentuale Marker-Positionen relativ ZUM BILD interpretiert
werden (gleiches Vorgehen wie .p1-bildwrap in Rätsel 1). */
.i1-svg-box,
.i1-bildwrap {
position: relative;
display: inline-block;
align-self: center;
width: fit-content;
max-width: 100%;
max-height: 100%;
background-color: transparent;
border: none;
padding: 0;
box-shadow: none;
flex: 0 0 auto;
}
.i1-bild {
display: block;
max-width: 100%;
max-height: 65vh;
width: auto;
height: auto;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
}
/* ---------- Marker als HTML-Buttons über dem Bild ----------
Kursives "i" als Info-Symbol; dunkles Sepia-Zylinder mit
cremigem Rand und cremiger Schrift. Sanfte Pulse-Animation,
die mit der Klasse .i1-marker--gesehen abgeschaltet wird. */
.i1-marker {
position: absolute;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #5a3a1f;
border: 2px solid #f5e8c8;
color: #f5e8c8;
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
font-weight: 600;
font-size: 16px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
/* Doppel-Schatten: dezenter Grund-Schatten + animierter Pulse-
Glow (zweiter Layer). Beide sind gleichzeitig im Keyframe. */
box-shadow: 0 2px 4px rgba(58, 36, 16, 0.45);
transition: background-color 0.15s ease,
transform 0.18s ease;
animation: i1-marker-pulse 1.8s ease-in-out infinite;
z-index: 4;
}
.i1-marker > i {
font-style: italic;
font-family: inherit;
line-height: 1;
pointer-events: none;
}
.i1-marker:hover,
.i1-marker:focus,
.i1-marker--aktiv {
background-color: #8b5a2b;
transform: translate(-50%, -50%) scale(1.15);
box-shadow: 0 3px 8px rgba(58, 36, 16, 0.6);
/* Im Hover/Aktiv kurz aussetzen, sonst flackert der Pulse-Glow
gegen den Hover-Schatten. */
animation: none;
}
.i1-marker:focus-visible {
outline: 2px solid #f5e8c8;
outline-offset: 2px;
}
/* "Gesehen": Spieler hat den Hotspot mindestens einmal geöffnet.
Animation wird abgeschaltet, der Marker bleibt aber voll
funktional (Hover/Klick öffnet weiterhin den Tooltip). */
.i1-marker.i1-marker--gesehen {
animation: none;
}
@keyframes i1-marker-pulse {
0%, 100% {
box-shadow: 0 2px 4px rgba(58, 36, 16, 0.45),
0 0 0 0 rgba(139, 90, 43, 0);
}
50% {
box-shadow: 0 2px 4px rgba(58, 36, 16, 0.45),
0 0 12px 3px rgba(139, 90, 43, 0.4);
}
}
@media (prefers-reduced-motion: reduce) {
.i1-marker { animation: none; }
}
/* ---------- Tooltip direkt am Marker ---------- */
.i1-tooltip {
position: absolute;
left: 0;
top: 0;
width: clamp(220px, 26vw, 310px);
padding: 0.7rem 0.85rem;
background-color: var(--i1-akzent-hell); /* cremig-pergament */
color: var(--i1-text);
border: 2px solid var(--i1-akzent);
border-radius: 6px;
box-shadow: 0 8px 22px rgba(58, 36, 16, 0.35),
0 2px 4px rgba(0, 0, 0, 0.15);
font-family: Georgia, "Times New Roman", serif;
font-size: 0.92rem;
line-height: 1.5;
pointer-events: none; /* Tooltip blockiert Marker-Hover nicht */
opacity: 0;
transform: translateY(2px);
transition: opacity 0.15s ease, transform 0.15s ease;
z-index: 5;
max-height: 80%;
overflow-y: auto;
}
.i1-tooltip--sichtbar {
opacity: 1;
transform: translateY(0);
}
.i1-tooltip-text {
margin: 0;
}
/* Pfeil / Verbindung zum Marker: kleines Dreieck an der
jeweiligen Tooltip-Kante, ausgerichtet per data-seite. */
.i1-tooltip-pfeil {
position: absolute;
width: 10px;
height: 10px;
background-color: var(--i1-akzent-hell);
border: 2px solid var(--i1-akzent);
transform: rotate(45deg);
}
.i1-tooltip[data-seite="rechts"] .i1-tooltip-pfeil {
left: -6px;
top: 50%;
margin-top: -5px;
border-right: none;
border-top: none;
}
.i1-tooltip[data-seite="links"] .i1-tooltip-pfeil {
right: -6px;
top: 50%;
margin-top: -5px;
border-left: none;
border-bottom: none;
}
.i1-tooltip[data-seite="unten"] .i1-tooltip-pfeil {
top: -6px;
left: 50%;
margin-left: -5px;
border-right: none;
border-bottom: none;
}
.i1-tooltip[data-seite="oben"] .i1-tooltip-pfeil {
bottom: -6px;
left: 50%;
margin-left: -5px;
border-left: none;
border-top: none;
}
/* (Merke-Box-Styles entfernt – die Box ist nicht mehr Bestandteil
der Tafel 1 und nutzte ausschließlich .i1-merke*-Klassen, die
nirgendwo sonst referenziert wurden.) */
/* ---------- Responsive ---------- */
@media (max-width: 820px) {
.info-panel-body--tafel1 {
padding: 0.8rem 1rem;
gap: 0.6rem;
}
.i1-haupttitel {
font-size: 1.1rem;
}
.i1-lead {
font-size: 0.9rem;
}
/* Auf schmalen Tablets/Smartphones darf die SVG volle Breite
nehmen (Höhe ergibt sich aus aspect-ratio). */
.i1-svg-box {
width: 100%;
height: auto;
max-width: 360px;
}
.i1-tooltip {
width: min(260px, 78vw);
font-size: 0.88rem;
}
}
@media (max-width: 600px) {
.i1-tooltip {
width: min(240px, 82vw);
font-size: 0.85rem;
}
}
@media (prefers-reduced-motion: reduce) {
.i1-marker,
.i1-tooltip {
transition: none;
}
}
/* ===========================================================
13. Puzzle 1 – Teile der Standbohrmaschine (Drag & Drop)
-----------------------------------------------------------
Das Modal erhält für dieses Rätsel die Zusatz-Klasse
.modal-panel--wide, damit links das SVG und rechts die
Zuordnungs-Liste + Chip-Pool nebeneinander Platz finden.
Auf schmalen Bildschirmen (<= 720px) stapeln sich beide
Spalten untereinander.
=========================================================== */
/* -----------------------------------------------------------
Rätsel-Modal (Renderer-Modus): nahezu Vollbild.
-----------------------------------------------------------
Das Panel streckt sich auf 95% des Viewports; darin liegt
ein festes Header-Band (Titel + X-Schließen), ein
scrollbarer Inhaltsbereich und ein festes Footer-Band
(Prüfen-Button + Hinweistext). Auf Smartphones wird das
Modal randlos (100 × 100 vh/vw).
----------------------------------------------------------- */
.modal-panel--wide {
width: 95vw;
height: 95vh;
max-width: none;
max-height: none;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Overlay ohne Innenabstand, damit das 95%-Panel genau
im vorgesehenen Rahmen liegt und auf Mobilgeräten eine
echte Vollbild-Ansicht möglich ist. */
.modal-overlay--wide {
padding: 0;
background-color: rgba(0, 0, 0, 0.55); /* etwas heller, damit Fortschritt noch durchschimmert */
}
/* Kopfbereich: Titel links, X-Button rechts. Schrumpft nicht. */
.modal-header {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--abstand-m);
padding: 0.5rem var(--abstand-l);
border-bottom: 2px solid var(--farbe-rahmen);
background-color: var(--farbe-flaeche);
}
.modal-header .modal-titel {
margin-bottom: 0;
font-size: 1.1rem;
line-height: 1.2;
}
/* Quadratischer X-Button im Header; klare Klickfläche für
Finger und Maus. */
.modal-close-x {
flex-shrink: 0;
width: 2.1rem;
height: 2.1rem;
border: 2px solid var(--farbe-warnung);
border-radius: 4px;
background-color: transparent;
color: var(--farbe-warnung);
font-size: 1.6rem;
font-weight: bold;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease, color 0.15s ease;
}
.modal-close-x:hover,
.modal-close-x:focus {
background-color: var(--farbe-warnung);
color: #FFFFFF;
outline: none;
}
/* Inhaltsbereich im Renderer-Modus: Auf Desktop (>=721 px) füllt
er den verbleibenden Platz zwischen Header und Footer. Er ist
selbst ein Flex-Container, damit das 3-Spalten-Layout
mitwächst. Scrollen ist dort nicht nötig (overflow: hidden).
Auf Mobilgeräten darf gescrollt werden (siehe Media Query). */
.modal-panel--wide .modal-inhalt {
flex: 1 1 auto;
min-height: 0; /* wichtig, damit Flex-Overflow greift */
overflow: hidden;
padding: 0.75rem var(--abstand-m);
margin-bottom: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
/* Footer-Band: beherbergt Meldung, Telefon-Hilfe und PRÜFEN-
Bedienleiste. Schrumpft nicht und bleibt immer sichtbar. */
.modal-footer {
flex-shrink: 0;
padding: 0.5rem var(--abstand-m);
border-top: 2px solid var(--farbe-rahmen);
background-color: var(--farbe-flaeche);
display: flex;
flex-direction: column;
gap: 0.4rem;
}
/* Smartphone: randloses Vollbild, keine Eck-Radien. */
@media (max-width: 600px) {
.modal-panel--wide {
width: 100vw;
height: 100vh;
border-radius: 0;
border: none;
}
.modal-header,
.modal-footer {
padding: var(--abstand-s, 0.6rem) var(--abstand-m);
}
.modal-panel--wide .modal-inhalt {
padding: var(--abstand-m);
}
.modal-header .modal-titel {
font-size: 1rem;
}
}
/* Inhaltsbereich ohne Text-Zentrierung, damit die Liste links-
bündig steht. */
.modal-inhalt--puzzle {
text-align: left;
}
/* Aufgabenstellung oben – kompakt. */
.p1-aufgabe {
margin: 0;
color: var(--farbe-text);
font-size: 0.9rem;
line-height: 1.35;
flex-shrink: 0;
}
/* -----------------------------------------------------------
3-Spalten-Layout: links 5 Drop-Zeilen (a,e,f,h,j),
Mitte das SVG der Bohrmaschine, rechts 5 Drop-Zeilen
(b,c,d,g,i). Die Buchstaben-Kreise im SVG korrespondieren
mit den Buchstaben der jeweiligen Drop-Spalte.
Der Layout-Block füllt die verfügbare Höhe des Modal-
Inhalts, so dass SVG-Höhe = Höhe der Drop-Spalten.
----------------------------------------------------------- */
.p1-layout {
display: flex;
justify-content: center;
align-items: flex-start;
width: 100%;
flex: 1 1 auto;
min-height: 0;
}
/* Patentbild-Container: relativ, damit die absolut positionierten
Drop-Felder anhand prozentualer Koordinaten exakt auf den im
Bild gezeichneten leeren Rechtecken sitzen. */
.p1-bildwrap {
position: relative;
width: 100%;
max-width: 720px; /* Lesbarkeit auf Desktop */
margin: 0 auto;
background-color: #FBF6E8; /* Pergament-Ton, falls Bild lädt */
border: 2px solid var(--farbe-rahmen);
border-radius: 6px;
overflow: hidden;
}
.p1-bild {
display: block;
width: 100%;
height: auto;
user-select: none;
-webkit-user-drag: none;
}
/* Drop-Feld als unsichtbares Overlay über dem Patentbild.
Position/Größe in % kommen per inline-style aus DROPZONE_POS. */
.p1-dropzone--overlay {
position: absolute;
box-sizing: border-box;
min-height: 0; /* basis-min-height aufheben */
padding: 0;
background-color: rgba(255, 200, 60, 0.08); /* sehr dezent gelblich */
border: 1.5px dashed rgba(139, 32, 39, 0.55);
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.p1-dropzone--overlay .p1-chip {
width: 100%;
height: 100%;
padding: 0 0.3rem;
font-size: 0.78rem;
line-height: 1;
border-radius: 3px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
/* Drop-Spalte: vertikale Liste von 5 Zeilen, gleichmäßig
über die komplette Spaltenhöhe verteilt. */
.p1-dropspalte {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0.4rem;
min-width: 0;
min-height: 0;
}
/* Einzelne Drop-Zeile: Buchstabe + Drop-Zone in einer Zeile.
Höhe ca. 40 px, damit fünf Zeilen bequem neben der SVG-Höhe
Platz finden. */
.p1-zeile {
display: flex;
align-items: center;
gap: 0.4rem;
min-height: 36px;
flex: 0 0 auto;
}
/* Links: [Drop-Zone] [Buchstabe] – der Buchstabe zeigt nach rechts zur SVG. */
.p1-zeile--links {
justify-content: flex-end;
}
.p1-zeile--links .p1-dropzone {
flex: 1 1 auto;
}
/* Rechts: [Buchstabe] [Drop-Zone] – der Buchstabe zeigt nach links zur SVG. */
.p1-zeile--rechts {
justify-content: flex-start;
}
.p1-zeile--rechts .p1-dropzone {
flex: 1 1 auto;
}
/* Mittlere Spalte: SVG der Standbohrmaschine. */
.p1-svgbox {
width: 100%;
max-width: 100%;
background-color: #FBF6E8; /* Pergament-Ton (wie SVG) */
border: 2px solid var(--farbe-rahmen);
border-radius: 6px;
padding: 0.3rem;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 0;
overflow: hidden;
}
/* SVG nimmt die Container-Höhe und skaliert proportional
(preserveAspectRatio xMidYMid meet ist SVG-Default). So
entsteht auf Desktop kein zusätzlicher Scroll. */
.p1-svgbox svg {
width: 100%;
height: 100%;
max-height: 100%;
display: block;
}
/* Buchstaben-Label (a), b) ...) neben der Drop-Zone. */
.p1-buchstabe {
font-family: Georgia, "Times New Roman", serif;
font-weight: bold;
font-size: 1.05rem;
color: var(--farbe-warnung);
min-width: 1.6rem;
text-align: center;
flex-shrink: 0;
}
/* Drop-Zone: mit gestricheltem Rand. Nimmt einen Chip als Kind
auf, bleibt optisch aber bis zur Prüfung neutral (kein Grün/
Rot beim bloßen Ablegen). */
.p1-dropzone {
min-height: 36px;
padding: 0.25rem 0.4rem;
border: 2px dashed var(--farbe-rahmen);
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.03);
color: var(--farbe-text);
font-size: 0.95rem;
line-height: 1.2;
display: flex;
align-items: center;
transition: background-color 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
/* Chip, der in einer Zone sitzt, füllt sie aus und bekommt
eine neutrale "gesetzt"-Optik (weder grün noch rot). */
.p1-dropzone .p1-chip {
width: 100%;
background-color: #4A4A4A;
border-color: #6A6A6A;
box-shadow: none;
}
/* Hover, wenn ein Chip über der Zone schwebt. */
.p1-dropzone--hover {
border-color: var(--farbe-warnung);
background-color: rgba(230, 57, 70, 0.12);
}
/* Richtig gefüllt – grün (nur nach erfolgreicher PRÜFUNG). */
.p1-dropzone--richtig {
border-style: solid;
border-color: var(--farbe-erfolg);
background-color: rgba(74, 222, 128, 0.12);
}
.p1-dropzone--richtig .p1-chip {
background-color: rgba(74, 222, 128, 0.2);
border-color: var(--farbe-erfolg);
color: var(--farbe-erfolg);
font-weight: bold;
}
/* Falsche Zuordnung – bleibt rot markiert (Scaffolding-Stufe 1,
nach >3 Fehlversuchen). Wird bei jeder Benutzeraktion wieder
entfernt (siehe entferneFehlerMarkierungen in puzzles.js). */
.p1-dropzone--falsch {
border-color: var(--farbe-warnung);
background-color: rgba(230, 57, 70, 0.15);
}
.p1-dropzone--falsch .p1-chip,
.p1-chip--falsch {
border-color: var(--farbe-warnung);
box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.35);
}
/* Begriffe-Leiste unter dem 3-Spalten-Bereich. */
.p1-pool-wrap {
margin-top: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
flex-shrink: 0;
}
/* Chip-Pool-Titel. */
.p1-pool-titel {
margin: 0;
font-size: 0.8rem;
color: var(--farbe-text-schwach, #BBB);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.p1-pool {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
min-height: 2.2rem;
padding: 0.35rem;
border: 1px solid var(--farbe-rahmen);
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.25);
}
/* Einzelner verschiebbarer Begriffs-Chip. */
.p1-chip {
padding: 0.25rem 0.6rem;
border-radius: 999px;
background-color: #3A3A3A;
border: 1px solid #555;
color: var(--farbe-text);
font-size: 0.85rem;
line-height: 1.2;
cursor: grab;
user-select: none;
touch-action: none; /* Pointer Events kontrollieren */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.p1-chip:hover {
transform: translateY(-1px);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}
/* Während des Ziehens – der Chip wird per position:fixed
von JS positioniert, deshalb hier nur Optik. */
.p1-chip--zieht {
cursor: grabbing;
opacity: 0.9;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6);
z-index: 10000;
}
/* Nach erfolgreicher Prüfung – Chip ist fest, nicht mehr zieh-/
tauschbar. */
.p1-chip--fixiert {
cursor: default;
}
/* Tastatur-Auswahl (Enter/Space auf Chip). */
.p1-chip--ausgewaehlt {
outline: 2px solid var(--farbe-warnung);
outline-offset: 2px;
}
/* Fokus-Stil für Tastatur-Navigation auf Zone. */
.p1-dropzone:focus {
outline: 2px solid var(--farbe-warnung);
outline-offset: 2px;
}
/* Footer-Kinder werden durch die gap-Regel des Footers
beabstandet – die Default-Top-Margins der einzelnen Blöcke
werden hier neutralisiert, damit keine doppelten Abstände
entstehen. */
.modal-footer > .p1-meldung,
.modal-footer > .p1-telefon,
.modal-footer > .p1-pruefen-zeile {
margin-top: 0;
}
/* -----------------------------------------------------------
Meldungs-Box unter dem Layout (Rückmeldung nach PRÜFEN).
Zeigt entweder die Anzahl falscher Zuordnungen (warn) oder
den Erfolg (erfolg). Standardmäßig unsichtbar.
----------------------------------------------------------- */
.p1-meldung {
margin-top: 1rem;
padding: 0.7rem 1rem;
border-radius: 4px;
font-size: 0.95rem;
text-align: center;
display: none;
}
.p1-meldung--sichtbar {
display: block;
}
.p1-meldung--warn {
border: 2px solid var(--farbe-warnung);
background-color: rgba(230, 57, 70, 0.15);
color: #F7B8BF;
}
.p1-meldung--erfolg {
border: 2px solid var(--farbe-erfolg);
background-color: rgba(74, 222, 128, 0.15);
color: var(--farbe-erfolg);
font-weight: bold;
}
/* -----------------------------------------------------------
Aktions-Zeile mit Hinweis-Text links und PRÜFEN-Button rechts.
----------------------------------------------------------- */
.p1-pruefen-zeile {
margin-top: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.p1-pruefen-hinweis {
font-size: 0.9rem;
color: var(--farbe-text);
flex: 1 1 auto;
}
.p1-pruefen-hinweis--warn {
color: #E6B800;
}
.p1-pruefen-btn {
padding: 0.6rem 1.2rem;
border: 2px solid var(--farbe-erfolg);
border-radius: 4px;
background-color: var(--farbe-erfolg);
color: #0B1A0F;
font-weight: bold;
font-size: 0.95rem;
letter-spacing: 0.03em;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.1s ease;
}
.p1-pruefen-btn:hover:not(:disabled) {
background-color: #6EE89A;
}
.p1-pruefen-btn:active:not(:disabled) {
transform: translateY(1px);
}
.p1-pruefen-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
background-color: #3A3A3A;
color: #AAA;
border-color: #555;
}
/* -----------------------------------------------------------
Telefon-Hilfe (Scaffolding-Stufe 2).
Erscheint erst nach 6 Fehlversuchen. Klick auf den Button
schaltet das Rätsel frei.
----------------------------------------------------------- */
.p1-telefon {
margin-top: 1rem;
padding: 0.9rem 1rem;
border: 2px solid var(--farbe-warnung);
border-radius: 4px;
background-color: rgba(230, 57, 70, 0.1);
color: var(--farbe-text);
text-align: center;
animation: p1-telefon-puls 1.4s ease-in-out infinite;
}
.p1-telefon--versteckt {
display: none;
animation: none;
}
.p1-telefon-titel {
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 0.3rem;
}
.p1-telefon-text {
font-size: 0.9rem;
margin-bottom: 0.7rem;
line-height: 1.4;
}
.p1-telefon-btn {
padding: 0.5rem 1rem;
border: 2px solid var(--farbe-warnung);
border-radius: 4px;
background-color: var(--farbe-warnung);
color: #FFF;
font-weight: bold;
cursor: pointer;
transition: background-color 0.15s ease;
}
.p1-telefon-btn:hover {
background-color: #C82A38;
}
@keyframes p1-telefon-puls {
0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.4); }
50% { box-shadow: 0 0 0 8px rgba(230, 57, 70, 0); }
}
/* ---- Mobile / schmale Bildschirme -------------------------
Unterhalb 720 px werden die drei Spalten gestapelt: oben die
linke Drop-Spalte, darunter die SVG, dann die rechte Drop-
Spalte. Scrollen ist ausdrücklich erlaubt, da das Modal auf
dem Handy randlos ist.
----------------------------------------------------------- */
@media (max-width: 720px) {
/* Inhaltsbereich darf auf Mobil scrollen und muss nicht die
Höhe aufteilen. */
.modal-panel--wide .modal-inhalt {
overflow-y: auto;
display: block;
}
.p1-layout {
grid-template-columns: 1fr;
flex: 0 0 auto;
}
.p1-dropspalte {
justify-content: flex-start;
}
.p1-svgbox {
overflow: visible;
}
.p1-svgbox svg {
height: auto;
max-height: 45vh;
}
/* Auf Mobilgeräten sollen in beiden Drop-Spalten die
Buchstaben der Lesbarkeit halber links stehen. */
.p1-zeile--links {
flex-direction: row-reverse;
justify-content: flex-end;
}
}
/* Barrierefreiheit: keine Chip-Hover-Animation bei reduzierter Bewegung. */
@media (prefers-reduced-motion: reduce) {
.p1-chip,
.p1-chip:hover,
.p1-dropzone {
transition: none;
}
.p1-dropzone--falsch,
.p1-chip--falsch {
animation: none;
border-color: var(--farbe-warnung);
}
.p1-telefon {
animation: none;
}
}
/* ===========================================================
RÄTSEL 2 – "Bohrertypen" (Werkbank-Szene)
-----------------------------------------------------------
Haupt-Bühne (.p2-buehne) simuliert eine Holz-Werkbank. Die
sechs Bohrer liegen lose auf der Fläche (absolute Position),
zwölf Sprechblasen-Notizen kleben drumherum.
Hinweis: Der Werkbank-Hintergrund ist ein reiner CSS-Gradient-
Platzhalter. Er kann später durch ein echtes Foto ersetzt
werden, indem hier der background-Wert auf
background: url('../assets/fotos/werkbank.jpg') center/cover no-repeat;
geändert wird. Die übrige Rätsel-Logik bleibt dadurch unberührt.
=========================================================== */
.p2-buehne {
position: relative;
width: 100%;
flex: 1 1 auto;
min-height: 0;
border: 2px solid #3A2A1A;
border-radius: 6px;
overflow: hidden;
box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.55); /* Vignette */
/* Hintergrund: echtes Foto der Werkbank mit den 5 Bohrer-
Gruppen (gleiches Bild wie in der Infotafel "Bohrertypen",
ohne eingebrannte Lupen). object-fit-Ersatz via
background-size:cover, damit alle Bohrer-Gruppen sichtbar
sind und die in JS hinterlegten Lupen-Koordinaten
(BOHRER_POSITIONEN) deckungsgleich liegen. Der dunkle
Fallback wirkt als Letterbox-Rand, falls das Seiten-
verhältnis nicht passt. */
background: url("../assets/werkbank-bohrer.png") center/cover no-repeat #1a1208;
}
/* Zusätzliche Vignette (Radial-Verlauf) an den Ecken. */
.p2-buehne::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(
ellipse at center,
transparent 55%,
rgba(0, 0, 0, 0.45) 100%);
}
/* -----------------------------------------------------------
Bohrer-Container – absolute Position auf der Bühne.
Drop-Zonen stapeln sich oben und unten um den Bohrer.
Die leichte Rotation kommt aus der CSS-Variable --bohrer-rot,
die JS pro Bohrer setzt.
----------------------------------------------------------- */
.p2-bohrer {
position: absolute;
transform: translate(-50%, -50%);
width: 180px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
z-index: 2;
}
.p2-bohrer-werk {
/* Die selbstgezeichneten SVG-Bohrer werden nicht mehr ange-
zeigt – das Werkbank-Foto liefert jetzt die echten Bohrer.
Der Container bleibt im DOM, damit Drop-Zonen-Logik und
Tastatur-Reihenfolge unverändert funktionieren. */
display: none;
}
.p2-bohrer-werk .p2-svg {
width: 100%;
height: auto;
max-height: 46px;
display: block;
}
/* Buchstaben-Marker (kleiner roter Kreis) am Bohrer. */
.p2-buchstabe {
position: absolute;
top: -6px;
right: 2px;
background-color: rgba(252, 246, 232, 0.92);
color: #8B2027;
border: 1.5px solid #8B2027;
border-radius: 50%;
width: 22px;
height: 22px;
font-family: Georgia, "Times New Roman", serif;
font-weight: bold;
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* -----------------------------------------------------------
Drop-Zonen – pro Bohrer zwei (oben = Bezeichnung,
unten = Funktion). Leer: dezenter Rahmen. Hover: gelber Glow.
----------------------------------------------------------- */
/* Drop-Zonen im selben Look wie in Rätsel 1: gestrichelter
warm-brauner Rahmen, dezent cremiger Hintergrund, „Hier
ablegen"-Platzhalter. Pro Bohrer gibt es weiterhin zwei
Zonen (Bezeichnung oben + Funktion unten); die Platzhalter
sind über pseudo-elemente unterscheidbar. */
.p2-dropzone {
min-width: 140px;
min-height: 30px;
padding: 4px 8px;
border: 2px dashed #6b4423;
border-radius: 3px;
background: rgba(255, 240, 200, 0.5);
color: rgba(107, 68, 35, 0.65);
font-family: Georgia, "Times New Roman", serif;
font-size: 13px;
letter-spacing: 0.05em;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color 0.15s ease,
border-style 0.15s ease,
background-color 0.15s ease,
box-shadow 0.15s ease;
}
/* Platzhalter im leeren Zustand. */
.p2-dropzone::before {
content: "Hier ablegen";
pointer-events: none;
}
.p2-dropzone-bez::before { content: "Begriff hier ablegen"; }
.p2-dropzone-fun::before { content: "Funktion hier ablegen"; }
/* Sobald eine Notiz in der Zone hängt, Platzhalter und Rahmen
zurückziehen – die Sprechblase trägt dann die Optik. */
.p2-dropzone:not(:empty) {
border: none;
background-color: transparent;
padding: 0;
}
.p2-dropzone:not(:empty)::before {
content: none;
}
.p2-dropzone-fun {
min-width: 180px; /* Funktions-Sätze sind länger */
}
.p2-dropzone--hover {
border-color: #8b4513;
border-style: solid;
background: rgba(255, 220, 150, 0.65);
box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.2);
}
.p2-dropzone--richtig {
box-shadow: 0 0 0 2px var(--farbe-erfolg),
0 0 14px rgba(74, 222, 128, 0.45);
border-radius: 18px;
}
.p2-dropzone--falsch {
box-shadow: 0 0 0 2px var(--farbe-warnung),
0 0 12px rgba(230, 57, 70, 0.45);
border-radius: 18px;
}
/* -----------------------------------------------------------
Sprechblasen (Chips).
.p2-chip-bez Bezeichnung – Warm-Gelb, fett, kurz
.p2-chip-fun Funktion – Creme-Weiß, normal, länger
Streu-Zustand: absolute Position auf der Bühne.
In-Zone-Zustand: füllt Zone + kleines Schwänzchen zum Bohrer.
----------------------------------------------------------- */
.p2-chip {
position: relative;
padding: 0.35rem 0.8rem;
font-size: 0.85rem;
line-height: 1.25;
border-radius: 18px;
border: 1.5px solid transparent;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45);
cursor: grab;
user-select: none;
touch-action: none;
transition: transform 0.12s ease, box-shadow 0.12s ease;
max-width: 220px;
text-align: center;
z-index: 3;
}
.p2-chip-bez {
background-color: #FFD166;
border-color: #B8871E;
color: #2A1A06;
font-weight: bold;
letter-spacing: 0.01em;
}
.p2-chip-fun {
background-color: #F1FAEE;
border-color: #4A5C4E;
color: #1A1A1A;
max-width: 260px;
}
.p2-chip:hover {
transform: scale(1.05);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.55);
}
/* Streu: absolute Position mit Center-Translate. */
.p2-chip--streu {
position: absolute;
transform: translate(-50%, -50%);
}
.p2-chip--streu:hover {
transform: translate(-50%, -50%) scale(1.05);
}
/* Wenn ein Chip in seiner Zone sitzt, füllt er sie aus und
bekommt ein diagonales "Schwänzchen" als Sprechblasen-Kanten. */
.p2-chip--in-zone {
transform: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
width: 100%;
}
.p2-chip--in-zone:hover {
transform: scale(1.02);
}
/* Schwänzchen via Pseudo-Element: kleines Quadrat, um 45° gedreht. */
.p2-chip--in-zone::after {
content: "";
position: absolute;
left: 50%;
width: 12px;
height: 12px;
transform: translateX(-50%) rotate(45deg);
z-index: -1;
}
/* Bezeichnung liegt über dem Bohrer → Schwänzchen zeigt nach unten. */
.p2-dropzone-bez > .p2-chip--in-zone::after {
bottom: -7px;
}
/* Funktion liegt unter dem Bohrer → Schwänzchen zeigt nach oben. */
.p2-dropzone-fun > .p2-chip--in-zone::after {
top: -7px;
}
/* Farbabgleich der Schwänzchen (jeweils wie die Chip-Basis). */
.p2-chip-bez.p2-chip--in-zone::after {
background-color: #FFD166;
border: 1.5px solid #B8871E;
}
.p2-chip-fun.p2-chip--in-zone::after {
background-color: #F1FAEE;
border: 1.5px solid #4A5C4E;
}
/* Während des Ziehens. */
.p2-chip--zieht {
cursor: grabbing;
transform: scale(1.1) !important;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.7);
z-index: 10000;
opacity: 0.97;
}
/* Einrast-Animation. */
@keyframes p2-einrasten {
0% { transform: scale(1.15); }
55% { transform: scale(0.94); }
100% { transform: scale(1); }
}
.p2-chip--einrasten {
animation: p2-einrasten 0.25s ease-out;
}
.p2-chip--fixiert {
cursor: default;
}
.p2-chip--fixiert:hover {
transform: none;
}
.p2-chip--ausgewaehlt {
outline: 3px solid var(--farbe-warnung);
outline-offset: 2px;
}
.p2-dropzone:focus {
outline: 2px solid var(--farbe-warnung);
outline-offset: 2px;
}
.p2-chip--falsch {
box-shadow: 0 0 0 2px var(--farbe-warnung),
0 0 10px rgba(230, 57, 70, 0.5);
border-color: var(--farbe-warnung) !important;
}
/* -----------------------------------------------------------
Responsive – Tablet (720–1199 px): Bohrer etwas schmaler,
Chips kompakter, Szene bleibt frei.
----------------------------------------------------------- */
@media (max-width: 1199px) and (min-width: 721px) {
.p2-bohrer {
width: 150px;
}
.p2-chip {
font-size: 0.78rem;
max-width: 180px;
padding: 0.3rem 0.6rem;
}
.p2-chip-fun {
max-width: 220px;
}
.p2-dropzone {
min-width: 120px;
}
.p2-dropzone-fun {
min-width: 160px;
}
}
/* -----------------------------------------------------------
Responsive – Smartphone (< 720 px):
Strukturierter Rückfall-Modus. Die freie Werkbank-Bühne wäre
auf kleinen Screens zu eng. Stattdessen stapeln wir Bohrer
vertikal, Sprechblasen landen in einer Flex-Wrap-Leiste.
----------------------------------------------------------- */
@media (max-width: 720px) {
.modal-panel--wide .modal-inhalt {
overflow-y: auto;
display: block;
}
.p2-buehne {
min-height: 120vh;
display: block;
padding: 0.5rem;
}
/* Bohrer wieder im Fluss. */
.p2-bohrer {
position: static;
transform: none !important;
width: 100%;
max-width: 360px;
margin: 0.8rem auto;
padding: 0.5rem;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
.p2-dropzone {
min-width: 80%;
}
/* Streu-Chips in einer flexiblen Leiste sammeln. */
.p2-chip--streu {
position: relative;
left: auto !important;
top: auto !important;
transform: none;
display: inline-flex;
margin: 0.25rem;
}
.p2-chip--streu:hover {
transform: scale(1.03);
}
}
/* -----------------------------------------------------------
Bewegungseinschränkung respektieren.
----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.p2-chip,
.p2-chip:hover,
.p2-dropzone,
.p2-chip--zieht {
transition: none;
animation: none !important;
}
.p2-chip--einrasten {
animation: none;
}
}
/* ===========================================================
WERKBANK-ZOOM (Info-Tafel 2)
-----------------------------------------------------------
Vollflächiges Werkbank-Foto im Info-Modal. Fünf pulsierende
Lupen-Buttons markieren Bohrer-Gruppen. Klick auf eine Lupe
zoomt die Bühne per CSS-Transform und blendet ein dunkles
Detail-Panel ein.
=========================================================== */
/* Body: Flex-Column. Oben die Stage (nimmt allen Platz), unten
ein dünner Tipp-Streifen mit der Einleitung. Kein eigener Header –
Titel und X-Button liefert bereits die Modal-Kopfzeile.
Wichtig: overflow hidden (nicht auto), kein Padding – sonst
greift die generische .info-panel-body-Scroll-/Lese-Breite. */
.info-panel-body--werkbank {
padding: 0;
position: relative;
overflow: hidden;
background-color: #2A2119; /* werkbank-holz-artiger Ton als Letterbox */
display: flex;
flex-direction: column;
}
/* Override: die generische Regel ".info-panel-body > *" begrenzt
Kinder auf 720 px Lese-Breite und zentriert sie. Für das
Werkbank-Layout würde das die Vollbild-Stage zerstören. Hier
heben wir Begrenzung und Auto-Margin wieder auf. */
.info-panel-body--werkbank > * {
max-width: none;
margin-left: 0;
margin-right: 0;
width: 100%;
}
/* --- Stage: Flex-Row mit linker Bildspalte und rechtem Detail-Panel.
In Phase 1 nimmt der Bildbereich die gesamte Breite ein, das
Detail-Panel hat flex-basis 0. In Phase 2 wechseln sie auf 65/35. */
.werkbank-stage {
flex: 1 1 auto;
min-height: 0;
position: relative;
display: flex;
flex-direction: row;
overflow: hidden;
}
/* --- Linke Spalte: zentriert die Bühne auf dunklem Grund.
Schrumpft sanft, wenn das Detail-Panel einblendet.
display:flex+center sorgt zusammen mit der aspect-ratio auf
.werkbank-buehne dafür, dass das Foto vollständig sichtbar
ist und keine Bohrer-Reihe abgeschnitten wird. */
.werkbank-bildbereich {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
background-color: #1a1208; /* Letterbox-Rand bei contain */
display: flex;
align-items: center;
justify-content: center;
transition: flex-basis 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* --- Zoom-Bühne: trägt das Bildverhältnis (1672 × 941) selbst,
damit Lupen- und Zoom-Koordinaten 1:1 auf das tatsächliche
Bild fallen – kein Beschnitt, kein Versatz. max-width/-height
100 % schmiegen die Bühne an den verfügbaren Bildbereich an,
das Letterbox-Drumherum füllt .werkbank-bildbereich.
transform-origin bleibt zentriert; die Zoom-Logik schiebt den
Fokuspunkt per translate in die Mitte (siehe infoContent.js). */
.werkbank-buehne {
position: relative;
aspect-ratio: 1672 / 941;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
transform-origin: 50% 50%;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.werkbank-bild {
display: block;
width: 100%;
height: 100%;
object-fit: contain; /* nichts mehr abschneiden */
user-select: none;
-webkit-user-drag: none;
}
/* --- Lupen-Schicht --- */
.werkbank-lupen {
position: absolute;
inset: 0;
pointer-events: none;
}
/* --- Einzelner Lupen-Button --- */
.werkbank-lupe {
position: absolute;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px; /* Zentrum sitzt auf x/y */
border: none;
border-radius: 50%;
background-color: rgba(251, 191, 36, 0.85);
color: #1A1A1A;
box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.25),
0 4px 14px rgba(0, 0, 0, 0.35);
cursor: pointer;
pointer-events: auto;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: transform 0.2s ease,
box-shadow 0.2s ease,
opacity 0.3s ease;
animation: werkbank-lupe-puls 2s ease-in-out infinite;
}
.werkbank-lupe-svg {
width: 32px;
height: 32px;
display: block;
}
.werkbank-lupe:hover,
.werkbank-lupe:focus-visible {
transform: scale(1.25);
background-color: #FBBF24;
box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.4),
0 6px 18px rgba(0, 0, 0, 0.45);
outline: none;
animation-play-state: paused;
}
@keyframes werkbank-lupe-puls {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.25),
0 4px 14px rgba(0, 0, 0, 0.35);
}
50% {
transform: scale(1.15);
box-shadow: 0 0 0 10px rgba(251, 191, 36, 0),
0 6px 18px rgba(0, 0, 0, 0.45);
}
}
/* Im Zoom-Modus: Lupen ausblenden. */
.info-panel-body--werkbank.werkbank-layout--gezoomt .werkbank-lupen {
opacity: 0;
pointer-events: none;
}
/* --- Detail-Panel (rechte Spalte, Phase 2) ---
Im Ruhezustand flex-basis 0 + unsichtbar. Beim Einblenden
wächst die Spalte auf 35 % und der Inhalt slidet von rechts ein. */
.werkbank-detail {
flex: 0 0 0;
min-width: 0;
width: 0;
overflow: hidden;
background-color: rgba(26, 26, 26, 0.95);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #F5F5F5;
border-left: 1px solid rgba(14, 124, 134, 0.5);
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.45);
opacity: 0;
transform: translateX(20px);
transition: flex-basis 0.6s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.4s ease,
transform 0.4s ease;
display: flex;
flex-direction: column;
}
.werkbank-detail--sichtbar {
flex: 0 0 35%;
width: auto;
opacity: 1;
transform: translateX(0);
}
/* Innerer scrollbarer Bereich. Nur dieser scrollt bei langem Text. */
.werkbank-detail-inhalt {
flex: 1 1 auto;
overflow-y: auto;
padding: 24px 24px 16px 24px;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.werkbank-detail-titel {
margin: 0;
font-family: var(--i1-sans, "Inter", "Segoe UI", sans-serif);
font-weight: 700;
font-size: 1.6rem;
line-height: 1.15;
color: #0E7C86; /* Petrol-Akzent */
}
.werkbank-detail-merkmal {
margin: 0;
font-style: italic;
font-size: 0.95rem;
color: #D6D6D6;
line-height: 1.4;
}
.werkbank-detail-trenner {
height: 1px;
background-color: rgba(255, 255, 255, 0.12);
margin: 0.3rem 0;
}
.werkbank-detail-text {
margin: 0;
font-family: Georgia, "Times New Roman", serif;
font-size: 1rem;
line-height: 1.6;
color: #F0F0F0;
}
/* Zurück-Button: am unteren Panel-Rand, Petrol-Umrandung, weißer Text. */
.werkbank-zurueck-btn {
flex: 0 0 auto;
margin: 0 24px 20px 24px;
padding: 0.7rem 1rem;
background-color: transparent;
color: #FFFFFF;
border: 1.5px solid #0E7C86;
border-radius: 6px;
font-family: var(--i1-sans, "Inter", "Segoe UI", sans-serif);
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.werkbank-zurueck-btn:hover,
.werkbank-zurueck-btn:focus-visible {
background-color: #0E7C86;
border-color: #0E7C86;
outline: none;
}
/* --- Fuß-Streifen mit Einleitungstext (Hinweis unter dem Bild) --- */
.werkbank-intro {
flex: 0 0 auto;
min-height: 34px;
padding: 8px clamp(1rem, 3vw, 2rem);
background-color: #141414;
color: #C8C8C8;
font-family: Georgia, "Times New Roman", serif;
font-size: 0.85rem;
line-height: 1.35;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
}
/* ------ Tablet (900–1199 px): 60/40-Split ------ */
@media (max-width: 1199px) and (min-width: 900px) {
.werkbank-detail--sichtbar { flex: 0 0 40%; }
.werkbank-detail-titel { font-size: 1.45rem; }
.werkbank-lupe {
width: 54px;
height: 54px;
margin: -27px 0 0 -27px;
}
.werkbank-lupe-svg { width: 28px; height: 28px; }
}
/* ------ Schmal (< 900 px): Panel überlagert unteres Drittel des Bildes.
Bildbereich bleibt 100 % breit, Panel wird absolut positioniert
und slidet von unten herein. ------ */
@media (max-width: 899px) {
.werkbank-detail {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: auto;
flex: none;
height: 0;
transform: translateY(20px);
border-left: none;
border-top: 1px solid rgba(14, 124, 134, 0.5);
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.35s ease,
transform 0.35s ease;
}
.werkbank-detail--sichtbar {
flex: none;
width: auto;
height: 34%;
transform: translateY(0);
}
}
/* ------ Smartphone (< 720 px): Panel füllt unteres 50 % ------ */
@media (max-width: 719px) {
.werkbank-detail--sichtbar { height: 50%; }
.werkbank-intro {
font-size: 0.78rem;
min-height: 30px;
padding: 6px 0.75rem;
}
/* Größere Lupen für Tappbarkeit. */
.werkbank-lupe {
width: 64px;
height: 64px;
margin: -32px 0 0 -32px;
}
.werkbank-lupe-svg { width: 34px; height: 34px; }
.werkbank-detail-titel { font-size: 1.35rem; }
.werkbank-detail-text { font-size: 0.95rem; }
.werkbank-detail-inhalt { padding: 18px 18px 12px 18px; }
.werkbank-zurueck-btn { margin: 0 18px 16px 18px; }
}
/* Bewegungsreduktion: keine Slide-/Scale-Animationen, nur Fade. */
@media (prefers-reduced-motion: reduce) {
.werkbank-buehne,
.werkbank-bildbereich,
.werkbank-detail {
transition: opacity 0.2s ease;
}
.werkbank-lupe { animation: none; }
}
/* ===========================================================
BETRIEBSANWEISUNG (Info-Tafel 3)
-----------------------------------------------------------
Gegliederte Lese-Seite mit gelben Abschnitts-Bändern,
Stichpunktlisten, rot hervorgehobenen Warnhinweisen
("NICHT") und einer auffälligen Notruf-Box am Ende von
"Erste Hilfe" – optisch angelehnt an den Papier-Aushang.
Greift die generische Lese-Breite der .info-panel-body an
(.info-panel-body > * max-width 720 px) bewusst NICHT an –
für gute Lesbarkeit des Fließtextes.
=========================================================== */
.info-panel-body--ba {
/* Erbt Padding/Scroll von .info-panel-body. Eigene Farbwelt
ist gedämpftes Warngelb-Grau, passt zu einem Aushang. */
color: #1A1A1A;
}
/* Untertitel (Freigabe-/Herkunftshinweis direkt unter dem Titel). */
.info-panel-body--ba .ba-untertitel {
margin: 0 0 1.2rem 0;
font-family: var(--i1-sans, "Inter", "Segoe UI", sans-serif);
font-size: 0.85rem;
font-style: italic;
color: #555555;
letter-spacing: 0.01em;
}
/* Ein Abschnitt = Titelband + Liste (+ ggf. Notruf-Box). */
.info-panel-body--ba .ba-abschnitt {
margin: 0 0 1.4rem 0;
border: 1px solid #E6D89B;
border-radius: 6px;
background-color: #FFFDF5;
overflow: hidden; /* damit Titelband-Eckradius greift */
}
/* Gelbes Warnband als Abschnittsüberschrift. Kontrast zu
schwarzem Text laut WCAG weit über 4,5:1. */
.info-panel-body--ba .ba-abschnitt-titel {
margin: 0;
padding: 0.55rem 1rem;
background-color: #FDE68A;
color: #1A1A1A;
font-family: var(--i1-sans, "Inter", "Segoe UI", sans-serif);
font-weight: 700;
font-size: 1.02rem;
letter-spacing: 0.01em;
border-bottom: 1px solid #E6D89B;
}
/* Stichpunktliste. */
.info-panel-body--ba .ba-liste {
margin: 0;
padding: 0.8rem 1rem 0.9rem 2.2rem;
list-style-type: disc;
}
.info-panel-body--ba .ba-liste li {
font-family: var(--i1-sans, "Inter", "Segoe UI", sans-serif);
font-size: 0.98rem;
line-height: 1.55;
color: #1F1F1F;
margin-bottom: 0.35rem;
}
.info-panel-body--ba .ba-liste li:last-child {
margin-bottom: 0;
}
/* Rot-fett hervorgehobenes "NICHT" (Handschuhverbot etc.). */
.info-panel-body--ba .ba-warn-rot {
color: #C0272B;
font-weight: 800;
letter-spacing: 0.02em;
}
/* --- Notruf-Box am Ende von "Erste Hilfe" --- */
.info-panel-body--ba .ba-notruf {
margin: 0.2rem 1rem 1rem 1rem;
padding: 0.85rem 1rem;
background-color: #C0272B;
color: #FFFFFF;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
text-align: center;
}
.info-panel-body--ba .ba-notruf-titel {
font-family: var(--i1-sans, "Inter", "Segoe UI", sans-serif);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.35rem;
}
.info-panel-body--ba .ba-notruf-nummern {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
gap: 0.6rem;
font-family: var(--i1-sans, "Inter", "Segoe UI", sans-serif);
}
.info-panel-body--ba .ba-notruf-nummer {
display: inline-flex;
flex-direction: column;
align-items: center;
line-height: 1.15;
}
.info-panel-body--ba .ba-notruf-label {
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.92;
}
.info-panel-body--ba .ba-notruf-wert {
font-size: 1.7rem;
font-weight: 800;
letter-spacing: 0.03em;
}
.info-panel-body--ba .ba-notruf-trenner {
font-size: 1.4rem;
opacity: 0.6;
align-self: center;
}
/* --- Kleinere Geräte: Schriftgrößen + Innenabstände reduzieren --- */
@media (max-width: 720px) {
.info-panel-body--ba .ba-abschnitt-titel { font-size: 0.96rem; }
.info-panel-body--ba .ba-liste {
padding: 0.7rem 0.8rem 0.8rem 1.8rem;
}
.info-panel-body--ba .ba-liste li { font-size: 0.93rem; }
.info-panel-body--ba .ba-notruf-wert { font-size: 1.4rem; }
}
/* ============================================================
Zoom-to-Wall – Vignette und Schließen-Button
------------------------------------------------------------
Wird eingeblendet, während die Kamera zu einem Wandaushang
gezoomt ist (aktuell nur für Infotafel 3 vorgesehen, noch
nicht aktiv). Das Panorama selbst bleibt im Hintergrund,
über ihm liegt eine dezente radiale Vignette.
============================================================ */
.zoom-to-wall-vignette {
position: fixed;
inset: 0;
/* pointer-events wird in activateZoomToWall auf auto gesetzt,
damit Klicks auf den dunklen Rand die Ansicht schließen. */
background: radial-gradient(ellipse at center,
rgba(0, 0, 0, 0) 55%,
rgba(0, 0, 0, 0.55) 100%);
opacity: 0;
transition: opacity 0.3s ease-out;
z-index: 1500;
cursor: pointer;
}
.zoom-to-wall-vignette--sichtbar { opacity: 1; }
.zoom-to-wall-close {
position: fixed;
top: 14px;
right: 14px;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: rgba(30, 30, 30, 0.85);
color: #fff;
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease-out, transform 0.15s ease-out,
background 0.15s ease-out;
z-index: 1600;
}
.zoom-to-wall-close--sichtbar { opacity: 1; }
.zoom-to-wall-close:hover,
.zoom-to-wall-close:focus-visible {
background: rgba(70, 70, 70, 0.95);
transform: scale(1.08);
outline: none;
}
@media (prefers-reduced-motion: reduce) {
.zoom-to-wall-vignette,
.zoom-to-wall-close { transition: opacity 0.1s linear; }
}
/* ============================================================
Betriebsanweisung als "an-der-Wand-hängendes" Panorama-Plakat
------------------------------------------------------------
Wird von Infotafel 3 (type: zoom-to-wall, enabled:true) in
infoTafelErstellen gerendert. Klick öffnet Zoom-to-Wall.
============================================================ */
.ba-wand-rahmen {
position: relative;
width: 50px !important; /* feste Bildschirmgröße */
cursor: pointer;
border: 2px solid #1a1a1a;
background: #fff;
animation: infotafel-pulse-gelb 1s ease-in-out infinite;
}
.ba-wand-rahmen:hover,
.ba-wand-rahmen:focus-visible {
/* Kein scale() – Größe bleibt konstant, nur Glow zeigt Hover. */
box-shadow: 0 0 60px rgba(255, 200, 60, 1.0);
outline: none;
}
@keyframes infotafel-pulse-gelb {
0% { box-shadow: 0 0 15px rgba(255, 200, 60, 0.5); }
50% { box-shadow: 0 0 50px rgba(255, 200, 60, 1.0); }
100% { box-shadow: 0 0 15px rgba(255, 200, 60, 0.5); }
}
.ba-wand-bild {
display: block;
width: 100%;
height: auto;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
.ba-wand-lupe {
position: absolute;
top: 4px;
right: 4px;
width: 24px;
height: 24px;
background: rgba(0, 0, 0, 0.72);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
/* ============================================================
Zoom-to-Wall – scharfes Overlay-Plakat
------------------------------------------------------------
Wird am Ende der Kamerafahrt über die Vignette gelegt, damit
der Aushang pixelscharf lesbar ist (Panorama-Textur würde
bei hFov 30 sichtbar weichgezeichnet wirken).
============================================================ */
.zoom-to-wall-bild {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 90vh;
max-width: 92vw;
width: auto;
height: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
opacity: 0;
transition: opacity 0.2s ease-out;
z-index: 1550;
pointer-events: none; /* Klicks gehen an Vignette (schließt) */
user-select: none;
}
.zoom-to-wall-bild--sichtbar { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.zoom-to-wall-bild { transition: opacity 0.1s linear; }
}
/* ============================================================
Rätsel 3 – Persönliche Schutzausrüstung (binäre Sortierung)
------------------------------------------------------------
10 Items werden per Drag-and-Drop in den Spind (links, ablegen)
oder an die Maschine (rechts, tragen) sortiert.
============================================================ */
.p3-aufgabe {
margin: 0 0 0.9rem;
color: #E5E5E5;
line-height: 1.5;
font-size: 0.98rem;
}
/* --- 3-Spalten-Layout: Spind | Pool | Maschine --- */
.p3-layout {
display: grid;
grid-template-columns: minmax(210px, 1fr) minmax(240px, 1.2fr) minmax(210px, 1fr);
gap: 1rem;
align-items: stretch;
}
/* --- Drop-Zonen-Spalte (Spind oder Maschine) --- */
.p3-dropzone {
display: flex;
flex-direction: column;
gap: 0.55rem;
padding: 0.7rem;
background: rgba(255, 255, 255, 0.03);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
transition: border-color 0.15s ease-out, background 0.15s ease-out;
}
.p3-dropzone--links { border-color: rgba(120, 160, 200, 0.35); background: rgba(120, 160, 200, 0.06); }
.p3-dropzone--rechts { border-color: rgba(200, 160, 110, 0.35); background: rgba(200, 160, 110, 0.06); }
.p3-dropzone--hover {
border-color: #FCD34D;
background: rgba(252, 211, 77, 0.15);
}
.p3-dropzone--falsch {
border-color: #F59E0B;
background: rgba(245, 158, 11, 0.14);
}
.p3-dropzone--richtig {
border-color: #4ADE80;
background: rgba(74, 222, 128, 0.12);
}
.p3-dropzone-kopf { text-align: center; }
.p3-dropzone-titel {
color: #FCD34D;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 0.88rem;
}
.p3-dropzone-unter {
color: #B0B0B0;
font-size: 0.76rem;
margin-top: 0.1rem;
}
.p3-zone-bild {
display: flex;
align-items: center;
justify-content: center;
padding: 0.25rem 0;
}
.p3-zone-svg {
width: 100%;
max-width: 150px;
height: auto;
display: block;
}
.p3-dropzone-ablage {
flex: 1;
min-height: 140px;
padding: 0.4rem;
border: 2px dashed rgba(252, 211, 77, 0.35);
border-radius: 8px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 0.35rem;
transition: border-color 0.15s ease-out, background 0.15s ease-out;
}
/* --- Pool (Mitte) --- */
.p3-pool-wrap {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.7rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
}
.p3-pool-titel {
color: #FCD34D;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 0.82rem;
text-align: center;
}
.p3-pool {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
min-height: 140px;
padding: 0.3rem;
border-radius: 6px;
transition: background 0.15s ease-out;
}
.p3-pool--hover {
background: rgba(252, 211, 77, 0.1);
outline: 2px dashed rgba(252, 211, 77, 0.5);
outline-offset: -4px;
}
/* --- Chip (Ausrüstungs-Karte) --- */
.p3-chip {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.2rem;
padding: 0.55rem 0.4rem;
min-height: 72px;
background: #FBF6E8;
color: #1A0E06;
border: 2px solid #1A0E06;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
cursor: grab;
user-select: none;
font-size: 0.82rem;
line-height: 1.2;
text-align: center;
touch-action: none;
transition: transform 0.1s ease-out, box-shadow 0.1s ease-out,
border-color 0.15s ease-out, background 0.15s ease-out;
}
.p3-chip:hover { transform: translateY(-1px); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5); }
.p3-chip:active,
.p3-chip--zieht { cursor: grabbing; }
.p3-chip--zieht { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6); opacity: 0.92; }
.p3-chip--ausgewaehlt { outline: 3px solid #FCD34D; outline-offset: 2px; }
.p3-chip--falsch { border-color: #F59E0B; background: #FEF3C7; }
.p3-chip--fixiert { cursor: default; border-color: #4ADE80; }
.p3-chip-icon { font-size: 1.6rem; line-height: 1; }
.p3-chip-label { font-weight: 600; }
/* --- Hilfe-Box (unter dem Layout) --- */
.p3-hilfe {
margin-top: 0.8rem;
padding: 0.6rem 0.75rem;
background: rgba(252, 211, 77, 0.08);
border: 1px solid rgba(252, 211, 77, 0.3);
border-radius: 6px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.p3-hilfe-titel { font-weight: 700; color: #FCD34D; font-size: 0.88rem; }
.p3-hilfe-text { color: #E5E5E5; font-size: 0.85rem; flex: 1 1 200px; }
.p3-ba-btn {
padding: 0.5rem 0.8rem;
background: #FCD34D;
color: #1A0E06;
border: 2px solid #1A0E06;
border-radius: 6px;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
transition: background 0.15s ease-out, transform 0.1s ease-out;
}
.p3-ba-btn:hover { background: #FBBF24; transform: translateY(-1px); }
.p3-ba-btn:focus-visible { outline: 3px solid #FBBF24; outline-offset: 2px; }
.p3-ba-btn--tipp { font-size: 0.82rem; padding: 0.4rem 0.6rem; }
/* --- Tipp-Box (nach 3 Fehlversuchen) --- */
.p3-tipp {
margin-top: 0.7rem;
padding: 0.6rem 0.75rem;
background: rgba(252, 211, 77, 0.1);
border: 1px solid rgba(252, 211, 77, 0.35);
border-radius: 6px;
}
.p3-tipp--versteckt { display: none; }
.p3-tipp-titel { font-weight: 700; color: #FCD34D; margin-bottom: 0.2rem; }
.p3-tipp-text { font-size: 0.85rem; color: #E5E5E5; line-height: 1.4; margin-bottom: 0.5rem; }
/* --- Feedback-Bereich --- */
.p3-feedback { margin-top: 0.7rem; }
.p3-feedback-head {
font-weight: 700;
color: #FCD34D;
margin: 0 0 0.35rem;
font-size: 0.88rem;
}
.p3-feedback-absatz {
margin: 0 0 0.45rem;
padding: 0.4rem 0.55rem;
background: rgba(255, 255, 255, 0.04);
border-left: 3px solid #888;
font-size: 0.82rem;
line-height: 1.42;
color: #E5E5E5;
}
.p3-feedback-absatz--warn {
background: rgba(245, 158, 11, 0.08);
border-left-color: #F59E0B;
}
/* --- Responsiv: unter 800 px stapeln (Spind oben, Pool Mitte, Maschine unten) --- */
@media (max-width: 800px) {
.p3-layout { grid-template-columns: 1fr; }
.p3-pool { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p3-zone-svg { max-width: 120px; }
.p3-dropzone-ablage { min-height: 90px; }
}
@media (max-width: 480px) {
.p3-pool { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p3-chip { font-size: 0.75rem; min-height: 64px; }
.p3-chip-icon { font-size: 1.3rem; }
}
/* ============================================================
Rätsel 4 – Handhabung und Sicherheit (Szenario-Multiple-Choice)
------------------------------------------------------------
6 Szenen eines sicheren Bohrvorgangs. Pro Szene Situations-
text + 4 Antwort-Buttons. Richtig → grüner Rahmen + Weiter.
Falsch → roter Rahmen + BA-Zitat + Unfall-Konsequenz.
============================================================ */
/* --- Intro-Screen --- */
.p4-intro {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 1.5rem 0.5rem;
text-align: center;
}
.p4-intro-titel {
margin: 0;
color: #E63946;
font-size: 1.1rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.p4-intro-text {
margin: 0;
max-width: 520px;
color: #E5E5E5;
font-size: 1rem;
line-height: 1.55;
}
.p4-intro-btn {
margin-top: 0.6rem;
padding: 0.75rem 1.4rem;
background: #4ADE80;
color: #0A1F0F;
border: 2px solid #0A1F0F;
border-radius: 6px;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.05em;
cursor: pointer;
transition: background 0.15s ease-out, transform 0.1s ease-out;
}
.p4-intro-btn:hover { background: #22C55E; transform: translateY(-1px); }
.p4-intro-btn:focus-visible { outline: 3px solid #FCD34D; outline-offset: 2px; }
/* --- Fortschrittsanzeige --- */
.p4-fortschritt {
margin-bottom: 0.9rem;
}
.p4-fortschritt-label {
color: #FCD34D;
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 0.35rem;
}
.p4-balken {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 4px;
}
.p4-balken-seg {
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.1);
transition: background 0.25s ease-out;
}
.p4-balken-seg--aktiv { background: #FCD34D; }
.p4-balken-seg--fertig { background: #4ADE80; }
/* --- Situations-Block --- */
.p4-situation {
display: flex;
gap: 0.8rem;
align-items: flex-start;
padding: 0.85rem 1rem;
margin-bottom: 0.9rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-left: 4px solid #FCD34D;
border-radius: 6px;
}
.p4-szene-icon {
font-size: 2rem;
line-height: 1;
flex: 0 0 auto;
}
.p4-situation-text {
margin: 0;
color: #E5E5E5;
font-size: 1rem;
line-height: 1.55;
}
/* --- Antwort-Optionen --- */
.p4-optionen {
display: flex;
flex-direction: column;
gap: 0.55rem;
margin-bottom: 0.8rem;
}
.p4-option {
display: flex;
align-items: center;
gap: 0.7rem;
width: 100%;
min-height: 52px;
padding: 0.75rem 1rem;
background: #2A2A2A;
color: #E5E5E5;
border: 2px solid #3A3A3A;
border-radius: 6px;
font-size: 0.95rem;
line-height: 1.35;
text-align: left;
cursor: pointer;
transition: background 0.15s ease-out, border-color 0.15s ease-out,
transform 0.1s ease-out;
}
.p4-option:hover {
background: #353535;
border-color: #FCD34D;
transform: translateY(-1px);
}
.p4-option:focus-visible {
outline: 3px solid #FCD34D;
outline-offset: 2px;
}
.p4-option:disabled { cursor: default; transform: none; }
.p4-option-nummer {
flex: 0 0 auto;
min-width: 1.5rem;
font-weight: 700;
color: #FCD34D;
font-family: "Courier New", monospace;
}
.p4-option-text { flex: 1; }
.p4-option--richtig {
background: rgba(74, 222, 128, 0.18);
border-color: #4ADE80;
color: #F0FFF4;
}
.p4-option--richtig:hover { background: rgba(74, 222, 128, 0.18); border-color: #4ADE80; }
.p4-option--falsch {
background: rgba(230, 57, 70, 0.22);
border-color: #E63946;
color: #FFE5E8;
}
.p4-option--falsch:hover { background: rgba(230, 57, 70, 0.22); border-color: #E63946; }
.p4-option--inaktiv { opacity: 0.45; }
/* --- Feedback-Box --- */
.p4-feedback {
margin-bottom: 0.8rem;
padding: 0.9rem 1rem;
border-radius: 6px;
border: 2px solid transparent;
background: rgba(255, 255, 255, 0.03);
}
.p4-feedback--versteckt { display: none; }
.p4-feedback--richtig {
background: rgba(74, 222, 128, 0.12);
border-color: #4ADE80;
}
.p4-feedback--falsch {
background: rgba(230, 57, 70, 0.12);
border-color: #E63946;
}
.p4-feedback-titel {
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.p4-feedback--richtig .p4-feedback-titel { color: #4ADE80; }
.p4-feedback--falsch .p4-feedback-titel { color: #E63946; }
.p4-feedback-text {
margin: 0 0 0.7rem;
color: #E5E5E5;
font-size: 0.92rem;
line-height: 1.5;
}
.p4-feedback-zitat {
margin: 0 0 0.7rem;
padding: 0.55rem 0.7rem;
background: rgba(0, 0, 0, 0.3);
border-left: 3px solid #FCD34D;
font-family: "Courier New", monospace;
font-size: 0.88rem;
line-height: 1.5;
color: #FCD34D;
}
.p4-feedback-zitat strong { color: #FBBF24; }
.p4-weiter-btn {
padding: 0.55rem 1.1rem;
background: #FCD34D;
color: #1A0E06;
border: 2px solid #1A0E06;
border-radius: 6px;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.15s ease-out, transform 0.1s ease-out;
}
.p4-weiter-btn:hover { background: #FBBF24; transform: translateY(-1px); }
.p4-weiter-btn:focus-visible { outline: 3px solid #FBBF24; outline-offset: 2px; }
.p4-feedback--richtig .p4-weiter-btn {
background: #4ADE80;
color: #0A1F0F;
}
.p4-feedback--richtig .p4-weiter-btn:hover { background: #22C55E; }
/* --- Hilfsbereich (BA-Button, Tipp, Telefon) --- */
.p4-hilfe {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.p4-ba-btn {
align-self: flex-start;
padding: 0.4rem 0.75rem;
background: transparent;
color: #FCD34D;
border: 1px dashed #FCD34D;
border-radius: 6px;
font-size: 0.82rem;
cursor: pointer;
transition: background 0.15s ease-out;
}
.p4-ba-btn:hover { background: rgba(252, 211, 77, 0.12); }
.p4-ba-btn:focus-visible { outline: 2px solid #FCD34D; outline-offset: 2px; }
.p4-ba-btn--versteckt { display: none; }
.p4-tipp {
padding: 0.5rem 0.7rem;
background: rgba(252, 211, 77, 0.08);
border: 1px solid rgba(252, 211, 77, 0.3);
border-radius: 6px;
color: #FCD34D;
font-size: 0.85rem;
}
.p4-tipp--versteckt { display: none; }
.p4-telefon {
padding: 0.7rem 0.85rem;
background: rgba(230, 57, 70, 0.1);
border: 1px solid #E63946;
border-radius: 6px;
}
.p4-telefon--versteckt { display: none; }
.p4-telefon-titel { font-weight: 700; color: #E63946; margin-bottom: 0.2rem; }
.p4-telefon-text { font-size: 0.85rem; color: #E5E5E5; line-height: 1.4; margin-bottom: 0.5rem; }
.p4-telefon-btn {
padding: 0.45rem 0.8rem;
background: #E63946;
color: #FFFFFF;
border: 2px solid #1A0E06;
border-radius: 6px;
font-weight: 700;
font-size: 0.82rem;
cursor: pointer;
}
.p4-telefon-btn:hover { background: #C1121F; }
/* --- Erfolgs-Screen --- */
.p4-erfolg {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
padding: 1.8rem 0.5rem;
text-align: center;
}
.p4-erfolg-check {
width: 64px;
height: 64px;
border-radius: 50%;
background: #4ADE80;
color: #0A1F0F;
font-size: 2.3rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 28px rgba(74, 222, 128, 0.45);
}
.p4-erfolg-titel {
margin: 0;
color: #4ADE80;
font-size: 1.15rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.p4-erfolg-text {
margin: 0;
max-width: 520px;
color: #E5E5E5;
font-size: 1rem;
line-height: 1.5;
}
/* --- Responsiv --- */
@media (max-width: 640px) {
.p4-option { font-size: 0.88rem; padding: 0.65rem 0.8rem; min-height: 48px; }
.p4-situation-text { font-size: 0.95rem; }
.p4-szene-icon { font-size: 1.6rem; }
}
.p4-intro-hinweis {
margin: 0;
max-width: 520px;
color: #FCD34D;
font-size: 0.9rem;
font-style: italic;
line-height: 1.45;
}
/* ============================================================
Infotafel 4 – Video-Hotspot als "Bildschirm an der Wand"
Mit Play-Overlay und dezentem Schatten.
============================================================ */
/* Goldenes Play-Icon auf dem Computer-Bildschirm im Panorama,
mit dezentem unterstützendem Glow. Klick öffnet das Tutorial-
Modal (openVideoInfotafel). */
.video-wand-rahmen {
position: relative;
width: 80px !important;
height: 80px !important;
background: transparent;
border: none;
border-radius: 50%;
cursor: pointer;
animation: play-icon-pulse 1s ease-in-out infinite;
/* Mittelpunkt des Icons auf den yaw/pitch-Anker setzen,
damit es exakt mittig auf dem Computer-Bildschirm sitzt
(Pannellum platziert sonst die obere linke Ecke). */
transform: translate(-50%, -50%) !important;
}
.video-wand-rahmen:hover,
.video-wand-rahmen:focus-visible {
/* Hover ohne Größenänderung – nur etwas kräftigerer Glow. */
box-shadow: 0 0 50px rgba(255, 200, 60, 1.0),
0 0 80px rgba(255, 180, 40, 0.85);
outline: none;
}
.video-wand-icon {
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
@keyframes play-icon-pulse {
0% { box-shadow: 0 0 15px rgba(255, 200, 60, 0.5),
0 0 30px rgba(255, 180, 40, 0.4); }
50% { box-shadow: 0 0 40px rgba(255, 200, 60, 1.0),
0 0 70px rgba(255, 180, 40, 0.7); }
100% { box-shadow: 0 0 15px rgba(255, 200, 60, 0.5),
0 0 30px rgba(255, 180, 40, 0.4); }
}
/* ============================================================
Video-Modal (Infotafel 4)
============================================================ */
.video-modal {
position: fixed;
inset: 0;
z-index: 5000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(0, 0, 0, 0.75);
animation: videoModalFade 0.18s ease-out;
}
@keyframes videoModalFade {
from { opacity: 0; }
to { opacity: 1; }
}
.video-modal-panel {
position: relative;
width: 100%;
max-width: 820px;
background: #1A1A1A;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
overflow: hidden;
display: flex;
flex-direction: column;
}
.video-modal-header {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.9rem 1rem 0.7rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.video-modal-titel-box { flex: 1; min-width: 0; }
.video-modal-titel {
margin: 0;
color: #FCD34D;
font-size: 1.05rem;
line-height: 1.3;
letter-spacing: 0.02em;
}
.video-modal-attribution {
margin: 0.2rem 0 0;
color: #B0B0B0;
font-size: 0.78rem;
font-style: italic;
line-height: 1.35;
}
.video-modal-x {
flex: 0 0 auto;
width: 32px;
height: 32px;
background: transparent;
color: #E5E5E5;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background 0.15s ease-out, color 0.15s ease-out;
}
.video-modal-x:hover { background: #E63946; color: #FFFFFF; border-color: #E63946; }
.video-modal-x:focus-visible { outline: 2px solid #FCD34D; outline-offset: 2px; }
.video-modal-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000000;
}
.video-modal-iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
@media (max-width: 640px) {
.video-modal { padding: 0.5rem; }
.video-modal-titel { font-size: 0.95rem; }
.video-modal-attribution { font-size: 0.72rem; }
}
/* ===========================================================
Raetsel 5 – Bohrauftrag (3-Schritt-Raetsel)
-----------------------------------------------------------
Layout: Intro -> Schritt-Screens mit Progress-Balken, 3x3-
Bohrerkasten / Schieberegler / Karten-Reihe, Feedback-Box,
Scaffolding-Button, Tipp-Streifen, Erfolgs-Screen.
=========================================================== */
.p5-intro {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.25rem 1.5rem;
text-align: center;
color: #F1F5F9;
}
.p5-intro-titel {
font-size: 1.6rem;
letter-spacing: 0.1em;
color: #FCD34D;
margin: 0 0 0.3rem 0;
}
.p5-intro-text { font-size: 1rem; line-height: 1.5; margin: 0; }
.p5-intro-auftrag {
font-size: 1.05rem;
background: rgba(252, 211, 77, 0.12);
border: 1px solid #FCD34D;
border-radius: 6px;
padding: 0.75rem 1rem;
color: #FCD34D;
font-weight: 600;
margin: 0.3rem 0;
}
.p5-intro-btn {
align-self: center;
margin-top: 0.6rem;
padding: 0.85rem 1.6rem;
background: #4ADE80;
color: #0B0F14;
border: none;
border-radius: 6px;
font-weight: 700;
letter-spacing: 0.08em;
font-size: 1rem;
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
}
.p5-intro-btn:hover { background: #22C55E; transform: translateY(-1px); }
.p5-intro-btn:focus-visible { outline: 3px solid #FCD34D; outline-offset: 2px; }
/* Fortschritt */
.p5-fortschritt { padding: 0.9rem 1.3rem 0.5rem 1.3rem; }
.p5-fortschritt-label {
color: #CBD5E1;
font-size: 0.9rem;
letter-spacing: 0.08em;
margin-bottom: 0.4rem;
}
.p5-balken {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.35rem;
}
.p5-balken-seg {
height: 8px;
background: #374151;
border-radius: 4px;
transition: background 0.25s ease;
}
.p5-balken-seg--aktiv { background: #FCD34D; }
.p5-balken-seg--fertig { background: #4ADE80; }
/* Schritt-Headline */
.p5-schritt-titel {
color: #F1F5F9;
font-size: 1.2rem;
margin: 0.8rem 1.3rem 0.2rem 1.3rem;
}
.p5-schritt-frage {
color: #CBD5E1;
font-size: 0.98rem;
margin: 0 1.3rem 0.9rem 1.3rem;
line-height: 1.45;
}
/* Schritt 1: Bohrerkasten */
.p5-bohrerkasten {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.6rem;
padding: 0 1.3rem;
margin-bottom: 0.8rem;
}
.p5-bohrer-fach {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
padding: 0.6rem 0.5rem 0.45rem 0.5rem;
background: #1E293B;
border: 2px solid #334155;
border-radius: 8px;
cursor: pointer;
transition: transform 0.15s ease, border-color 0.15s ease,
box-shadow 0.15s ease, background 0.15s ease;
color: #F1F5F9;
font-family: inherit;
}
.p5-bohrer-fach:hover:not(:disabled) {
transform: translateY(-2px);
border-color: #FCD34D;
box-shadow: 0 4px 12px rgba(252, 211, 77, 0.18);
}
.p5-bohrer-fach:focus-visible { outline: 3px solid #FCD34D; outline-offset: 2px; }
.p5-bohrer-fach--gewaehlt {
border-color: #FCD34D;
background: #2A3446;
box-shadow: 0 0 0 2px #FCD34D inset;
}
.p5-bohrer-fach:disabled { opacity: 0.55; cursor: default; }
.p5-bohrer-svg-box {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.p5-bohrer-svg { width: 100%; max-width: 140px; height: auto; display: block; }
.p5-bohrer-fach:hover:not(:disabled) .p5-bohrer-svg {
filter: drop-shadow(0 0 6px rgba(252, 211, 77, 0.55));
}
/* Schritt 2: Tabellen-Button */
.p5-tabelle-btn-wrap {
display: flex;
justify-content: center;
margin: 0 1.3rem 0.6rem 1.3rem;
}
.p5-tabelle-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.1rem;
background: #334155;
color: #FCD34D;
border: 1px solid #FCD34D;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
font-size: 0.92rem;
font-weight: 600;
letter-spacing: 0.04em;
transition: background 0.15s ease, transform 0.15s ease;
}
.p5-tabelle-btn:hover { background: #475569; transform: translateY(-1px); }
.p5-tabelle-btn:focus-visible { outline: 3px solid #FCD34D; outline-offset: 2px; }
.p5-tabelle-btn-icon { display: inline-flex; }
/* Schritt 2: Drehzahl-Regler */
.p5-rpm-anzeige {
text-align: center;
padding: 0.3rem 1.3rem 0.2rem 1.3rem;
color: #F1F5F9;
}
.p5-rpm-zahl {
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #FCD34D;
}
.p5-rpm-einheit { font-size: 1rem; color: #CBD5E1; }
.p5-regler-wrap { padding: 0.6rem 1.6rem 0.4rem 1.6rem; }
.p5-regler {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 12px;
border-radius: 6px;
background: #374151;
outline: none;
cursor: pointer;
}
.p5-regler:focus-visible { box-shadow: 0 0 0 3px #FCD34D; }
.p5-regler::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 26px;
height: 26px;
border-radius: 50%;
background: #FCD34D;
border: 2px solid #0B0F14;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.p5-regler::-moz-range-thumb {
width: 26px;
height: 26px;
border-radius: 50%;
background: #FCD34D;
border: 2px solid #0B0F14;
cursor: pointer;
}
.p5-skala {
display: flex;
justify-content: space-between;
margin-top: 0.5rem;
color: #94A3B8;
font-size: 0.78rem;
font-variant-numeric: tabular-nums;
}
/* Schritt 3: Karten */
.p5-karten {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.8rem;
padding: 0 1.3rem;
margin-bottom: 0.8rem;
}
.p5-karte {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: 1rem 0.6rem;
background: #1E293B;
border: 2px solid #334155;
border-radius: 10px;
cursor: pointer;
color: #F1F5F9;
font-family: inherit;
transition: transform 0.15s ease, border-color 0.15s ease,
box-shadow 0.15s ease, background 0.15s ease;
text-align: center;
}
.p5-karte:hover:not(:disabled) {
transform: translateY(-2px);
border-color: #FCD34D;
box-shadow: 0 4px 14px rgba(252, 211, 77, 0.18);
}
.p5-karte:focus-visible { outline: 3px solid #FCD34D; outline-offset: 2px; }
.p5-karte--gewaehlt {
border-color: #FCD34D;
background: #2A3446;
box-shadow: 0 0 0 2px #FCD34D inset;
}
.p5-karte:disabled { opacity: 0.6; cursor: default; }
.p5-karte-svg-box { width: 80px; height: 80px; }
.p5-einspann-svg { width: 100%; height: 100%; }
.p5-karte-label {
font-weight: 700;
letter-spacing: 0.04em;
font-size: 0.95rem;
}
.p5-karte-text {
font-size: 0.82rem;
color: #CBD5E1;
line-height: 1.35;
}
/* Feedback-Box */
.p5-feedback {
margin: 0.8rem 1.3rem;
padding: 0.9rem 1rem;
border-radius: 8px;
border-left: 4px solid #64748B;
background: rgba(30, 41, 59, 0.9);
color: #F1F5F9;
}
.p5-feedback--versteckt { display: none; }
.p5-feedback--richtig {
border-left-color: #4ADE80;
background: rgba(22, 101, 52, 0.25);
}
.p5-feedback--falsch {
border-left-color: #E63946;
background: rgba(127, 29, 29, 0.25);
}
.p5-feedback-titel {
font-weight: 700;
letter-spacing: 0.06em;
margin-bottom: 0.3rem;
color: #FCD34D;
}
.p5-feedback--richtig .p5-feedback-titel { color: #4ADE80; }
.p5-feedback--falsch .p5-feedback-titel { color: #FCA5A5; }
.p5-feedback-text {
margin: 0 0 0.7rem 0;
line-height: 1.5;
font-size: 0.95rem;
}
/* Buttons */
.p5-pruefen-btn,
.p5-weiter-btn {
display: block;
margin: 0.6rem 1.3rem 0.3rem auto;
padding: 0.7rem 1.3rem;
background: #4ADE80;
color: #0B0F14;
border: none;
border-radius: 6px;
font-weight: 700;
letter-spacing: 0.06em;
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
font-family: inherit;
font-size: 0.95rem;
}
.p5-pruefen-btn:hover:not(:disabled),
.p5-weiter-btn:hover:not(:disabled) {
background: #22C55E;
transform: translateY(-1px);
}
.p5-pruefen-btn:disabled {
background: #374151;
color: #94A3B8;
cursor: not-allowed;
}
.p5-pruefen-btn:focus-visible,
.p5-weiter-btn:focus-visible {
outline: 3px solid #FCD34D;
outline-offset: 2px;
}
.p5-feedback--falsch .p5-weiter-btn { background: #FCD34D; color: #0B0F14; }
.p5-feedback--falsch .p5-weiter-btn:hover { background: #FBBF24; }
.p5-hilfe {
display: flex;
justify-content: center;
margin: 0.2rem 1.3rem 0 1.3rem;
}
.p5-info-btn {
padding: 0.55rem 1rem;
background: #334155;
color: #FCD34D;
border: 1px solid #FCD34D;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
font-size: 0.88rem;
letter-spacing: 0.04em;
transition: background 0.15s ease;
}
.p5-info-btn:hover { background: #475569; }
.p5-info-btn:focus-visible { outline: 3px solid #FCD34D; outline-offset: 2px; }
.p5-info-btn--versteckt { display: none; }
/* Tipp-Streifen */
.p5-tipp-streifen {
margin: 0.8rem 1.3rem 1.1rem 1.3rem;
padding: 0.55rem 0.8rem;
background: rgba(51, 65, 85, 0.45);
border-left: 3px solid #64748B;
border-radius: 4px;
color: #CBD5E1;
font-size: 0.82rem;
font-style: italic;
}
/* Erfolgs-Screen */
.p5-erfolg {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
padding: 1.4rem 1.5rem;
text-align: center;
color: #F1F5F9;
}
.p5-erfolg-check {
width: 64px;
height: 64px;
border-radius: 50%;
background: #4ADE80;
color: #0B0F14;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
font-weight: 800;
box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.25);
}
.p5-erfolg-titel {
margin: 0.3rem 0 0 0;
font-size: 1.4rem;
letter-spacing: 0.08em;
color: #4ADE80;
}
.p5-erfolg-text {
font-size: 1rem;
line-height: 1.5;
margin: 0;
max-width: 46ch;
}
.p5-erfolg .p5-weiter-btn { margin: 0.6rem auto 0 auto; }
/* Responsive */
@media (max-width: 720px) {
.p5-bohrerkasten,
.p5-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p5-karte-svg-box { width: 64px; height: 64px; }
.p5-schritt-titel,
.p5-schritt-frage,
.p5-feedback,
.p5-pruefen-btn,
.p5-tipp-streifen { margin-inline: 1rem; }
.p5-rpm-zahl { font-size: 2.1rem; }
}
@media (prefers-reduced-motion: reduce) {
.p5-intro-btn,
.p5-bohrer-fach,
.p5-karte,
.p5-pruefen-btn,
.p5-weiter-btn,
.p5-tabelle-btn { transition: none; }
}
/* Drehzahltabellen-Overlay (liegt ueber dem Raetsel-Modal) */
.p5-tabelle-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
z-index: 2000;
animation: p5TabelleFadeIn 0.18s ease-out;
}
@keyframes p5TabelleFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.p5-tabelle-rahmen {
position: relative;
max-width: 95vw;
max-height: 92vh;
background: #0F172A;
border: 2px solid #FCD34D;
border-radius: 10px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
padding: 0.6rem;
}
.p5-tabelle-bild {
display: block;
max-width: 100%;
max-height: calc(92vh - 1.2rem);
width: auto;
height: auto;
object-fit: contain;
border-radius: 4px;
}
.p5-tabelle-close {
position: absolute;
top: -14px;
right: -14px;
width: 36px;
height: 36px;
border-radius: 50%;
background: #FCD34D;
color: #0B0F14;
border: 2px solid #0B0F14;
font-size: 1.4rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
transition: background 0.15s ease, transform 0.15s ease;
}
.p5-tabelle-close:hover { background: #FBBF24; transform: scale(1.06); }
.p5-tabelle-close:focus-visible {
outline: 3px solid #FFF;
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.p5-tabelle-overlay { animation: none; }
.p5-tabelle-close { transition: none; }
}
/* ===========================================================
KALIBRIERUNGS-MODUS (Strg+K)
-----------------------------------------------------------
Reines Entwickler-Werkzeug zum Auslesen der Hotspot-
Koordinaten. Im Normalbetrieb komplett unsichtbar.
=========================================================== */
/* Roter, halbtransparenter Rahmen rund um das Panorama,
solange der Modus aktiv ist. inset-Variante als
box-shadow, damit kein zusätzlicher Layout-Raum entsteht
und Pannellum unangetastet bleibt. */
.panorama--kalibrierung {
box-shadow: inset 0 0 0 3px rgba(230, 57, 70, 0.75);
}
/* Hinweis-Banner oben mittig: dunkler Hintergrund, weisse
Schrift, gut sichtbar aber nicht im Weg. */
.kalibrierung-banner {
position: fixed;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
padding: 10px 18px;
background: rgba(20, 20, 20, 0.92);
color: #FFFFFF;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
border: 1px solid rgba(230, 57, 70, 0.85);
border-radius: 6px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
pointer-events: none;
white-space: nowrap;
max-width: 95vw;
overflow: hidden;
text-overflow: ellipsis;
}
/* Kleine Koordinaten-Toast unten rechts. Erscheint pro Klick
einmal, fadet nach ~4 Sekunden weich aus. */
.kalibrierung-toast {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 9999;
padding: 8px 12px;
background: rgba(20, 20, 20, 0.9);
color: #FFFFFF;
font-family: "Menlo", "Consolas", monospace;
font-size: 13px;
border: 1px solid rgba(230, 57, 70, 0.6);
border-radius: 4px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
pointer-events: none;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.kalibrierung-toast--sichtbar {
opacity: 1;
transform: translateY(0);
}
/* Test-Toast für Skip-Modus (unten rechts). */
.skip-toast {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 9999;
padding: 8px 12px;
background: rgba(20, 20, 20, 0.9);
color: #FFFFFF;
font-family: "Menlo", "Consolas", monospace;
font-size: 13px;
border: 1px solid rgba(74, 222, 128, 0.6);
border-radius: 4px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
pointer-events: none;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.skip-toast--sichtbar {
opacity: 1;
transform: translateY(0);
}
/* ===========================================================
Blackout-Eintritts-Sequenz (Phase 1–8)
-----------------------------------------------------------
Dramatische Inszenierung direkt nach dem Klick auf SPIEL
STARTEN. Während Phase 1–7 hält die Body-Klasse
.blackout-vor-spiel die Hotspots und die Sicherheits-Checks-
Anzeige versteckt. Mit dem Klick auf VERSTANDEN entfernt
main.js die Klasse → Spiel ist freigegeben (Phase 8).
=========================================================== */
/* Phase 1–7: Pannellum-Hotspots vollständig ausblenden und
nicht klickbar machen, damit sich der Spieler erst frei
umsehen kann und nichts versehentlich öffnet. */
body.blackout-vor-spiel #panorama .pnlm-hotspot-container {
display: none !important;
}
/* Phase 1–7: Sicherheits-Checks-Anzeige verbergen. */
body.blackout-vor-spiel .fortschritt {
display: none !important;
}
/* -----------------------------------------------------------
Phase 1: Hinweistext "Sieh dich kurz um …"
----------------------------------------------------------- */
.umsehen-hinweis {
position: fixed;
top: 6vh;
left: 50%;
transform: translateX(-50%);
z-index: 1500;
color: rgba(255, 255, 255, 0.85);
font-size: 1rem;
letter-spacing: 0.05em;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
pointer-events: none;
opacity: 0;
transition: opacity 0.7s ease-in-out;
}
.umsehen-hinweis--sichtbar {
opacity: 1;
}
/* -----------------------------------------------------------
Phase 3: Screenshake auf dem Panorama-Container
----------------------------------------------------------- */
#panorama.screenshake {
animation: blackout-screenshake 0.4s linear;
}
@keyframes blackout-screenshake {
0% { transform: translate(0, 0); }
10% { transform: translate(-5px, 3px); }
20% { transform: translate(4px, -4px); }
30% { transform: translate(-6px, 2px); }
40% { transform: translate(5px, 4px); }
50% { transform: translate(-3px, -5px); }
60% { transform: translate(6px, 1px); }
70% { transform: translate(-4px, -3px); }
80% { transform: translate(3px, 4px); }
90% { transform: translate(-2px, -2px); }
100% { transform: translate(0, 0); }
}
/* -----------------------------------------------------------
Phase 4–6: Schwarzes Vollbild-Overlay
– flicker: unregelmäßige Lichtflackern-Animation 2 s
– solid: dauerhaft opacity 1 (Phase 5)
– fade-out: 0.6 s sanftes Ausblenden (Phase 6)
----------------------------------------------------------- */
.blackout-overlay {
position: fixed;
inset: 0;
background: #000;
z-index: 4000; /* über Panorama, unter Modals */
pointer-events: none;
opacity: 0;
transition: opacity 0.6s ease-out;
}
.blackout-overlay--flicker {
animation: blackout-flicker 2s linear forwards;
}
.blackout-overlay--solid {
opacity: 1;
}
.blackout-overlay--fade-out {
opacity: 0;
}
@keyframes blackout-flicker {
0% { opacity: 0; }
10% { opacity: 0.85; }
12% { opacity: 0; }
25% { opacity: 0.95; }
28% { opacity: 0.1; }
45% { opacity: 0; }
60% { opacity: 0.7; }
63% { opacity: 0; }
80% { opacity: 1.0; }
85% { opacity: 0.2; }
100% { opacity: 1.0; }
}
/* -----------------------------------------------------------
Phase 7: Terminal-Nachricht im CRT-Look
----------------------------------------------------------- */
.terminal-modal {
position: fixed;
inset: 0;
z-index: 4500;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.78);
padding: 4vh 4vw;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.terminal-modal--sichtbar { opacity: 1; }
.terminal-modal--fade-out { opacity: 0; }
.terminal-panel {
position: relative;
background: rgba(14, 8, 8, 0.96);
border: 2px solid #FF3030;
border-radius: 4px;
padding: 1.6rem 2rem 1.4rem;
min-width: min(560px, 90vw);
max-width: 720px;
color: #FF3030;
font-family: "Menlo", "Consolas", "Courier New", monospace;
box-shadow: 0 0 24px rgba(255, 48, 48, 0.35),
inset 0 0 30px rgba(255, 48, 48, 0.08);
text-shadow: 0 0 6px rgba(255, 48, 48, 0.55);
}
.terminal-text {
margin: 0;
font-size: 1.05rem;
line-height: 1.5;
white-space: pre-wrap;
color: inherit;
font-family: inherit;
min-height: 12em; /* hält Höhe schon vor dem Tippen */
}
.terminal-cursor {
display: inline;
color: #FF3030;
margin-left: 2px;
font-weight: bold;
}
.terminal-cursor--blink {
animation: terminal-cursor-blink 0.9s step-end infinite;
}
@keyframes terminal-cursor-blink {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}
.terminal-btn {
margin-top: 1.4rem;
background: transparent;
color: #FF3030;
border: 2px solid #FF3030;
padding: 0.55rem 1.4rem;
font-family: inherit;
font-size: 0.95rem;
letter-spacing: 0.08em;
cursor: pointer;
opacity: 0;
transition: opacity 0.4s ease-in-out,
background-color 0.15s ease,
color 0.15s ease;
}
.terminal-btn--sichtbar { opacity: 1; }
.terminal-btn:hover {
background: rgba(255, 48, 48, 0.15);
color: #FF3030;
}
.terminal-btn:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
#panorama.screenshake { animation: none; }
.blackout-overlay--flicker { animation: none; opacity: 1; }
.terminal-cursor--blink { animation: none; }
}
/* ===========================================================
Notfallprotokoll – Werkbank-Hotspot
-----------------------------------------------------------
Klemmbrett-Hotspot vor der Bohrmaschine (📋), öffnet das
Notfallprotokoll-Modal mit den 5 Stationen-Medaillons.
Optisch klar von Info-Tafeln und Leuchten abgegrenzt:
metallisches Dunkelgrau mit roter Akzent-Pulsation.
=========================================================== */
.notfall-hotspot-wrapper {
/* Pannellum positioniert das umgebende Element. */
}
.notfall-hotspot {
width: 180px !important;
height: 135px !important; /* 4:3 (Bild 1448x1086) */
cursor: pointer;
position: absolute;
/* Mitte des Bildes auf dem Pannellum-Ankerpunkt (yaw/pitch),
damit das Schild als an der Wand hängend wirkt und nicht
nach unten-rechts versetzt erscheint. */
top: 0;
left: 0;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
padding: 0;
border-radius: 6px;
animation: notfallplan-pulse 1s ease-in-out infinite;
}
.notfall-hotspot:hover {
/* Glow im Hover etwas kräftiger, Bild bleibt gleich groß. */
box-shadow: 0 0 55px rgba(255, 50, 40, 1.0);
}
@keyframes notfallplan-pulse {
0% { box-shadow: 0 0 15px rgba(255, 50, 40, 0.5); }
50% { box-shadow: 0 0 50px rgba(255, 50, 40, 1.0); }
100% { box-shadow: 0 0 15px rgba(255, 50, 40, 0.5); }
}
.notfall-hotspot:focus-visible {
outline: 3px solid #FFFFFF;
outline-offset: 3px;
}
.notfall-hotspot-icon {
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
/* Tooltip beim Hovern. */
.notfall-hotspot::after {
content: attr(data-label);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
background-color: rgba(10, 10, 10, 0.92);
color: #F4F4F4;
padding: 0.35rem 0.7rem;
border-radius: 4px;
font-size: 0.9rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-in-out;
z-index: 10;
}
.notfall-hotspot:hover::after,
.notfall-hotspot:focus-visible::after {
opacity: 1;
}
@keyframes notfall-hotspot-puls {
0%, 100% { box-shadow: 0 0 12px rgba(230, 57, 70, 0.40); }
50% { box-shadow: 0 0 24px rgba(230, 57, 70, 0.85); }
}
@media (prefers-reduced-motion: reduce) {
.notfall-hotspot { animation: none; }
}
/* ===========================================================
Notfallprotokoll – Modal-Fenster
-----------------------------------------------------------
Vollflächiger dunkler Overlay, mittig die Karte als Bild
mit fixem 3:2-Seitenverhältnis. Stations-Medaillons sind
prozentual über dem Bild positioniert und skalieren mit.
=========================================================== */
.notfall-overlay {
position: fixed;
inset: 0;
z-index: 1900; /* unter dem Rätsel-Modal (2000) */
background-color: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
padding: 2vh 2vw;
opacity: 0;
transition: opacity 0.25s ease-in-out;
}
.notfall-overlay--sichtbar { opacity: 1; }
.notfall-overlay--fade-out { opacity: 0; }
/* Bild-Wrapper: aspect-ratio 3:2 plus min(...)-Breite, damit
sowohl 90vw als auch 85vh respektiert werden (image is
1536x1024 → 3:2). */
.notfall-bild-wrapper {
position: relative;
aspect-ratio: 3 / 2;
width: min(90vw, 127.5vh); /* 85vh ÷ (2/3) */
max-width: 90vw;
max-height: 85vh;
}
.notfall-bild {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 4px;
user-select: none;
-webkit-user-drag: none;
}
/* Schließen-Button oben rechts auf dem Bild. */
.notfall-close {
position: absolute;
top: 8px;
right: 8px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.7);
color: #FFFFFF;
border: 2px solid rgba(255, 255, 255, 0.6);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease,
transform 0.15s ease;
z-index: 5;
}
.notfall-close:hover {
background-color: rgba(230, 57, 70, 0.9);
transform: scale(1.08);
}
.notfall-close:focus-visible {
outline: 3px solid #FFFFFF;
outline-offset: 2px;
}
/* Stations-Medaillons (unsichtbare runde Klickflächen).
x/y kommen per inline-style; Größe = 17 % der Bildbreite
(Radius 8.5 % × 2). transform zentriert auf die Position. */
.notfall-station {
position: absolute;
width: 17%;
aspect-ratio: 1 / 1;
border-radius: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
border: 2px solid transparent;
cursor: pointer;
padding: 0;
box-shadow: none;
transition: box-shadow 0.18s ease,
border-color 0.18s ease,
background-color 0.18s ease;
/* Klickfläche soll nicht das Bild verzerren. */
overflow: visible;
}
.notfall-station:hover {
border-color: rgba(252, 211, 77, 0.85);
background-color: rgba(252, 211, 77, 0.12);
box-shadow: 0 0 18px 4px rgba(252, 211, 77, 0.55);
}
.notfall-station:focus-visible {
outline: none;
border-color: #FCD34D;
box-shadow: 0 0 0 3px rgba(252, 211, 77, 0.85),
0 0 18px 4px rgba(252, 211, 77, 0.5);
}
/* Häkchen-Overlay für gelöste Stationen. */
.notfall-station .status-overlay {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
color: #4ADE80;
font-size: 4.5rem;
line-height: 1;
font-weight: 900;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.55),
0 0 14px rgba(74, 222, 128, 0.55);
opacity: 0.85;
pointer-events: none;
}
.notfall-station .status-overlay.solved {
display: flex;
}
/* Optional dezenter grüner Schein um die ganze Station,
wenn schon gelöst. */
.notfall-station--solved {
box-shadow: 0 0 14px 2px rgba(74, 222, 128, 0.45);
background-color: rgba(74, 222, 128, 0.08);
}
@media (max-width: 600px) {
.notfall-station .status-overlay {
font-size: 2.8rem;
}
.notfall-close {
width: 36px;
height: 36px;
font-size: 1.4rem;
}
}
/* ===========================================================
RÄTSEL 1 – PATENT-LAYOUT (überschreibt frühere Puzzle-1-Styles)
-----------------------------------------------------------
Cremefarbenes Patent-Modal mit:
– schwarzem Doppelrahmen + Schraubenkopf-Deko in den Ecken
– Titel "DIE BAUGRUPPEN" und Aufgabentext
– 3-Spalten-Layout (5 Drops links | Bohrmaschine.png | 4 Drops rechts)
– feinen schwarzen Verbindungslinien (SVG-Overlay)
– Chip-Pool unten + Status + ANTWORTEN-PRÜFEN-Button
=========================================================== */
/* --- Modal-Panel im Patent-Look ----------------------------- */
.modal-panel.modal-panel--p1 {
background: #ECDDB8; /* warmes Vergilbt */
color: #1A0E06;
border: 1px solid #1A0E06;
/* Schwarzer Doppelrahmen: dünn außen, kräftiger innen */
box-shadow: inset 0 0 0 6px #ECDDB8,
inset 0 0 0 8px #1A0E06,
0 12px 40px rgba(0, 0, 0, 0.55);
}
.modal-panel--p1 .modal-header {
background: transparent;
border-bottom: 1px solid rgba(26, 14, 6, 0.4);
color: #1A0E06;
}
.modal-panel--p1 .modal-titel,
.modal-panel--p1 .modal-close-x {
color: #1A0E06;
}
.modal-panel--p1 .modal-close-x:hover {
color: #8B2027;
}
.modal-panel--p1 .modal-footer {
background: transparent;
border-top: 1px solid rgba(26, 14, 6, 0.4);
}
/* Schraubenkopf-Deko in den 4 Ecken (kleiner Kreis + Schlitz). */
.modal-panel--p1 .p1-schraube {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%,
#b8a987 0%, #7a6a48 60%, #3b2f18 100%);
border: 1px solid #1A0E06;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
z-index: 5;
pointer-events: none;
}
.modal-panel--p1 .p1-schraube::after {
content: "";
position: absolute;
left: 50%;
top: 20%;
width: 1.5px;
height: 60%;
background: #1A0E06;
transform: translateX(-50%) rotate(35deg);
transform-origin: center;
}
.modal-panel--p1 .p1-schraube--tl { top: 14px; left: 14px; }
.modal-panel--p1 .p1-schraube--tr { top: 14px; right: 14px; }
.modal-panel--p1 .p1-schraube--bl { bottom: 14px; left: 14px; }
.modal-panel--p1 .p1-schraube--br { bottom: 14px; right: 14px; }
/* --- Patent-Wrapper innerhalb der Modal-Inhaltsfläche ------- */
.modal-panel--p1 .modal-inhalt {
background: transparent;
color: #1A0E06;
/* Mehr Bottom-Padding, damit der Chip-Pool unten nicht am
Modal-Rand abgeschnitten wird. */
padding: 1.4rem 1.6rem 1.4rem;
}
.p1-patent {
display: flex;
flex-direction: column;
gap: 0.6rem;
flex: 1 1 auto;
min-height: 0;
}
.p1-titel {
margin: 0;
text-align: center;
font-family: Georgia, "Times New Roman", serif;
font-weight: 900;
font-size: 1.6rem;
letter-spacing: 0.18em;
color: #1A0E06;
text-transform: uppercase;
border-bottom: 1px solid rgba(26, 14, 6, 0.55);
padding-bottom: 0.4rem;
}
.modal-panel--p1 .p1-aufgabe {
margin: 0;
text-align: center;
color: #1A0E06;
font-family: Georgia, "Times New Roman", serif;
font-size: 0.95rem;
line-height: 1.4;
}
/* --- 3-Spalten-Layout -------------------------------------- */
.modal-panel--p1 .p1-layout {
position: relative;
display: grid;
grid-template-columns: 1fr 1.6fr 1fr;
gap: 0.6rem;
align-items: stretch;
flex: 1 1 auto;
min-height: 0;
padding: 0.4rem 0;
}
/* SVG-Linien-Ebene über dem Bild UND den Drop-Feldern – sichtbar
über beidem. pointer-events:none verhindert, dass die Linien
das Drag-and-Drop blockieren. */
.p1-lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 3;
}
.p1-line {
stroke: #1A0F08;
stroke-width: 1.5; /* px, dank non-scaling-stroke */
vector-effect: non-scaling-stroke;
stroke-linecap: round;
fill: none;
}
.p1-line-dot {
fill: #1A0F08;
}
/* Drop-Spalten: relativer Container; Drop-Felder werden absolut
an den fixen Slot-Positionen ausgerichtet (siehe SLOTS_LINKS /
SLOTS_RECHTS in puzzles.js), damit Linien und Drops
garantiert auf derselben Y-Höhe sitzen. */
.modal-panel--p1 .p1-spalte {
position: relative;
min-width: 0;
height: 100%;
z-index: 2; /* über den Linien */
}
.modal-panel--p1 .p1-spalte .p1-dropzone {
position: absolute;
left: 0;
right: 0;
transform: translateY(-50%);
}
/* Mittlere Bild-Box. */
.p1-bildbox {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
z-index: 2;
}
.p1-bild {
display: block;
width: 100%;
max-height: 70vh;
height: auto;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
}
/* --- Drop-Felder im Patent-Stil ---------------------------- */
.modal-panel--p1 .p1-dropzone {
min-height: 48px;
height: 55px;
padding: 0 0.5rem;
background: rgba(255, 252, 235, 0.55);
border: 1.5px solid #1A0E06;
border-radius: 2px;
color: #1A0E06;
font-family: Georgia, "Times New Roman", serif;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.05em;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
transition: box-shadow 0.15s ease, background-color 0.15s ease;
position: relative;
z-index: 2;
}
.modal-panel--p1 .p1-dropzone--hover {
box-shadow: 0 0 0 2px rgba(255, 200, 60, 0.45),
0 0 18px rgba(255, 200, 60, 0.4);
background: rgba(255, 240, 200, 0.85);
border-color: #1A0E06;
}
/* Drop-Feld mit gesetztem Chip: Chip füllt das Feld aus. */
.modal-panel--p1 .p1-dropzone .p1-chip {
width: 100%;
height: 100%;
margin: 0;
background: transparent;
border: none;
box-shadow: none;
color: #1A0E06;
font-weight: 700;
}
/* Markierung nach 3+ Fehlversuchen. */
.modal-panel--p1 .p1-dropzone--falsch {
border-color: #8B2027;
box-shadow: inset 0 0 0 1px #8B2027;
}
.modal-panel--p1 .p1-dropzone--falsch .p1-chip {
color: #8B2027;
}
.modal-panel--p1 .p1-dropzone--richtig {
border-color: #1f6b32;
background: rgba(120, 200, 120, 0.18);
}
.modal-panel--p1 .p1-dropzone--richtig .p1-chip {
color: #1f6b32;
}
/* --- Chip-Pool (unten) ------------------------------------- */
.modal-panel--p1 .p1-pool-wrap {
border-top: 1px solid rgba(26, 14, 6, 0.4);
/* Genug Innenabstand oben/unten, damit Chip-Rahmen nicht am
Modal-Rand kleben. */
padding: 0.8rem 0 0.8rem;
margin-top: 0.5rem;
margin-bottom: 0.4rem;
flex: 0 0 auto; /* nicht zusammenstauchen lassen */
}
.modal-panel--p1 .p1-pool-titel {
color: #1A0E06;
font-family: Georgia, "Times New Roman", serif;
font-size: 0.8rem;
letter-spacing: 0.12em;
margin-bottom: 0.4rem;
}
.modal-panel--p1 .p1-pool {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 0.5rem;
min-height: 50px;
padding: 0.4rem;
background: rgba(255, 252, 235, 0.5);
border: 1px dashed rgba(26, 14, 6, 0.45);
border-radius: 2px;
}
/* Chip-Stil (Patent). */
.modal-panel--p1 .p1-chip {
background: #F4E8C8;
color: #1A0E06;
border: 1.2px solid #1A0E06;
border-radius: 2px;
padding: 0.4rem 0.7rem;
font-family: Georgia, "Times New Roman", serif;
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: grab;
user-select: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.modal-panel--p1 .p1-chip:hover {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
transform: translateY(-1px);
}
.modal-panel--p1 .p1-chip--zieht {
cursor: grabbing;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}
.modal-panel--p1 .p1-chip--ausgewaehlt {
box-shadow: 0 0 0 2px #8B2027;
}
.modal-panel--p1 .p1-chip--falsch {
border-color: #8B2027;
color: #8B2027;
}
/* --- Footer-Zeile (Status + PRÜFEN) ------------------------ */
.modal-panel--p1 .p1-pruefen-zeile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
padding: 0.4rem 0;
}
.modal-panel--p1 .p1-pruefen-hinweis {
color: #1A0E06;
font-family: Georgia, "Times New Roman", serif;
font-size: 0.9rem;
letter-spacing: 0.04em;
}
.modal-panel--p1 .p1-pruefen-hinweis--warn {
color: #6a3a10;
}
.modal-panel--p1 .p1-pruefen-btn {
background: #ECDDB8;
color: #1A0E06;
border: 2px solid #1A0E06;
padding: 0.5rem 1.1rem;
font-family: Georgia, "Times New Roman", serif;
font-weight: 900;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
border-radius: 2px;
transition: background-color 0.15s ease, color 0.15s ease;
}
.modal-panel--p1 .p1-pruefen-btn:hover:not(:disabled) {
background: #1A0E06;
color: #ECDDB8;
}
.modal-panel--p1 .p1-pruefen-btn:disabled {
color: #8a8068;
border-color: #8a8068;
background: rgba(0, 0, 0, 0.04);
cursor: not-allowed;
}
/* Meldungs- und Telefon-Hilfe-Boxen. */
.modal-panel--p1 .p1-meldung {
color: #1A0E06;
font-family: Georgia, "Times New Roman", serif;
font-size: 0.95rem;
padding: 0.4rem 0.6rem;
border-radius: 2px;
background: rgba(255, 240, 200, 0.6);
border: 1px solid rgba(26, 14, 6, 0.35);
margin: 0.4rem 0;
display: none;
}
.modal-panel--p1 .p1-meldung--sichtbar { display: block; }
.modal-panel--p1 .p1-meldung--warn { border-color: #8B2027; color: #8B2027; }
.modal-panel--p1 .p1-meldung--erfolg { border-color: #1f6b32; color: #1f6b32; }
.modal-panel--p1 .p1-telefon {
background: #F4E8C8;
border: 2px solid #8B2027;
border-radius: 2px;
padding: 0.6rem 0.8rem;
margin: 0.4rem 0;
}
.modal-panel--p1 .p1-telefon--versteckt { display: none; }
.modal-panel--p1 .p1-telefon-titel {
font-family: Georgia, serif;
font-weight: 900;
color: #8B2027;
margin-bottom: 0.3rem;
}
.modal-panel--p1 .p1-telefon-text {
color: #1A0E06;
font-size: 0.9rem;
line-height: 1.4;
margin-bottom: 0.5rem;
}
.modal-panel--p1 .p1-telefon-btn {
background: transparent;
color: #8B2027;
border: 2px solid #8B2027;
padding: 0.4rem 0.9rem;
font-family: Georgia, serif;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
}
.modal-panel--p1 .p1-telefon-btn:hover {
background: #8B2027;
color: #ECDDB8;
}
/* Responsive: auf schmalen Geräten Spalten unter dem Bild. */
@media (max-width: 720px) {
.modal-panel--p1 .p1-layout {
grid-template-columns: 1fr;
gap: 0.4rem;
}
.p1-lines { display: none; } /* Linien nur sinnvoll im 3-Spalten-Layout */
.p1-bildbox { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
.modal-panel--p1 .p1-chip,
.modal-panel--p1 .p1-dropzone {
transition: none;
}
}
/* ===========================================================
RÄTSEL 1 – BAUGRUPPEN-PATENT-LAYOUT
-----------------------------------------------------------
Das Bild assets/Baugruppen.png trägt das gesamte visuelle
Layout (gestrichelte Drop-Felder, Begriffe-Chips, Linien).
Über das Bild werden 18 unsichtbare HTML-Bereiche gelegt:
– 9 Drop-Ziele über den gestrichelten Rechtecken
– 9 Drag-Quellen über den Begriffe-Chips am unteren Rand
Diese Regeln überschreiben/ergänzen ältere .p1-... Styles.
=========================================================== */
/* Schmaler Header (Titel + Aufgabentext) über dem Bild. */
.modal-panel--p1 .p1-header {
text-align: center;
margin-bottom: 0.4rem;
flex: 0 0 auto;
}
/* Bild-Wrapper: schmiegt sich exakt an die Bildgröße an, damit
prozentuale Drop-Feld-Positionen relativ ZUM BILD und nicht zum
Modal-Body interpretiert werden.
– display:inline-block + width:fit-content lassen den Wrapper
auf die Inhalts-Breite (= Bild-Breite) schrumpfen.
– align-self:center verhindert, dass der Flex-Eltern-Container
(.p1-patent, align-items:stretch) den Wrapper auf volle Breite
streckt. */
.modal-panel--p1 .p1-bildwrap {
position: relative;
display: inline-block;
align-self: center;
width: fit-content;
max-width: 100%;
max-height: 60vh; /* Platz für Pool und Footer freihalten */
margin: 0 auto;
background-color: transparent;
border: none;
border-radius: 0;
overflow: visible;
flex: 0 0 auto;
min-height: 0;
}
.modal-panel--p1 .p1-bild {
display: block;
max-width: 100%;
max-height: 60vh;
width: auto;
height: auto;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
}
/* Unsichtbare Drag-Quelle: kein Hintergrund, kein Rand;
Cursor signalisiert Greifbarkeit. touch-action verhindert
das Scrollen beim Drag auf Mobilgeräten. */
.modal-panel--p1 .p1-drag-quelle {
position: absolute;
cursor: grab;
touch-action: none;
background: transparent;
border: 1px solid transparent; /* fängt Klicks zuverlässig */
border-radius: 4px;
z-index: 4;
transition: background-color 0.12s ease, border-color 0.12s ease;
}
.modal-panel--p1 .p1-drag-quelle:hover {
background-color: rgba(255, 200, 60, 0.18);
border-color: rgba(255, 200, 60, 0.55);
}
.modal-panel--p1 .p1-drag-quelle:focus-visible {
outline: 2px solid #1A0E06;
outline-offset: 2px;
}
.modal-panel--p1 .p1-drag-quelle--ausgewaehlt {
background-color: rgba(255, 200, 60, 0.3);
border-color: rgba(139, 32, 39, 0.7);
}
/* Sichtbares Drop-Ziel: warm-braune gestrichelte Umrandung mit
dezent cremigem Hintergrund + Platzhalter-Text "Hier ablegen",
damit der Spieler eindeutig erkennt, wohin er Begriffe ziehen
soll. Im belegten Zustand verschwindet der Platzhalter (das
übernimmt den Inhalt).
left/top im JS sind der MITTELPUNKT – translate(-50%, -50%)
verschiebt das Feld so, dass sein Zentrum am Anker liegt. */
.modal-panel--p1 .p1-drop-ziel {
position: absolute;
transform: translate(-50%, -50%) !important;
border: 2px dashed #6b4423; /* warm-braun, passt zum Patent */
background: rgba(255, 240, 200, 0.35); /* dezent cremig */
border-radius: 3px;
z-index: 3;
cursor: pointer;
touch-action: none;
display: flex;
align-items: center;
justify-content: center;
font-family: Georgia, "Times New Roman", serif;
font-size: 13px;
color: rgba(107, 68, 35, 0.55);
letter-spacing: 0.05em;
transition: border-color 0.15s ease,
border-style 0.15s ease,
background-color 0.15s ease,
box-shadow 0.15s ease;
}
/* Platzhalter-Text im leeren Zustand. */
.modal-panel--p1 .p1-drop-ziel::before {
content: "Hier ablegen";
pointer-events: none;
}
.modal-panel--p1 .p1-drop-ziel:hover,
.modal-panel--p1 .p1-drop-ziel--hover {
border-color: #8b4513;
border-style: solid;
background: rgba(255, 220, 150, 0.55);
box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.15);
}
.modal-panel--p1 .p1-drop-ziel:focus-visible {
outline: 2px solid #1A0E06;
outline-offset: 2px;
}
/* Belegtes Ziel: solider Rand, kräftigerer Cream-Hintergrund.
Platzhalter "Hier ablegen" wird ausgeblendet, damit nur das
Zuweisungs-Overlay (der gewählte Begriff) sichtbar ist. */
.modal-panel--p1 .p1-drop-ziel--belegt {
border-style: solid;
border-color: #6b4423;
background: rgba(220, 200, 150, 0.4);
}
.modal-panel--p1 .p1-drop-ziel--belegt::before {
content: none;
}
/* Falsch-Markierung (ab 3 Fehlversuchen). */
.modal-panel--p1 .p1-drop-ziel--falsch {
background-color: rgba(139, 32, 39, 0.18);
border-color: #8B2027;
border-style: solid;
box-shadow: 0 0 0 2px rgba(139, 32, 39, 0.35);
}
.modal-panel--p1 .p1-drop-ziel--falsch .p1-zuweisung-overlay {
color: #8B2027;
}
/* Erfolgs-Markierung (alle richtig). */
.modal-panel--p1 .p1-drop-ziel--richtig {
background-color: rgba(74, 222, 128, 0.18);
border-color: #1f6b32;
}
.modal-panel--p1 .p1-drop-ziel--richtig .p1-zuweisung-overlay {
color: #1f6b32;
}
/* Text-Overlay über dem Drop-Ziel mit dem zugewiesenen Begriff.
Schablonenschrift (Bold-Caps mit Letterspacing), schwarz,
zentriert. font-size mit clamp damit's auf kleineren Bildern
noch lesbar bleibt. */
.modal-panel--p1 .p1-zuweisung-overlay {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-align: center;
color: #1A0E06;
font-family: Georgia, "Times New Roman", serif;
font-weight: 900;
font-size: clamp(0.55rem, 0.9vw, 0.95rem);
letter-spacing: 0.05em;
text-transform: uppercase;
pointer-events: none;
padding: 0 2px;
line-height: 1.1;
}
/* Geist-Chip beim Drag: folgt dem Pointer; cremefarbener Hinter-
grund, schwarzer Rahmen, Schablonenschrift. */
.p1-geist-chip {
position: fixed;
z-index: 9999;
background: #F4E8C8;
color: #1A0E06;
border: 1.5px solid #1A0E06;
border-radius: 3px;
padding: 0.4rem 0.7rem;
font-family: Georgia, "Times New Roman", serif;
font-weight: 900;
font-size: 0.85rem;
letter-spacing: 0.05em;
text-transform: uppercase;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
pointer-events: none;
user-select: none;
white-space: nowrap;
cursor: grabbing;
}
/* ===========================================================
RÄTSEL 1 – DROP-FELD-KALIBRIERUNGS-MODUS (Strg+D, Dev-Hilfe)
-----------------------------------------------------------
Wenn .p1-kalibrieren auf dem Bild-Wrapper liegt, werden die
9 Drop-Felder mit dicker roter Umrandung + leichter roter
Tönung angezeigt. Pointer-Events der Drop-Felder werden
abgeschaltet, damit der Klick aufs Bild zuverlässig die
Maus-Position liefert (keine Drag-Interaktion in Cal-Mode).
=========================================================== */
.p1-bildwrap.p1-kalibrieren {
cursor: crosshair;
}
.p1-bildwrap.p1-kalibrieren .p1-drop-ziel {
pointer-events: none;
border: 3px solid red;
background: rgba(255, 0, 0, 0.15);
box-shadow: none;
}
/* Kleines Label am oberen Rand jedes Drop-Felds mit den
aktuellen %-Koordinaten. */
.p1-kalib-label {
position: absolute;
top: -1.4em;
left: 0;
background: rgba(0, 0, 0, 0.85);
color: #fff;
font-family: "Menlo", "Consolas", monospace;
font-size: 11px;
padding: 1px 4px;
border-radius: 2px;
white-space: nowrap;
pointer-events: none;
z-index: 5;
}
/* Toast unten rechts für Kalibrierungs-Statusmeldungen. */
.p1-kalib-toast {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 9999;
padding: 8px 12px;
background: rgba(20, 20, 20, 0.92);
color: #fff;
font-family: "Menlo", "Consolas", monospace;
font-size: 13px;
border: 1px solid red;
border-radius: 4px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
pointer-events: none;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.p1-kalib-toast--sichtbar {
opacity: 1;
transform: translateY(0);
}
/* ===========================================================
Einheitliches Hilfe-System (rätselübergreifend)
-----------------------------------------------------------
Wird von js/hilfe.js in einen .hilfe-slot-Container in jedem
Rätsel-Modal gerendert. Drei Stufen:
1. Tipp + Button "Info-Tafel öffnen" (ab 2 Fehlern)
2. Tipp wie 1 + Tafel öffnet automatisch (ab 3 Fehlern)
3. Telefon-Hinweis "Frag deine Lehrkraft" (ab 4 Fehlern)
=========================================================== */
.hilfe-slot {
/* Sichtbar wird der Slot nur, wenn er Inhalt hat. */
margin: 0.5rem 0 0.2rem;
padding: 0;
background: transparent;
border: none;
}
.hilfe-slot:empty {
display: none;
}
.hilfe-slot.hilfe-slot--tipp {
background: #FFF8DC; /* dezent cremig-gelb */
border: 1.5px solid #B7791F;
border-left: 5px solid #FBBF24;
border-radius: 4px;
padding: 0.55rem 0.75rem;
color: #2A1810;
}
.hilfe-slot.hilfe-slot--telefon {
background: #FDECE9; /* dezent Alarm-Rosa */
border: 1.5px solid #8B2027;
border-left: 5px solid #E63946;
border-radius: 4px;
padding: 0.55rem 0.75rem;
color: #2A1810;
}
.hilfe-tipp {
margin: 0 0 0.4rem;
font-family: Georgia, "Times New Roman", serif;
font-size: 0.92rem;
line-height: 1.4;
color: inherit;
}
.hilfe-telefon-titel {
font-family: Georgia, "Times New Roman", serif;
font-weight: bold;
font-size: 0.95rem;
margin-bottom: 0.25rem;
color: #8B2027;
}
.hilfe-telefon-text {
margin: 0 0 0.4rem;
font-family: Georgia, "Times New Roman", serif;
font-size: 0.92rem;
line-height: 1.4;
color: inherit;
}
.hilfe-btn {
background: #FBBF24;
color: #2A1810;
border: 1.5px solid #B7791F;
border-radius: 3px;
padding: 0.35rem 0.85rem;
font-family: Georgia, "Times New Roman", serif;
font-weight: bold;
font-size: 0.88rem;
letter-spacing: 0.04em;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.1s ease;
}
.hilfe-btn:hover {
background: #F59E0B;
}
.hilfe-btn:active {
transform: translateY(1px);
}
.hilfe-slot--telefon .hilfe-btn {
background: #E63946;
color: #FFF;
border-color: #8B2027;
}
.hilfe-slot--telefon .hilfe-btn:hover {
background: #B82B36;
}
/* -----------------------------------------------------------
"Zurück zum Rätsel"-Button — erscheint im Footer einer
Info-Tafel, wenn diese aus einem Rätsel heraus aufgerufen
wurde (Hilfesystem-Aufruf, openInfoPanel mit
{ from: "puzzle", puzzleId }).
Drei Erscheinungsorte:
– Standard-Info-Modal (.info-panel-footer)
– Zoom-to-Wall-Overlay (eigene fixed-Position, Klasse
.zoom-to-wall-zurueck)
– Video-Modal (.video-modal-fuss)
----------------------------------------------------------- */
.zurueck-zum-raetsel-btn {
background: #E63946;
color: #fff;
border: 2px solid #8B2027;
border-radius: 4px;
padding: 0.45rem 1rem;
font-family: Georgia, "Times New Roman", serif;
font-weight: bold;
font-size: 0.9rem;
letter-spacing: 0.05em;
cursor: pointer;
box-shadow: 0 2px 6px rgba(139, 32, 39, 0.35);
transition: background-color 0.15s ease, transform 0.1s ease;
}
.zurueck-zum-raetsel-btn:hover {
background: #C42E3B;
}
.zurueck-zum-raetsel-btn:active {
transform: translateY(1px);
}
.zurueck-zum-raetsel-btn:focus-visible {
outline: 3px solid #FFCC00;
outline-offset: 2px;
}
/* Standard-Info-Modal: Footer wird zum flex-Container, damit
Tipp-Text links und Zurück-Button rechts stehen. */
.info-panel-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
flex-wrap: wrap;
}
.info-panel-footer-tipp {
flex: 1 1 auto;
}
/* Zoom-to-Wall: Button schwebt unten mittig über der Vignette. */
.zoom-to-wall-zurueck {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 2200; /* über Vignette und X-Button */
}
/* Video-Modal: eigene Footer-Leiste mit dem Zurück-Button. */
.video-modal-fuss {
padding: 0.6rem 0.9rem 0.9rem;
display: flex;
justify-content: flex-end;
background: rgba(0, 0, 0, 0.4);
}
/* ===========================================================
Info-Tafel als Overlay innerhalb des Spielfensters
-----------------------------------------------------------
Wird aus einem Rätsel heraus über window.openInfoTafelOverlay(id)
aufgerufen. Das Rätsel-Modal bleibt im Hintergrund offen,
die Tafel erscheint als zentriertes Panel auf einem
halbtransparenten Backdrop. Schließen über X-Button oder
Escape; das Rätsel ist anschließend sofort wieder bedienbar.
=========================================================== */
.info-tafel-overlay {
position: fixed;
inset: 0;
z-index: 2200; /* über Rätsel-Modal (2000) und Info-Modal (2100) */
background: rgba(0, 0, 0, 0.55); /* dunkler Backdrop, lässt Rätsel leicht durchschimmern */
display: flex;
align-items: center;
justify-content: center;
padding: 5vh 5vw; /* 90 % Innenraum für das Panel */
opacity: 0;
transition: opacity 0.25s ease-in-out;
}
.info-tafel-overlay--sichtbar { opacity: 1; }
.info-tafel-overlay--fade-out { opacity: 0; }
.info-tafel-overlay-panel {
background: #FBF8F0; /* cremig wie das Standard-Info-Panel */
color: #1A0E06;
border: 2px solid #6b4423;
border-radius: 8px;
width: 100%;
max-width: 90vw;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
overflow: hidden;
}
/* Im Body: das Bild bei zoom-to-wall-Tafeln zentriert + komplett
sichtbar; Video-Embed mit 16:9. */
.info-tafel-overlay-bild {
display: block;
max-width: 100%;
max-height: 70vh;
margin: 0 auto;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
}
.info-tafel-overlay-video-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
max-height: 70vh;
background: #000;
border-radius: 4px;
overflow: hidden;
}
.info-tafel-overlay-video-wrap iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}