@font-face { font-family: "Exo"; font-weight: 100; font-display: swap; src: url("/exo-latin-100-normal.woff2") format("woff2"); }
@font-face { font-family: "Exo"; font-weight: 300; font-display: swap; src: url("/exo-latin-300-normal.woff2") format("woff2"); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: "Exo", sans-serif;
  font-weight: 100;
  color: #fff;
  /* Foto mit dunkelblauer Ebene darüber (wie auf der Carrd-Seite) */
  background:
    linear-gradient(rgba(27, 33, 51, 0.75), rgba(27, 33, 51, 0.75)),
    url("/bg.jpg") center / cover no-repeat,
    #1b2133;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
}

h1 {
  font-size: 2.5em;
  font-weight: 100;
  letter-spacing: 0.65rem;
  text-transform: uppercase;
  margin-right: -0.65rem; /* gleicht letter-spacing am Ende aus */
}

.divider { width: 5rem; height: 1px; background: rgba(255,255,255,0.23); margin: 1.5rem auto; }

p { color: rgba(255,255,255,0.76); letter-spacing: 0.05rem; line-height: 1.675; }

a { color: inherit; }
main p a { text-decoration: none; }

.icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5em; height: 2.5em; margin-top: 1.5rem;
  border: 1px solid rgba(255,255,255,0.5); border-radius: 50%;
  transition: background-color .25s;
}
.icon:hover { background: rgba(255,255,255,0.12); }
.icon svg { width: 1.1em; height: 1.1em; fill: #fff; }

footer {
  text-align: center; padding: 1.25rem; font-size: 0.8em;
  color: rgba(255,255,255,0.5);
}
footer a { text-decoration: none; margin: 0 0.5rem; }
footer a:hover { color: #fff; }

/* Unterseiten (Impressum, Datenschutz) */
.page { max-width: 46rem; margin: 0 auto; padding: 3rem 1.5rem; text-align: left; font-weight: 300; }
.page h1 { font-size: 1.8em; letter-spacing: 0.3rem; margin-bottom: 2rem; }
.page h2 { font-size: 1.1em; font-weight: 300; margin: 1.8rem 0 0.5rem; letter-spacing: 0.05rem; }
.page p { margin-bottom: 0.8rem; }
.back { display: inline-block; margin-bottom: 2rem; text-decoration: none; color: rgba(255,255,255,0.6); }
.back:hover { color: #fff; }