/* **********************************************************
   MAKING-OFF * FORMAT * DANIELA JOSS
*********************************************************** */


/* **********************************************************
   GRUNDREGELN
*********************************************************** */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: #1C1C1C;
  color: #8F8F8F;
  font-family: Arial, Verdana, sans-serif;
  overflow-x: hidden;
}


/* **********************************************************
   HAUPTKASTEN / GROSSBILDSEITE
*********************************************************** */

#large {
  margin: 0 auto;
  padding: 40px;

  background:
    linear-gradient(
      to right,
      #161616 0%,
      #262626 1%,
      #262626 10%,
      #262626 50%,
      #262626 90%,
      #262626 99%,
      #161616 100%
    );

  border-radius: 6px;
  overflow: hidden;

  box-shadow:
    inset 30px 0 30px -30px rgba(0, 0, 0, 0.20),
    inset -30px 0 30px -30px rgba(0, 0, 0, 0.20),
    0 10px 10px rgba(0, 0, 0, 0.70);
}

#large.grossbild-seite {
  width: fit-content;
  max-width: calc(100% - 40px);
}


/* **********************************************************
   TITEL
*********************************************************** */

h2 {
  font-weight: normal;
}

.digitalpaintingtitel {
  color: #606D83;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 25px;
  font-variant: small-caps;
  font-weight: 300;
  letter-spacing: 1px;
  text-align: center;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}


/* **********************************************************
   GROSSBILD
*********************************************************** */

.grossbild {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}


/* **********************************************************
   TEXTBEREICH MAKING-OFF
*********************************************************** */

.making-text {
  width: 70%;
  max-width: 760px;
  margin: 28px auto 0 auto;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
}
.making-schritte strong {
    color: #606D83;
}

.making-text a {
  color: #606D83;
  text-decoration: none;
}

.making-text a:hover,
.making-text a:focus {
  color: #8EA0BF;
}


/* **********************************************************
   TRENNER
*********************************************************** */

.leiste {
  height: 1px;
  margin: 28px auto;

  background-color: #606D83;
  box-shadow: 0 4px 5px #000;
}


/* **********************************************************
   SIGNATUR UND RUECKSPRUNG
*********************************************************** */

.signaturbild {
  display: block;
  width: 306px;
  max-width: 100%;
  height: auto;
  margin: 30px auto 0 auto;
}

.link-navigation {
  display: block;
  width: fit-content;
  margin: 25px auto 6px auto;

  color: #606D83;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.3px;
  text-decoration: none;

  transition: color 0.25s ease;
}

.link-navigation:hover,
.link-navigation:focus-visible {
  color: #8EA0BF;
}


/* **********************************************************
   HANDY
*********************************************************** */

@media (max-width: 700px) {

  #large.grossbild-seite {
    width: 100%;
    max-width: 100%;
    padding: 18px 12px;
    border-radius: 0;
  }

  .grossbild {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .making-text {
    width: 94%;
    max-width: none;
    margin: 25px auto 0 auto;
    font-size: 18px;
    line-height: 1.65;
  }

  .digitalpaintingtitel {
    font-size: 22px;
  }

}