/* DIZZY – „Bierdeckel-Pop“: Knallgelb, dicke schwarze Konturen, harte versetzte Schatten. */
@font-face {
  font-family: 'Bricolage';
  src: url('fonts/BricolageGrotesque_500Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage';
  src: url('fonts/BricolageGrotesque_800ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}

:root {
  --ground: #ffd23f;
  --ink: #161616;
  --paper: #ffffff;
  --muted: #5c5340;
  --busfahrer: #5b7cff;
  --dealer: #ff6b4a;
  --reihen: #3fdca6;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--ground);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Bricolage', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 16px 48px;
}

h1,
h2,
h3,
strong {
  font-weight: 800;
}

h1 {
  font-size: 34px;
  line-height: 1.1;
  margin: 0 0 8px;
}

h2 {
  font-size: 22px;
  margin: 32px 0 8px;
}

a {
  color: var(--ink);
  font-weight: 800;
}

.hero {
  text-align: center;
}

.hero img {
  width: min(300px, 80vw);
  height: auto;
}

.slogan {
  font-size: 30px;
  font-weight: 800;
  margin: 8px 0 0;
}

.subtitle {
  color: var(--muted);
  margin: 0 0 24px;
}

.badge {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  font-weight: 800;
  padding: 12px 22px;
  border-radius: 999px;
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--paper);
}

.card {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 20px;
  margin: 20px 0;
}

.games {
  display: grid;
  gap: 16px;
  margin: 24px 0;
}

.game {
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 16px 20px;
}

.game h3 {
  margin: 0;
  font-size: 22px;
}

.game p {
  margin: 2px 0 0;
}

.game.busfahrer {
  background: var(--busfahrer);
}

.game.dealer {
  background: var(--dealer);
}

.game.reihen {
  background: var(--reihen);
}

.note {
  font-size: 14px;
  text-align: center;
  color: var(--muted);
}

footer {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px 40px;
  text-align: center;
  font-size: 15px;
}

footer a {
  margin: 0 10px;
}

.legal h1 {
  margin-top: 8px;
  font-size: 28px;
}

/* Lange deutsche Wörter dürfen auf schmalen Handys umbrechen. */
h1,
h2,
h3 {
  hyphens: auto;
  overflow-wrap: break-word;
}

.back {
  display: inline-block;
  margin-bottom: 16px;
}