/* Galerie Sketchy: petrolgrüne Galeriewand, Blattgold, Zeichenpapier. Die Wand und der Rahmen sind
   gemalt (public/bilder), alles andere ist zurückhaltend, damit das Bild an der Wand die Hauptrolle hat. */
:root {
  --wand: #1d4140;
  --wand-dunkel: #10282a;
  --gold: #d4a73c;
  --gold-hell: #f0d58a;
  --gold-dunkel: #8a6a1f;
  --papier: #fbf7ee;
  --karton: #efe6d2;
  --tinte: #26221d;
  --pflaume: #8c2f4b;
  --blau: #3d6fb6;
  --gut: #3c8a4f;
  --schrift: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --schild-schrift: 'Libre Caslon Text', Georgia, serif;
  --signatur: 'Mr Dafoe', cursive;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--wand-dunkel);
  color: var(--papier);
  font-family: var(--schrift);
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
img { user-select: none; -webkit-user-drag: none; }

.signatur { font-family: var(--signatur); font-weight: 400; color: var(--gold-hell); line-height: 1; text-shadow: 0 .04em .08em #0008; }

.knopf {
  font: 700 1em var(--schrift); border: 0; cursor: pointer; color: var(--tinte);
  background: var(--papier); border-radius: .6em; padding: .55em 1.1em;
  box-shadow: 0 .18em 0 var(--karton), 0 .4em 1em #0006;
  transition: transform .08s, box-shadow .08s;
}
.knopf:active { transform: translateY(.14em); box-shadow: 0 .04em 0 var(--karton), 0 .2em .5em #0006; }
.knopf:disabled { opacity: .35; cursor: default; }
.knopf:focus-visible { outline: .15em solid var(--gold-hell); outline-offset: .15em; }
.knopf.gold { background: linear-gradient(var(--gold-hell), var(--gold)); box-shadow: 0 .18em 0 var(--gold-dunkel), 0 .4em 1em #0006; }
.knopf.rund { width: 2em; height: 2em; border-radius: 50%; padding: 0 0 0 .15em; display: grid; place-items: center; }

/* Figur: gemaltes Tierporträt im Medaillon, Rand in der Stiftfarbe */
.figur { display: inline-grid; place-items: center; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, var(--papier), var(--karton)); border: .14em solid var(--f, #888);
  box-shadow: 0 .1em .3em #0006; }
.figur img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform: scale(.9) translateY(7%); }
.figur.weg { filter: grayscale(1); opacity: .45; }

@keyframes rein { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wackeln { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes atmen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }