@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;500;600&display=swap');
  box-sizing: border-box;
}

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

body {
 font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  color: #2c2c2c;
  background: #f5f2ec;
}

/*
  Die Startseite füllt immer das komplette Browserfenster.
*/
.screen {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  background: #f5f2ec;
}

/*
  Das Bild liegt innerhalb einer großzügigen Fläche.
  Wichtig:
  object-fit: contain sorgt dafür, dass das Original-Seitenverhältnis
  des Bildes vollständig erhalten bleibt.
*/
.artwork {
  position: absolute;
  top: 5vh;
  right: 5vw;
  bottom: 5vh;
  left: 30vw;

  display: flex;
  align-items: center;
  justify-content: center;
}

.artwork img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;
}

/*
  Name, Unterzeile und Menü.
*/
.identity {
  position: absolute;
  left: 4vw;
  bottom: 6vh;

  width: 22vw;
  max-width: 320px;
}

.identity h1 {
  margin: 0 0 0.35em;
  font-size: clamp(30px, 2.8vw, 50px);
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.subtitle {
  margin: 0;

  font-size: clamp(16px, 1.25vw, 22px);
  line-height: 1.35;
  font-weight: 400;
}

nav {
  display: flex;
  gap: 1.8em;
  margin-top: 1.9em;
}

nav a {
  color: inherit;
  text-decoration: none;

  font-size: clamp(12px, 0.9vw, 16px);
  font-weight: 400;

  text-transform: uppercase;
  letter-spacing: 0.04em;
}

nav a:hover {
  opacity: 0.5;
}

/*
  Sprachumschalter oben rechts.
*/
.language {
  position: absolute;
  z-index: 10;

  top: 3.5vh;
  left: 4vw;

  display: flex;
  align-items: center;
  gap: 0.35em;

  font-size: clamp(11px, 0.75vw, 14px);
  font-weight: 400;
}

.language button {
  padding: 0;
  border: 0;
  background: transparent;

  color: inherit;
  font: inherit;

  cursor: pointer;
  opacity: 0.45;
}

.language button.active {
  opacity: 1;
}

.language button:hover {
  opacity: 1;
}

/*
  Bei schmaleren Fenstern rückt das Bild etwas nach links.
*/
@media (max-width: 1000px) {
  .artwork {
    left: 25vw;
    right: 4vw;
  }

  .identity {
    width: 20vw;
  }
}

/*
  Tablet / kleinere Displays.
*/
@media (max-width: 760px) {
  .screen {
    min-height: 100svh;
  }

  .artwork {
    top: 10vh;
    left: 5vw;
    right: 5vw;
    bottom: 24vh;
  }

  .identity {
    left: 5vw;
    right: 5vw;
    bottom: 5vh;

    width: auto;
    max-width: none;
  }

  .identity h1 {
    font-size: clamp(24px, 7vw, 34px);
  }

  .subtitle {
    font-size: 14px;
  }

  nav {
    gap: 1.4em;
    margin-top: 1.1em;
  }

  .language {
  top: 3vh;
  left: 5vw;
}
}