Projekt_FH/styles.css

:root {
  /* Pergament-Position */
  --pad-left: 16.3%;
  --pad-top: 35.3%;
  --pad-w: 33.4%;
  --pad-h: 52.5%;

  /* Größe der Klickflächen */
  --coin: 98px;
  --digit-size: clamp(24px, 6.2vw, 600px);
  --key-size: 26%; /* Breite des Schlüssel-Bildes relativ zum Pergamentbereich */
}

* { box-sizing: border-box; }

/* Seite füllt den Viewport, kein Scrollen */
html, body {
  height: 100%;
  margin: 0;
  background: #000;
  overflow: hidden;
}

/* Vollbild-Stage */
.escape {
  position: fixed;     /* oder: absolute + inset:0; */
  inset: 0;            /* top/right/bottom/left = 0 */
  margin: 0;
  line-height: 1;
  user-select: none;
}

/* Bild füllt Fläche, beschneidet proportional */
.escape__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Overlay bleibt weiterhin über dem Bild */
.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pad {
  position: absolute;
  left: var(--pad-left);
  top: var(--pad-top);
  width: var(--pad-w);
  height: var(--pad-h);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
}
/* Wenn gelöst: Pad zu einer Zelle machen und Text zentrieren */
.pad--cleared {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  align-items: center;
  justify-items: center;
}

/* Nachricht nutzt das Ziffern-Styling, nur größer und ohne Y-Offset */
.solvedText {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  text-align: center;
  padding: 0 2vw;
  animation: solved-in .35s ease both;
}
.solvedText.digit {
  font-size: clamp(28px, 4vw, 96px); /* größer als die Ziffern */
  transform: none;                   /* .digit hebt sonst minimal an */
  letter-spacing: .06em;             /* etwas „heroischer“ */
  margin-top: -160px;
}

@keyframes solved-in {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: scale(1); }
}

.coin {
  pointer-events: auto;
  appearance: none;
  border: 0;
  background: transparent;
  width: var(--coin);
  height: var(--coin);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

/*
.coin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0 rgba(255,255,255,0);
  transition: box-shadow .15s ease;
}
.coin:hover::after,
.coin:focus-visible::after {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
}
*/
.digit {
  /* Größe kommt weiterhin aus --digit-size */
  font: 900 var(--digit-size)/1 "Cinzel", Georgia, "Times New Roman", serif;
  letter-spacing: .06em;

  /* Farb- & Relieflook (eingraviert/antikes Braun) */
  color: #3a2616;                /* dunkles, warmes Braun */
  -webkit-text-stroke: 1px rgba(0,0,0,.18); /* dezente Fase/Kante */
  text-shadow:
    0 1px 0 rgba(250, 228, 180, .65),   /* obere Lichtkante (pergamentig) */
    0 -1px 0 rgba(0, 0, 0, .20),        /* untere Schattenkante */
    0 2px 2px rgba(0, 0, 0, .30),       /* weicher Drop-Shadow */
    0 0 8px rgba(110, 80, 40, .20);     /* warmer „Glow“ im Pergament */
  pointer-events: none;
  transform: translateY(4%);
  mix-blend-mode: multiply;             /* fügt sich besser in Pergament ein */
}

/* Screenreader-Only Text (für Barrierefreiheit) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Bild-Button */
.open{
  grid-column: 1 / -1;
  grid-row: 4;                  /* in die 4. Reihe */
  justify-self: center;

  /* Defaults neutralisieren (verhindert graues Rechteck) */
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  padding: 0;
  cursor: pointer;

  display: grid;                /* Bild sauber zentrieren */
  place-items: center;
  pointer-events: auto;
}

.open img{
  display: block;
  width: var(--key-size);
  height: auto;
  transform: rotate(-18deg);           /* leicht schräg */
  transform-origin: 50% 50%;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.45));
  transition: transform .15s ease, filter .15s ease;
}
.open:hover img{
  transform: rotate(-18deg) translateY(-2px) scale(1.03);
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.55));
}
.open:active img{
  transform: rotate(-18deg) translateY(0) scale(.98);
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.45));
}
/* optional sichtbarer Fokusrahmen für Tastatur-Nutzer */
.open:focus-visible img{
  outline: 3px solid rgba(255,255,255,.85);
  outline-offset: 4px;
}

.message {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  color: #fff;
  font: 800 clamp(20px, 6vw, 44px)/1.15 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: scale(.98);
  transition: opacity .3s ease, transform .3s ease;
}
.message--show {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.pad--shake { animation: shake .35s ease; }