/* Platzhalterseite. Farben, Schriften und Abstände kommen aus werkstatt.css,
   Regeln für Wortmarke, Aufkleber und Lochwand aus docs/design/DESIGNSYSTEM.md (5.1, 5.2, 5.5). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ml-alu);
  color: var(--ml-tinte);
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--ml-abstand-48);
  max-width: var(--ml-breite-inhalt);
  min-height: 100dvh;
  margin: 0 auto;
  padding: var(--ml-abstand-24) var(--ml-abstand-16);
  font: var(--ml-schrift-text);
  letter-spacing: var(--ml-laufweite-text);
}

@media (min-width: 768px) {
  body {
    padding: var(--ml-abstand-32) var(--ml-abstand-48);
  }
}

/* Wortmarke: gelber Würfel mit Meeple, daneben der Name klein geschrieben */
.wortmarke {
  display: flex;
  align-items: center;
  gap: var(--ml-abstand-12);
  font: 800 1.25rem/1 var(--ml-familie-anzeige);
}

.wuerfel {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ml-gelb);
  box-shadow: inset 0 -3px 0 var(--ml-gelb-kante);
  color: var(--ml-tinte-fest);
}

.wuerfel svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.inhalt {
  display: grid;
  gap: var(--ml-abstand-32);
  align-content: center;
}

@media (min-width: 900px) {
  .inhalt {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ml-abstand-64);
    align-items: center;
  }
}

h1 {
  margin: 0 0 var(--ml-abstand-24);
  font: var(--ml-schrift-titel-1);
  letter-spacing: var(--ml-laufweite-titel-1);
}

.text p {
  max-width: 34em;
  margin: 0 0 var(--ml-abstand-16);
  color: var(--ml-graphit);
}

/* Bühne mit Lochwand: Punkte im 24-px-Raster, um 12 px versetzt */
.buehne {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 280px;
  border: 1px solid var(--ml-raster);
  border-radius: var(--ml-ecke-gross);
  background-color: var(--ml-blech);
  background-image: radial-gradient(circle, var(--ml-loch) 1.3px, transparent 1.4px);
  background-position: 12px 12px;
  background-size: 24px 24px;
}

.figur {
  width: min(44%, 180px);
  fill: var(--ml-petrol);
  filter: drop-shadow(0 10px 12px var(--ml-loch));
}

/* Aufkleber: gelb, klein geschrieben, leicht gedreht */
.aufkleber {
  position: absolute;
  top: 18%;
  right: 16%;
  padding: 6px 12px;
  border: 3px solid var(--ml-rand-aufkleber);
  border-radius: 10px;
  background: var(--ml-gelb);
  box-shadow: var(--ml-schatten);
  color: var(--ml-tinte-fest);
  font: 800 15px/1 var(--ml-familie-anzeige);
  transform: rotate(-5deg);
}

.fuss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ml-abstand-8) var(--ml-abstand-24);
  justify-content: space-between;
  font: var(--ml-schrift-klein);
  color: var(--ml-graphit);
}

.fuss p {
  margin: 0;
}

.fuss nav {
  display: flex;
  gap: var(--ml-abstand-24);
}

.fuss a {
  color: var(--ml-tinte);
  text-underline-offset: 3px;
}

.fuss a:focus-visible {
  outline: 2px solid var(--ml-petrol);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Vorrat für das Meeple-Symbol, unsichtbar */
.vorrat {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}