Super — hier ist die README.md mit rohem Markdown (also mit #, *, etc.), zum Kopieren:

# Escape-Pad

Interaktives Zahlen-Pad über einem Hintergrundbild (Indiana-Jones-Style).  
Vier Ziffern lassen sich über „Münz“-Klickflächen erhöhen/verringern.  
Ein Schlüssel-Button prüft den Code. Bei korrekter Eingabe wird der Pad-Inhalt geleert und eine frei definierbare Nachricht im Stil der Ziffern angezeigt. Code & Nachricht sind per Tastenkürzel änderbar und werden in `localStorage` gespeichert.

---

## Features

- Vollbild-Layout (nutzt gesamten Viewport; F11 für echten Vollbildmodus)
- Unsichtbare, responsive Klickflächen über den Münzen
- Schlüssel-Bild als „Öffnen“-Button
- Erfolgstext ersetzt den gesamten Pad-Inhalt
- Code & Nachricht per Tastenkürzel setzen (persistiert via `localStorage`)
- „Indiana-Jones“-Ziffernstile (graviert **oder** gestempelt)
- Barrierefrei: versteckter Text für Screenreader, `role="status"`

---

## Projektstruktur

/projektordner ├─ index.html ├─ style.css ├─ script.js ├─ back_image_new.jpg # Hintergrundbild └─ key.png # Schlüssel-Button (PNG, transparent)

> Passe Dateinamen bei Bedarf in `index.html`/`style.css` an.

---

## Schnellstart

1. `back_image_new.jpg` und `key.png` neben `index.html` ablegen.  
2. `index.html` im Browser öffnen.  
3. F11 → Vollbild.  
4. Münzen ↑/↓ klicken, Code einstellen, Schlüssel anklicken.

---

## Tastenkürzel

| Aktion                  | Windows/Linux           | macOS                 | Hinweis |
|------------------------|-------------------------|-----------------------|---------|
| Nachricht setzen       | **Strg + Ä** / **Strg + M** | **⌘ + Ä** / **⌘ + M**   | Prompt mit aktuellem Text |
| Code setzen (4 Ziffern)| **Strg + Ö** / **Strg + K** | **⌘ + Ö** / **⌘ + K**   | Akzeptiert `4279` oder `4,2,7,9` |

- Gespeichert unter `localStorage`-Schlüsseln:  
  - `escape_message` (Nachricht)  
  - `escape_code` (Array der 4 Ziffern)
- Zurücksetzen: Seite neu laden **und** Site-Daten/LocalStorage löschen, oder neue Werte per Shortcut setzen.

---

## Konfiguration

### 1) Position & Größen (`style.css`, im `:root`)

```css
:root{
  --pad-left: 12%;   /* Abstand vom linken Bildrand */
  --pad-top:  22%;   /* Abstand von oben */
  --pad-w:    50%;   /* Breite des aktiven Bereichs */
  --pad-h:    54%;   /* Höhe des aktiven Bereichs */

  --coin: 13.5%;     /* Durchmesser der Münz-Klickflächen relativ zum Pad */
  --key-size: 26%;   /* Breite des Schlüssel-Bildes relativ zum Pad */
  --digit-size: clamp(24px, 6.2vw, 82px); /* Basisschriftgröße der Ziffern */
}

Diese Variablen an dein Hintergrundbild anpassen, bis die Klickflächen exakt auf den Münzen liegen.

2) Defaults (script.js)

const DEFAULT_CODE = [4, 2, 7, 9];
let code = JSON.parse(localStorage.getItem("escape_code") || "null") || DEFAULT_CODE;
let solvedText = localStorage.getItem("escape_message") || "GEHEIMNIS GEÖFFNET";

---

Styling der Ziffern (Indy-Look)

Binde eine der Fonts in index.html (vor style.css) ein und nutze die zugehörige .digit-Regel in style.css.

A) Graviert / antik (Cinzel):

<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&display=swap" rel="stylesheet">

.digit{
  font: 900 var(--digit-size)/1 "Cinzel", Georgia, serif;
  letter-spacing:.06em;
  color:#3a2616;
  -webkit-text-stroke:1px rgba(0,0,0,.18);
  text-shadow:
    0 1px 0 rgba(250,228,180,.65),
    0 -1px 0 rgba(0,0,0,.20),
    0 2px 2px rgba(0,0,0,.30),
    0 0 8px rgba(110,80,40,.20);
  pointer-events:none;
  transform: translateY(4%);
  /* optional: mix-blend-mode: multiply; */
}

B) Gestempelt / Pulp (Special Elite):

<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">

.digit{
  font: 800 var(--digit-size)/1 "Special Elite","Courier New",monospace;
  letter-spacing:.04em;
  color:#2d1f12;
  text-shadow:
    0 1px 0 rgba(255,230,180,.45),
    0 2px 2px rgba(0,0,0,.35);
  filter: contrast(1.05) sepia(.25);
  pointer-events:none;
  transform: translateY(4%);
}

Der Erfolgstext nutzt .digit erneut und wird über .solvedText größer skaliert.

---

Technische Hinweise

• Vollbild: .escape nutzt width: 100vw; height: 100vh;. Hintergrundbild füllt per object-fit: cover.
• Responsiv: Prozentbasierte Positionen/Größen; Klickflächen skalieren mit.
• Events: Münz-Klicks werden delegiert über #pad behandelt; Schlüssel-Button hat id="openBtn".
• Erfolg: Bei korrektem Code wird #pad geleert und eine .solvedText.digit-Nachricht eingesetzt (siehe CSS-Klasse .pad--cleared).

---

Barrierefreiheit

• Schlüssel-Button enthält visuell versteckten Text (.visually-hidden) für Screenreader.
• Erfolgstext hat role="status" und aria-live="polite".

---

Troubleshooting

• Klickflächen „unsichtbar“ / Höhe 0: Stelle sicher, dass .escape { height: 100vh; } gesetzt ist und .overlay, .pad prozentuale Größen davon ableiten.

• Schlüssel-Button als graues Rechteck oder links verschoben: Alte Button-Styles überschreiben. In style.css sicherstellen:

  .open{ appearance:none; -webkit-appearance:none; background:transparent; border:0; padding:0; }
  .open img{ position:static; display:block; width:var(--key-size); height:auto; }
  

  Prüfe, ob es globale img-Regeln gibt (z. B. position:absolute;) – diese dürfen nicht auf den Schlüssel wirken.

• Bildpfade prüfen: back_image_new.jpg und key.png müssen erreichbar sein (gleicher Ordner wie index.html oder Pfade anpassen).

• Cache leeren: Harte Aktualisierung (Ctrl/Cmd + Shift + R).

---

Erweiterungen (Ideen)

• Klick-/Öffnen-Soundeffekte
• Mehr Ziffernstellen (Grid-Spalten erhöhen)
• Touch-Gesten (Wischen ↑/↓)
• Alternative „Öffnen“-Interaktion (z. B. Doppelklick)

---

Lizenz / Assets

• Google Fonts (Cinzel, Special Elite): SIL Open Font License – Nutzung in Webprojekten erlaubt.
• Eigene Bilder (back_image_new.jpg, key.png): Bitte Rechteinhaberschaft sicherstellen.

---

Support

Feintuning gewünscht (exakte --pad-*-Werte, Button-Größe, Farbnuancen)? Kurze Info oder Screenshot schicken – ich passe die Parameter punktgenau an.

Oder direkt herunterladen: **[Download README.md](sandbox:/mnt/data/README.md)** ✅