:root {
  --paper: #ead1ae;
  --paper-light: #f1ddc0;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100svh;
  overflow: auto;
    background-color: #f1d7b4;
  background-image: url("assets/papier-nahtlos.jpg");
  background-repeat: repeat;
  /* Papiertextur ähnlich groß wie auf der Visitenkarten-Grafik darstellen. */
  background-size: min(100vw, 1400px) auto;
}

.stage {
  width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* The original artwork is always shown completely and centered. */
.artboard {
  display: block;
  width: min(100vw, 141.3727svh);
  height: auto;
  flex: 0 0 auto;
  overflow: visible;
}

/* SVG links must remain clickable above the image. */
.artboard a {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 600px) {
  body {
    background:
      radial-gradient(circle at 20% 10%, rgba(255,255,255,.18), transparent 25%),
      radial-gradient(circle at 80% 80%, rgba(120,80,35,.06), transparent 30%),
      var(--paper-light);
  }
}

/* On narrow portrait screens the artwork stays fully visible; the paper
   background continues above/below it and therefore repeats vertically. */
@media (orientation: portrait) and (max-width: 600px) {
  .stage {
    min-height: 100svh;
    padding-block: 1.5rem;
  }
}