@import "snippets/fonts.css";
@import "snippets/reset.css";

:root {
  --heading-1: 47.15pt;
  --body-copy: 11pt;
  --body-copy-leading: 12pt;
  --heading-1-leading: 36.5 pt;
  --color-text: rgb(255, 0, 208);
  --paper-colour: white;
  --drop-shadow: 10px 8px 12px #9c9c9c;
}

body {
  background-color: rgb(200, 200, 200);
  display: flex;
  justify-content: center;
  margin: 16vw;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

/* #region Page Styles */

/* A2 Page */

.page-a2 {
  width: 420mm;
  height: 580mm;
  background-color: var(--paper-colour);
filter: drop-shadow(var(--drop-shadow));
}

.text-area-a2 {
  width: 394.6mm;
  margin: 12.7mm;
  column-width: 92.3mm;
  column-gap: 8.466mm;
  height: 555mm;
  column-fill: auto; 
}

/* A3 Page */

.page-a3 {
  width: 297mm;
  height: 420mm;
  background-color: var(--paper-colour);
  filter: drop-shadow(var(--drop-shadow));
}

.text-area-a3 {
  width: 271.601mm;
  margin: 12.7mm;
  column-width: 85.2mm;
  column-gap: 8mm;
  height: 398.763mm;
  column-fill: auto; 
}

/* #endregion  */


/* #region Paragraph and Text Styles */

.body-copy {
  font-family: "Freiburg Semi Compressed";
  font-size: var(--body-copy);
  line-height: var(--body-copy-leading);
}

.event-titel {
  font-family: "Freiburg Extra Compressed Display";
  padding: 0;
  margin: 0;
  font-size: var(--heading-1);
  line-height: var(--heading-1);
  text-align: center;
  margin-bottom: var(--body-copy);
}

.untertitel {
  text-align: center;
  margin-bottom: var(--body-copy);
}

.beschreibung {
  text-align: justify;
  margin-bottom: var(--body-copy);
  hyphens: auto;
}

.credits {
  text-align: left;
  margin-bottom: var(--body-copy);
}

.credits-einleitung {
  text-align: left;
  margin-bottom: calc(var(--body-copy)*2);
}

em {
  font-family: "Freiburg Semi Compressed Italic";
  font-style: italic;
}

strong {
   font-family: "Freiburg Normal"; 
}

/* #endregion */



.kategorie-container {
  display: flex;
  justify-content: center;
}

.event-kategorie {
  display: inline-block;
  text-align: center;
  padding: 2mm 3mm 2mm 3mm;
  border: 1px solid var(--color-text);
  border-radius: 60px;
  margin-top:  var(--body-copy);
  margin-bottom: var(--body-copy);
}

.event {
  break-inside: avoid;
}